canvas - 単一のキャンバスズーム/パンを実装する方法

Question

単一のキャンバス要素（既存の画像ではなく、手動で作成されたピクセル値で埋められています）があり、そのキャンバスにズーム/パンコントロールを実装したいのですが、それを行うための既存のライブラリはありますか？

どうもありがとう！

Answer 1

ズームとパンを具体的に解決するだけのライブラリはおそらく見つからないでしょうが、 EaselJSやKineticJSなどの一般的なキャンバスライブラリを使用すると、簡単に実装できます。

この場合、「ビューポート」（DOMに追加するキャンバス）を表すキャンバスと、「描画」（ビューポートよりも大きい可能性がある）を表す別のキャンバスを作成できます。次に、スケーリング係数と平行移動を使用して、ビューポートキャンバスに「描画」キャンバスを描画します。スケーリングと変換の値は、マウスホイール（またはタッチデバイスの場合はピンチ）やクリックアンドドラッグなどのマウス操作で変更できます。

ライブラリを使用すると、記述するコードが少なくなり、より読みやすいコードになります。ライブラリを使用すると、キャンバス内の「オブジェクト」の追跡と操作が簡単になります。また、マウスの操作を簡素化するので、ぜひチェックしてみることをお勧めします。