javascript - 背景画像で HTML5 Canvas を移動する

Question

HTML5 キャンバスに描かれた巨大な図を視覚化したいと考えています。以下に示すように、世界地図を想像してみましょう。「まともな」詳細で同時にすべてを視覚化することは不可能です。したがって、私のキャンバスでは、マウスを使用してパンし、表示されていない他の国を表示できるようにしたいと考えています。

HTML5キャンバスでこの種のパンを実装する方法を知っている人はいますか? もう1つの機能は、ズームインとズームアウトです。

私はいくつかの例を見てきましたが、それらを機能させることができず、私の質問に対処するために縫い合わせることもできませんでした。

前もって感謝します！

Answer 1

あなたが要求したようなことをするには、それぞれが異なる z-index を持つ 2 つのキャンバスを持つ場合にすぎません。一方のキャンバスは他方よりも小さく、位置はマウスの x と y に設定されます。

次に、大きなキャンバスに対する小さなキャンバスの x と y の位置に基づいて、小さなキャンバスに正しい画像を表示するだけです。

ただし、あなたの質問は特定の解決策を求めています。誰かがそれを行っていて、コードをダンプする意思がない限り、完全な回答を得るのは難しいでしょう。でもうまくいくことを願っています。