objective-c - 如何将变换矩阵左上角的 anchor 更改为左下角？

Question

比如说，我在 HTML 页面上有一张图片。我使用 CSS3 矩阵函数对图像应用仿射变换。看起来像:

img#myimage {
    transform: matrix(a, b, c, d, tx, ty);
    /* use -webkit-transform, -moz-transform etc. */
}

HTML 页面的原点是左上角，y 轴是倒转的。

我试图将相同的图像放在原点为左下角且 y 轴为直立的环境 (cocos2d) 中。

为了在其他环境中获得相同的结果，我需要以某种方式转换原点并将其反射(reflect)在生成的 CGAffineTransform 中。

如果我能在此处的矩阵数学方面获得一些帮助，那就太好了。 (我不太擅长矩阵。)

Answer 1

以下公式可行，用于将位置从 CSS3 转换为 Cocos2d:

(屏幕尺寸 - CSS3 中的“y”位置 - 对象的高度)

解释:

1. 要使 Cocos 环境的原点与 CSS3 环境的原点相同，我们只需将屏幕尺寸添加到 cocos2d 的主体 y 坐标。例如。屏幕大小为 (100,100) 并且正文是一个点对象，如果您将它放在 CSS3 中的 (0,0) 处，它将位于左上角。如果我们将屏幕尺寸添加到 cocos2d 的 y 坐标，则对象将放置在 (0,100)，这也是 cocos2d 的左上角

2. 要使坐标相同，由于 Y 轴是倒置的，我们必须从 Cocos2d 的屏幕尺寸中减去 CSS3 中给出的“Y”坐标。假设我们将上一个示例中的相同点对象放置在 CSS3 中的 (0,10) 位置，我们将在 cocos2d 中将其放置在 (0, 100 - 10) 位置，这与屏幕上的位置相同

3. 因为我们的 body 并不总是一个点对象，所以我们也必须处理它的 anchor 。如果假设 body 的高度是 20 并且我们将它放在 CSS3 中的 (0,10) 处，那么它将被放置在左上角的位置并且会下降，因为 Y 轴是倒转的因此，我们还必须从屏幕尺寸和“y”坐标中减去 body 的总高度，以将其放置在相同的位置，即 (0, 100 - 10 - 20) 将 body 放在 cocos2d 中的相同位置环境

我希望我是正确和清楚的:)