canvas - canvas kineticjs でドラッグ＆ズーム

Question

kineticjs でドラッグ可能なステージを作成し、キャンバスをスケーリングしてズーム機能も作成しました。

ズーム倍率を使用すると、キャンバスが画面の中央にズームされます。しかし、キャンバスをドラッグしてズーム機能を使用した後、キャンバスは最初は中心にあったポイントにまだズームしていますが、現在は脇にドラッグされています。

私が欲しいのは、ドラッグ後に画面の中央にある新しいポイントにズームすることです。

誰でもこれを処理する方法を説明できますか?

前もって感謝します！

Answer 1

キャンバスがズームする場所を認識できるように、オフセットを固定点 (画面の中心) に設定する必要があります。そうでない場合は、常に元のポイントに向かってズームします。

var stage = new Kinetic.Stage({
  container: 'container',
  width: 400,
  height: 300,
  offset: [200, 150] //Zoom towards Point (200,150)
};

また、詳細については、こちらの回答をご覧ください。