画布拖动鼠标移动

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。

有人可以帮助我了解我错过了什么吗？

Answer 1

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

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

dragStart = dragEnd;

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