화면 해상도 및 캔버스 크기 조정과 무관하게 이동 경계를 결정하는 캔버스

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 문. :

미리 읽어 주셔서 감사합니다. 어떤 도움이라도 대단히 감사하겠습니다!