在 Canvas 中拖动/滚动图像时避免出现空白

Question

所以我在画布 (700x600) 中有一个图像 (1020x736)，我正在尝试滚动/拖动图像，以便我可以看到其余部分，除非我不想看到空白区域拖动图像时到达图像边界。

这是我的问题的一个示例

黑色边框表示画布的边框。

这是我目前的代码

var dragging = false;
var canvas = document.getElementById('canvas');
var context = canvas.getContext('2d');
var lastX;
var lastY;
var translated = 0;

canvas.onmousedown = function(e){
  var evt = e || event;
  dragging = true;
  lastX = evt.offsetX;
  lastY = evt.offsetY;
}

window.onmousemove = function(e){
  var evt = e || event;
  if(dragging){
    var deltaX = evt.offsetX - lastX;
    var deltaY = evt.offsetY - lastY;
    context.translate(deltaX,deltaY);
    lastX = evt.offsetX;
    lastY = evt.offsetY;
    draw();
  }
}

function draw(){
  var image = document.getElementById('img1');

  context.drawImage(image,0,0);
}

canvas.onmouseup = function(e){
  dragging = false;
}


window.onload = draw;

Answer 1

从左上角开始绘制，以防止图像进入画布很远

// canvas is the canvas
// img is the image you are drawing;
// posX and posY are the location (top left) that the image has been dragged to 
x = Math.max( -(img.width - canvas.width), Math.min(0, posX));
y = Math.max( -(img.height - canvas.height), Math.min(0, posY));

ctx.drawImage(img, x, y);