0

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

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

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

我正在尝试将相同的图像放在原点位于左下角且 y 轴垂直的环境（cocos2d）中。

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

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

4

1 回答 1

1

以下公式适用于将位置从 CSS3 转换为 Cocos2d：

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

解释：

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

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

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

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

于 2013-09-11T04:01:03.020 回答