Question

我在html5画布中为动画实现了平移功能。这可能是我生产过的最恶心的实现，或者看起来很哈哈，但它确实有效，而且现在还不错。

所以我设置了这些变量 - 我将排除Y轴逻辑，以及任何保存＆amp;恢复简单。

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

这是我的绘图逻辑。画布是要绘制的图像，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与画布的尺寸相同。

这仅适用于我的屏幕分辨率，以及窗口未调整大小时。我完全试图让这个工作独立于分辨率/在窗口调整后调整。

最后，这是一个图像，以帮助说明在不同的分辨率/窗口大小调整后发生的问题，如果窗口已调整到一个非常小的尺寸，裁剪区域甚至不移动，这是预期的moveClippingRegion函数中if语句中的logc：

enter image description here

感谢您提前阅读，非常感谢任何帮助！

Answer 1

当我遇到类似的东西时，我正在制作一个绘画类型的网络应用程序。您需要添加/减去偏移顶部/底部并乘以/除以元素的偏移高度/宽度。有一些奇怪的数学，不幸的是你会花很多时间来解决。在你做对了之前，你必须只使用数字。确保使用偏移量，它将为您提供实际位置，而不是CSS或JS中设置的位置。设定值不是用于计算元素大小和实数的实数。位置。我不知道在缩放时告诉你什么，因为我添加了一个缩放功能，所以我可以操纵尺寸。这是我的应用程序的一个片段，它至少会显示一个起点：

$('#pg'+id).mousemove(function(e) {
    // x and y are globals, x inits to null, mousedown sets x, mouseup returns x to null
    if (x==null) return;
    x = (100/$('#zoom').val())*(e.pageX - $(this).offset().left);
    y = (100/$('#zoom').val())*(e.pageY - $(this).offset().top);

    $('#debug').html(x+', '+y); // constantly update (x,y) position in a fixed div during debugging
});

Answer 2

画出画布可能对你有帮助。

应该给你一个类似下面的解决方案。看起来缩放率为x2（.5）缩放画布的一半，减去画布宽度的缩放画布/ 2的左侧位置。或反之亦然（head scratcher：P）

var StepRate; // <- your step increment when moving.
if(translationX >= (canvas.width / 2) - (((zoomCanvas.width - canvas.width) / 2) + StepRate)){}
else
    translationX += StepRate;

画布确定平移边界独立于屏幕res和画布调整大小

2 个答案: