画布确定平移边界独立于屏幕分辨率和画布调整大小答案

【问题标题】：Canvas determining panning boundary independent of screen res and canvas resize画布确定平移边界独立于屏幕分辨率和画布调整大小
【发布时间】：2013-12-18 08:22:00
【问题描述】：

我已经为 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 的尺寸与画布相同。

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

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

感谢您提前阅读本文，我们将不胜感激！

【问题讨论】：

标签： javascript html canvas panning

【解决方案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;

【讨论】：

【解决方案2】：

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

$('#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
});

【讨论】：