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 で (0,0) に配置するとボディはポイント オブジェクトになり、左上隅になります。cocos2d の y 座標に画面サイズを追加すると、オブジェクトは cocos2d の左上隅でもある (0,100) に配置されます。

  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 に答える