如何将 canvas 元素移动到另一个 canvas 元素之上

Question

我有 2 个 canvas 元素，我想通过鼠标拖动将 canvas 元素移动到顶部，但它会产生奇怪的结果。

这是我的事件代码（变量 cvs 是位于其他 canvas 元素之上的 canvas 元素）

  var drag = false;
  cvs.addEventListener('mousedown', function(event) {
    drag = true;
  });
  
  cvs.addEventListener('mouseup', function(event) {
    drag = false;
  });

  cvs.addEventListener('mousemove', function(event) {
    if (drag) {
      const rect = cvs.getBoundingClientRect()
      const x = event.clientX - rect.left;
      const y = event.clientY - rect.top;
      cvs.style.left = x + "px";
      cvs.style.top = y + "px";
      console.log(x, y);
    }
  });

当我拖动顶部时 canvas 它开始在两个位置之间来回闪烁

Answer 1

乍一看，你好像是在用相对值来设置绝对位置。

因此，第一次迭代，左侧位置更新为 x，然后下一次迭代从鼠标位置减去 x 的最后一个值。我认为这会将其移入和移出屏幕。

比如，clientX 在 100，left 在 10。

T1 -> x = 100 - 10 = 90, T2 -> x = 100 - 90 = 10.

因此“闪烁”

你想要做的，是获取鼠标的相对移动值，并将元素移动相同的量。

所以在鼠标按下时，记录鼠标初始位置和元素初始位置。

从每次鼠标移动迭代的鼠标位置中减去初始鼠标位置，并将初始元素位置加上元素的相对变化分配给元素。


  var initialPosition = null
  var initialMouseCoords = null
  
  cvs.addEventListener('mousedown', function(event) {
    initialPosition = cvs.getBoundingClientRect()
    initialMouseCoords = {clientX: event.clientX, clientY: event.clientY}
  });
  
  cvs.addEventListener('mouseup', function(event) {
    initialPosition = null
    initialMouseCoords = null
  });

  cvs.addEventListener('mousemove', function(event) {
    if (initialMouseCoords) {
      const dx = event.clientX - initialMouseCoords.clientX;
      const dy = event.clientY - initialMouseCoords.clientY;

      cvs.style.left = initialPosition.left + dx;
      cvs.style.top = initialPosition.top + dy;
      
      console.log(dx, dy);
    }
  });

请记住，根据您的用例，存在拖动事件，您可能想探索它作为替代方案。

如何将 canvas 元素移动到另一个 canvas 元素之上

How to move a canvas element on top of another canvas element

javascript

canvas

mouseevent

dom-events