javascript - Canvas 确定平移边界，独立于屏幕分辨率和 Canvas 调整大小

Question

我已经在 html5 Canvas 中为动画实现了平移功能。这可能是我制作的东西中最令人作呕的实现，或者看起来是哈哈，但它确实有效，而且现在已经足够好了。

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

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

这是我的绘图逻辑。 Canvas 是要绘制的图像，bCanvas 是放置在图像上的“视口(viewport)”。当我没有放大时，这只会显示整个 Canvas 图像。所有工作均按预期进行。

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);
}

这是在 Canvas 上沿 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();
}

绘图 Canvas 的尺寸为 1024 x 768，因此那些丑陋的文字只会使 bCanvas 的尺寸与 Canvas 相同。

这仅适用于我的屏幕分辨率，并且当窗口未调整大小时。我竭尽全力试图让它独立于分辨率/在调整窗口大小后工作。

最后这里有一张图片来帮助说明在不同分辨率下发生的问题/在调整窗口大小后，如果窗口已调整到非常小的尺寸，剪辑区域甚至不会移动，这是预期的moveClippingRegion 函数中 if 语句中的 logc.:

感谢您提前阅读本文，如有任何帮助，我们将不胜感激!

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
});