2

だから私はそれについてのスレッドがすでにここにあることを知っています. 上記のスレッドで提案されたアイデアに従いましたが、うまくいきました。ただし、なぜ機能するのかわかりません。

次に例を示します。

(100, 100) を中心とする正方形があり、その幅/高さが 100 であるとします。したがって、左上隅は (50, 50) になります。

ここで、X2 を正方形の中心にズームしたい、つまり (100, 100) にズームしたいとしましょう。したがって、次の変換シーケンスを記述します。

translate(100, 100);
scale(2, 2);
translate(-100, -100);

したがって、キャンバスは変換を逆の順序で適用するため、変換された正方形の左上隅は (0, 0) になり、高さ/幅は 200 になります。

さて、X2 を既に変換された正方形の右下隅にズームしたいとしましょう。直感的に、次の変換シーケンスを実行したいと思います。

translate(200, 200);
scale(2, 2);
translate(-200, -200);

ただし、キャンバスは変換を逆の順序で適用するため、機能しません。つまり、2 つの変換シーケンスを合計すると、次のようになります。

// First Sequence
translate(100, 100);
scale(2, 2);
translate(-100, -100);

// Second Sequence
translate(200, 200);
scale(2, 2);
translate(-200, -200);

これは、2 番目のシーケンスが最初のシーケンスの前に各ポイントに適用されることを意味します (キャンバスが下から上への変換を適用するため)。これは誤りです。したがって、上記のリンクのスレッドは次のことを示唆しています。

シーケンス 2 が最初に適用されるため、ポイント (200, 200) を元の座標に変換し、最初のシーケンスの逆数を適用する必要があります。つまり、 がT1最初のシーケンスを表す行列である場合、次のようになります。

// First Sequence
translate(100, 100);
scale(2, 2);
translate(-100, -100);

// Second Sequence
var point = SVGPoint(200, 200);
var transformedPoint = point.matrixTransform(T1.inverse());
translate(-transformedPoint.x, -transformedPoint.y);
scale(2, 2);
translate(transformedPoint.x, transformedPoint.y);

しかし、なぜそれが機能するのですか？なぜそのように機能する必要があるのか​​ 本当にわかりません...誰か詳しく説明できますか？

ありがとう！

4

2 に答える 2

1

あなたは変換を考えすぎているようです！

簡単なルールは次のとおりです。

一連の変換を適用した場合、変換前の状態に戻したい場合は、すべてを元に戻す必要があります。

限目 ！！！！

したがって、次の 4 つの変換を行うとします。

  • ＃1を行います。context.translate(100,100);
  • ＃2を行います。context.scale(2,2);
  • ＃3を行います。context.translate(-20,50);
  • ＃4を行います。context.scale(10,10);

元の変換されていない状態に戻すには、まったく逆の順序で元に戻す必要があります。

  • 元に戻す #4: context.scale( 0.10, 0.10 ); // 10 倍にスケーリングしたので、0.10 だけスケーリングを解除する必要があります
  • 元に戻す #3: context.translate(20,-50);
  • 元に戻す #2: context.scale( 0.50, 0.50 ); // 2 倍にスケーリングしたため、0.50 だけスケーリングを解除する必要があります
  • 元に戻す #1: context.translate(-100,-100);

友達の家に行くようなものだと考えてください。

右 + 左 + 右に曲がります。

次に、家に帰るには、それを逆にする必要があります: 左 + 右 + 左

元の歩行とはまったく逆に、歩行パスを元に戻す必要があります。

それが変換の仕組みでもあります。

それが理由です ！！

于 2013-05-26T09:13:29.223 に答える