画布随鼠标移动拖拽

Question

我想建立一个画布，可以通过鼠标移动来拖动。但我做错了什么，无法理解，因为一开始似乎能够工作，然后就像是有一个递增的错误，使得画布移动得太快了。

考虑以下代码：

window.onload = function() {
  var canvas = document.getElementById("canvas");
  var context = canvas.getContext('2d');


  function draw() {
    context.fillRect(25, 25, 100, 100);
  }

  function clear() {
    context.clearRect(0, 0, canvas.width, canvas.height);
  }
  var drag = false;
  var dragStart;
  var dragEnd;
  draw()
  canvas.addEventListener('mousedown', function(event) {
    dragStart = {
      x: event.pageX - canvas.offsetLeft,
      y: event.pageY - canvas.offsetTop
    }

    drag = true;

  })

  canvas.addEventListener('mousemove', function(event) {
    if (drag) {
      dragEnd = {
        x: event.pageX - canvas.offsetLeft,
        y: event.pageY - canvas.offsetTop
      }
      context.translate(dragEnd.x - dragStart.x, dragEnd.y - dragStart.y);
      clear()
      draw()
    }

  })

}

在Plunker上的实时示例https://plnkr.co/edit/j8QCxwDzXJZN2DKszKwm。

有人可以帮我理解我缺少了什么吗？

- Valex

Answer 1

你的代码问题在于，每次将矩形相对于dragStart位置移动blablabla像素时，translate()方法不是基于dragStart位置，而是你当前的位置。

要解决这个问题，在调用translate方法后，应该添加以下内容：

dragStart = dragEnd;

这样你的位置也会基于当前鼠标位置。

- user6360214