2

html5 キャンバスでオブジェクト (長方形、円など) を描画しています。これらのオブジェクトには、スケール、傾斜、回転などの変換プロパティがあります。これらのオブジェクトはネストできます。

変換を適用した後、特定のオブジェクトの正確な x、y 座標を見つけたいのですが、頭を悩ませているときに問題が発生します。

インタラクティブなコンピュータ グラフィックスに関心のあるすべての専門家へ。この問題を解決するのを手伝ってください。

前もって感謝します。

4

2 に答える 2

10

2Dのすべてのアフィン変換は、次の形式の行列として表すことができます。

    [ a  c  dx ]
T = [ b  d  dy ]
    [ 0  0   1 ]

これは、メソッドで表すことができますcontext.transform(a, b, c, d, dx, dy);。

ある座標に適用する場合(x,y)、最初に3番目の座標を追加する必要があります。これは常に1：<x, y, 1>です。次に、変換行列を乗算して結果を得ることができます。

[ a*x + c*y + dx ]
[ b*x + d*y + dy ]
[       1        ]

最後の座標で「1」以外のものを取得した場合は、ベクトルをそれで除算する必要があります。

逆にするには、マトリックスを反転する必要があります。

[ d/M  -c/M  (c*dy - d*dx)/M ]
[ b/M   a/M  (b*dx - a*dy)/M ]
[  0     0          1        ]

はどこMですか(a*d - b*c)。

行列を乗算することにより、複数の変換を順番に適用できます。乗算の順序は重要です。

context.translate(dx,dy) <==> context.transform( 1,  0,  0,  1, dx, dy)
context.rotate(θ)        <==> context.transform( c,  s, -s,  c,  0,  0)
context.scale(sx,sy)     <==> context.transform(sx,  0,  0, sy,  0,  0)

どこc = Math.cos(θ)とs = Math.sin(θ)

オブジェクト空間で座標を取得(x,y)し、それが画面のどこに配置されるかを知りたい場合は、それに変換を適用します。

画面に座標(x,y)があり、オブジェクトのどのポイントであるかを知りたい場合は、変換の逆数を掛けます。

于 2012-06-05T11:59:48.173 に答える