画布拖动鼠标移动答案

【问题标题】：Canvas drag on mouse movement画布拖动鼠标移动
【发布时间】：2021-04-30 23:59:50
【问题描述】：

我正在尝试构建一个可以使用鼠标移动拖动的画布。而且我做错了我无法理解的错误，原因似乎一开始似乎起作用，然后就像一个增量错误使画布移动得太快。

考虑以下代码，

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。

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

【问题讨论】：

标签： javascript html canvas

【解决方案1】：

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

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

dragStart = dragEnd;

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

【讨论】：