javascript - 如何知道 mousedown 事件是否发生在 Canvas 中我们想要的位置？

Question

这里我有一个与在 Canvas 上移动元素相关的代码示例。要将圆形移动到 Canvas 上的其他位置，下面的代码将检查圆形元素本身是否触发了 mousedown 事件，以便可以使用 mousemove 启动进一步的拖动。但我不明白用于了解鼠标是否在正确的圆圈上双击以拖动它的逻辑。

// start dragging
function DragStart(e) {

    //coordinates of mouse from mousedown event e{x,y}
    e = MousePos(e);
    var dx, dy;

    //initialCirclePosition is the centre (x,y) of the circle
    dx = initialCiclePosition.x - e.x;
    dy = initialCiclePosition.y - e.y;

    if ((dx * dx) + (dy * dy) < circleRadius * circleRadius)   { 

        //Yes, user is trying to move the circle only
        ........
    }
}

当用户将鼠标控件放在任何元素上(通过单击它)时，会发生 mousedown 事件，然后，当他尝试拖动该元素时，会发生 mousemove 事件。但是，在触发 mousemove 之前，我们应该确定用户是否正在尝试拖动正确的元素(此处为圆圈)。如果您看到上面的代码，则使用 if() 语句中的逻辑进行检查。我无法理解这个逻辑，这就是问题所在。谢谢。

Answer 1

对代码正在测试的内容的解释。

这部分代码...

((dx * dx) + (dy * dy) < circleRadius * circleRadius)

...使用毕达哥拉斯定理以数学方式测试鼠标是否在圆的圆周内。

(dx * dx) + (dy * dy) 测量圆心与鼠标之间的距离。它实际上测量中心点到鼠标距离的平方，但由于 Math.sqrt 是一项昂贵的操作，因此我们只需将鼠标距离平方与圆半径进行比较平方。我们得到了相同的结果，但避免了昂贵的 Math.sqrt。

这是使用毕达哥拉斯定理确定距离的教程:

https://www.youtube.com/watch?v=We3LG8pK-LU

<小时/>

在没有看到更多代码的情况下，我们无法判断为什么要进行测试。

但是，但大概如果鼠标位于圆圈内，您就可以确定用户打算拖动圆圈。

反之，如果鼠标位于圆圈之外，则表明用户打算执行单击。

<小时/>

另一种点击与拖动测试:

这个替代测试很好，因为您可以让用户单击圆圈或拖动圆圈。此替代方案尝试“读取用户的意图”。

1. 在 mousedown 中，保存起始 mouseX 和 mouseY 位置。

   var isDown,startX,startY,itIsADrag;
   
   function handleMouseDown(e){                
   
     // save the mouse position at mousedown
     startX=parseInt(e.clientX-offsetX);
     startY=parseInt(e.clientY-offsetY);
   
     // initially set the "itIsADrag" flag to false
     itIsADrag=false;
   
     // set the "isDown" flag to true
     isDown=true;
   
     ... any other code ...
   }
   

2. 在 mousemove 中，测试鼠标移动的总像素是否少于 5 个像素(或 10px 或其他)。

   • 如果移动 <5 个像素，则不会执行任何预期的点击操作。

   • 如果移动 >=5 像素，则开始拖动操作。

     function handleMouseMove(e){
     
         // return if the mouse is not down
         if(!isDown){return;}
     
         // get the current mouse position
         mouseX=parseInt(e.clientX-offsetX);
         mouseY=parseInt(e.clientY-offsetY);
     
         // do nothing if the mouse has moved less than 5 total pixels since mousedown
         if(!itIsADrag && Math.abs(mouseX-startX)+Math.abs(mouseY-startY)<5){return;}
     
         // Set the dragging flag to true
         // This flag prevents the Math.abs test above if we know we're dragging
         itIsADrag=true;
     
         // start a drag operation
         ... do drag stuff ...
     }
     

3. 当 mouseup 发生时，我们只需读取 itIsADrag 标志即可确定用户是否单击或拖动。

   function handleMouseUp(e){
   
     if(itIsADrag){
         console.log("You have been dragging");
     }else{
         console.log("You've did a click");
     }
   
     // clean up by clearing the isDown flag
     isDown=false;
   }
   

示例代码和演示:

var canvas=document.getElementById("canvas");
var ctx=canvas.getContext("2d");
function reOffset(){
  var BB=canvas.getBoundingClientRect();
  offsetX=BB.left;
  offsetY=BB.top;        
}
var offsetX,offsetY;
reOffset();
window.onscroll=function(e){ reOffset(); }

var isDown=false;
var isDown,startX,startY,itIsADrag;

$("#canvas").mousedown(function(e){handleMouseDown(e);});
$("#canvas").mousemove(function(e){handleMouseMove(e);});
$("#canvas").mouseup(function(e){handleMouseUp(e);});
$("#canvas").mouseout(function(e){handleMouseOut(e);});

function handleMouseDown(e){
  // tell the browser we're handling this event
  e.preventDefault();
  e.stopPropagation();

  // save the mouse position at mousedown
  startX=parseInt(e.clientX-offsetX);
  startY=parseInt(e.clientY-offsetY);

  // initially set the "itIsADrag" flag to false
  itIsADrag=false;

  // set the "isDown" flag to true
  isDown=true;
}

function handleMouseUp(e){
  // tell the browser we're handling this event
  e.preventDefault();
  e.stopPropagation();

  // report if this was a click or a drag
  if(itIsADrag){
    alert("You have been dragging");
  }else{
    alert("You've did a click");
  }

  // clean up by clearing the isDown flag
  isDown=false;
}

function handleMouseOut(e){
  // clean up by clearing the isDown flag
  isDown=false;
}

function handleMouseMove(e){
  // return if the mouse is not down
  if(!isDown){return;}

  // tell the browser we're handling this event
  e.preventDefault();
  e.stopPropagation();

  // get the current mouse position
  mouseX=parseInt(e.clientX-offsetX);
  mouseY=parseInt(e.clientY-offsetY);

  // do nothing if the mouse has moved less than 5 total pixels since mousedown
  if(!itIsADrag && Math.abs(mouseX-startX)+Math.abs(mouseY-startY)<5){return;}

  // Set the dragging flag to true
  // This flag prevents the Math.abs test above if we know we're dragging
  itIsADrag=true;
}

body{ background-color: ivory; }
#canvas{border:1px solid red;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<h4>Click or drag in the canvas.</h4>
<canvas id="canvas" width=300 height=300></canvas>