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;

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

画布拖动鼠标移动

1 个答案: