Javascript 翻转x y位置

对于我的游戏，我的服务器对象API将游戏对象/项目的所有信息作为JSON提供。

我的物体有方向。方向系统与翻转一起工作：如果翻转方向

6

，则获得方向

0

。每个对象都有层。每个层都有一个图像及其预定义的

x，y

（

顶部，左侧

，在px）位置，因此可以组合对象

因此，我想发送到客户端对象，这些对象被阿勒迪翻转。如果我有方向

6

，客户端请求是方向

0

，我的服务器将翻转每一层图像和方向6的

x，y

坐标，这样就可以用翻转的图像正确组装对象，客户端不必翻转任何东西，只需使用每个层的给定

x，y

坐标组合对象

翻转图像是可以的，我做到了，我没有任何问题。但我不知道该怎么做才能使X，Y坐标与翻转的图层图像一起工作，所以它不能正确绘制

示例：

未重叠层信息：

direction: 6,
base64ImageURL: [b64 string],
x: 42,
y: 16

翻转层信息应为：

direction: 0,
base64ImageURL: [b64 string flipped],
x: ??,
y: ??

另一个例子：

例如，我的对象上有3个层：层

1

，

2

和

3

方向

0

是翻转方向

6

的结果。 所以我有方向6：

{
    Layer1: {image: "[b64 image]", x:32, y:20},
    Layer2: {image: "[b64 image]", x:50, y:45},
    Layer3: {image: "[b64 image]", x:10, y:65}
}

---

因此，当我翻转每个层图像，使其具有方向0信息对象时，x、y位置也应更改，否则层将无法正确组合。但是我应该如何处理

x&y

？哪种操作？

我不知道你是否想翻转或转置图像。

.scale（-1,1）

应将图像翻转到其Y轴上

只需将此css添加到图像类：

.flipped {
    transform: scale(-1, 1);
    -moz-transform: scale(-1, 1);
    -webkit-transform: scale(-1, 1);
    -o-transform: scale(-1, 1);
    -khtml-transform: scale(-1, 1);
    -ms-transform: scale(-1, 1);
}

或者根据您的代码，我有一种预感，这可能会起作用：

context.scale(-1, 1);
context.drawImage(image, image.width, 0);

---

从

图像.width

中删除

-

符号您实际上想要吗？我想要翻转图像及其绘图坐标。我用

scale（-1,1）来做

所以现在我需要翻转x，y位置，我不知道问题不在于图像，而是图像翻转时层的x和y坐标。例如，我的对象上有3层：层1，2和3方向0是翻转方向6的结果。所以我有方向6：

Layer1:x=32；y=20；第2层：x=50；y=45；第3层：x=10；y=65因此，当我翻转每个图层图像时，x、y位置也应该更改，否则图层将无法正确组装。但是我该怎么处理x&y呢？哪个操作？这些
x，y
坐标代表什么？层的左上角？所有图层的大小是否相同？像素的左上方位置。不，层有不同的大小