Question

说，我在HTML页面上有一个图像。我使用CSS3矩阵函数对图像应用仿射变换。它看起来像：

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

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

我正在尝试将相同的图像放在一个环境（cocos2d）中，其中原点是左下角，y轴是直立的。

要在其他环境中获得相同的结果，我需要以某种方式转换原点，并在结果CGAffineTransform中反映出来。

如果我能得到一些关于矩阵数学的帮助，那就太棒了。（我对矩阵不太满意。）

Answer 1

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

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

说明：

为了使Cocos环境的原点与CSS3环境相同，我们只需要将屏幕大小添加到cocos2d的主体y坐标中。例如。屏幕尺寸为（100,100），如果您将它放在CSS3中的（0,0），它将位于左上角，则主体是一个点对象。如果我们将屏幕大小添加到cocos2d的y坐标中，对象将被放置在（0,100），这也是cocos2d的左上角
为了使坐标相同，由于Y轴是反转的，我们必须从Cocos2d的屏幕尺寸中减去CSS3中给出的“Y”坐标。假设我们将前一个例子中的相同点对象放在CSS3中的（0,10），我们将它放在（0,100-10）cocos2d中，这将是屏幕上相同的位置
由于我们的身体并不总是一个点对象，我们也必须照顾它的锚点。如果假设身体的高度为20并且我们将它放在CSS3中的（0,10）处，那么它将被放置在左上角位置并且因为Y轴被反转而下降因此，我们还必须从屏幕尺寸中减去身体的总高度，并将“y”坐标放置在相同的位置，即将身体置于cocos2d中的相同位置（0,100-10-20）环境

我希望我是正确和清楚的：）