1

HTML5 キャンバスのアニメーションにパン機能を実装しました。これはおそらく、私が作成したものの中で最も嫌な実装です。そうは思えませんが、動作し、今のところはそれで十分です。

したがって、これらの変数を設定します。簡単にするために、Y 軸のロジックと、保存と復元は除外します。

var translationX = 0; //This is where to start the clipping region

これが私の描画ロジックです。Canvas は描画する画像、bCanvas は画像の上に配置する「ビューポート」です。ズームインしていないときは、キャンバス イメージ全体が表示されます。すべてがここで意図したとおりに機能します。

function drawBuffer(){

    //If zoomed in I set the clipping region dimensions to half,  
      //having the effect of scaling by 2.

    if(stateManager.getZoomState() == "zoomIn")
        bContext.drawImage(canvas,translationX,translationY,
                           bCanvas.width*0.5,bCanvas.height*0.5,
                           0,0,
                           bCanvas.width,bCanvas.height);


    //Otherwise just draw the image to a scale of 1
    else
        bContext.drawImage(canvas,0,0,bCanvas.width,bCanvas.height);
}

これは X 軸でキャンバスを横切ってクリッピング領域を移動するためのロジックであり、問​​題がある場所 - translationX のインクリメントを停止するタイミングを示す条件です。

 function moveClippingRegion(){

    if(state is set to zoomed in){

        if(Right arrow key is pressed){

         //This condition admittedly is just the result of hacking away, but it works
          // in the sense that I stop incrementing translationX when 
          //at the edge of the canvas

            if(translationX>= (bCanvas.width -canvas.width) - translationX - 64){
               //The -64 literal is definitely a hacking attempt, 
              //but without the clipping region increments two times more than 
              //it should, thus going off the canvas.

            }
            else
                translationX += 16;

        }
 }

ウィンドウのサイズが変更されていない場合、これはすべて機能するので、bCanvas のサイズが変更されたときにそのスケールにどのような条件を設定するかについての方向性を探しています。

重要な場合のサイズ変更機能は次のとおりです。

     function onResize(){

    bCanvas.width = window.innerWidth *    0.60952380952380952380952380952381;      

    bCanvas.height = window.innerHeight * 0.83116883116883116883116883116883;
    drawBuffer();
}

描画キャンバスの寸法は 1024 x 768 であるため、これらの醜いリテラルは bCanvas をキャンバスと同じ寸法にするだけです。

これは、私の画面解像度でのみ機能し、ウィンドウのサイズが変更されていない場合にのみ機能します。私は、ウィンドウのサイズを変更した後、解像度に関係なくこれを機能させようとしています。

最後に、さまざまな解像度で発生している問題を説明するための画像を示します。ウィンドウのサイズが変更された後、ウィンドウのサイズが非常に小さいサイズに変更された場合、クリッピング領域も移動しません。これは、logc で予想されることです。 moveClippingRegion 関数の if ステートメント。

ここに画像の説明を入力

これを事前に読んでくれてありがとう、どんな助けでも大歓迎です！

4

2 に答える 2

1

キャンバスを描くと役立つ場合があります。

以下のような解決策が得られるはずです。ズーム率は x2 (.5) ズーム キャンバスの半分であり、ズーム キャンバスから左の位置を引いた値 / キャンバス幅から 2 を引いたものです。またはその逆（ヘッドスクラッチャー：P）

var StepRate; // <- your step increment when moving.
if(translationX >= (canvas.width / 2) - (((zoomCanvas.width - canvas.width) / 2) + StepRate)){}
else
    translationX += StepRate;
于 2013-12-04T18:01:27.023 に答える