Question

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

我的对象有方向。方向系统使用翻转：如果您翻转方向6，则获得方向0。每个对象都有图层。每个图层都有图片及其预定义 x, y（px中的top, left）位置，因此对象可以组装。

所以我想向客户端发送无法翻转的对象。如果我有方向6，并且客户端请求是方向0，我的服务器将翻转每个图层图像和x,y 坐标 的方向 6 因此可以正确组装对象 WITH FLIPPED 图像，客户端没有来翻转任何东西，只是为每个图层组装具有给定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}
}

因此，当我将每个图层图像翻转为具有Direction 0信息对象时，也应更改x，y位置，否则图层将无法正确组装。但是我应该对x & y做些什么呢？哪个操作？

Answer 1

如果您想要翻转或转置图片，我并不完全明白。 .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);

从-

中删除image.width符号

翻转x个位置

1 个答案: