Kinetic JS を使用して、ステージ全体がドラッグ可能である場合、ステージの現在の中心にズームインするにはどうすればよいですか?
以前の質問の回答の助けを借りて、中心からズームすることができました。ただし、これの問題は、ステージが他の場所にドラッグされた場合でも、常に元の中心点からスケーリングされることです。元の中心点は現在の中心点ではないため、ズームインするとステージが別の場所に移動し始めます。
このJSFiddleを作成したことを示すために:http://jsfiddle.net/uJeyC/2/
var group = new Kinetic.Group({
x: width / 2,
y: height / 2,
width: width,
height: height
});
group.setOffset(width / 2, height / 2);
問題を示す画像を次に示します。
現在の中心点を計算し、ズーム倍率でグループを乗算してから、新しい中心点を計算するなど、いくつかのことを試しました。それとの差を利用してグループをオフセットしましたが、オフセットが大きすぎたためうまくいきませんでした。
これに似た質問は次のとおりです: Kinetic JS でドラッグされた Kinetic.Path 要素のオフセットを調整して、オフセットの中心を常に Stage に保ちます。しかし、与えられた答えは満足のいくものではありません。なぜなら、左上からズームし、KinectJS の古いバージョンでのみ機能するライブラリを示唆しているからです。