キャンバスをズームインしてパンする機能を実装しています。これを行うには、描画用とビューポート用の 2 つのキャンバスを用意します。クリッピング領域の制限を見つけるのに苦労しています。
とにかく、これはすべて機能します。ズームインが呼び出されたときに、スケールを1より大きい値に設定しているだけです。これにより、目的の効果が得られます。
スプライト シートをアニメーション化するのと同じ方法でキャンバスをパンしています。ビューポート キャンバスは、描画キャンバスの上のクリッピング領域として機能します。
ただし、キャンバスが右と下に行きすぎないようにするために、境界に設定する数値にこだわっています。
ここで、わかりやすくするためにパンを実装する方法を示します。
//This only gets called when the canvas is zoomed in.
viewPort.drawImage(canvas,translationX,translationY,viewPort.width,viewPort.height
,0,0,viewPort.width,viewPort.height);
TranslationX は 0 から始まり、右矢印キーを押すたびに値を増やします。これが任意の数値であってはならないことはわかっていますが、今のところ 4 に設定しています。
とにかく、これはすべて機能しますが、キャンバスの端から外れてしまい、パンを正しく停止するための条件を理解するのに苦労しています。これが私がこれまでに持っているものです:
if(canvas.width + translationX <= bCanvas.width)
translationX += 4; //Pan right...
明らかにこれは機能しません。キャンバスの端からビューポートの約 1/5 をパンします。私は今、条件に任意の数値を投げ込むだけでハッキングしているだけなので、これは何らかのガイダンスを求める良い機会になると思いました.
前もって感謝します
編集：
わかりましたので、説明が不明確な場合に備えて、問題を説明するための画像を作成しました。
緑色のボックスは、パンしている画像、上記のスニペットで名前が付けられた「キャンバス」を表します。
黄色のボックスはクリッピング領域、上記のスニペットの「viewPort」を表します。
灰色の領域は、Web ページの残りの部分を表しています。
明確にするために、クリッピング領域がキャンバスから外れないようにするために条件にどの値を入れるかについて混乱しています。
再度、感謝します