Question

这里我有一个与在画布上移动元素相关的代码示例。要将圆圈移动到画布上的其他位置，下面的代码将检查是否在圆形元素本身上触发了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

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

但是，但是大概是如果鼠标在圆圈内，你决定用户想要拖动圆圈。

相反，如果鼠标在圆圈外，您决定用户是否打算执行点击。

另一种点击与拖动测试：

这个替代测试很不错，因为你可以点击圆圈或拖动圆圈。此替代方案试图“读取用户的意图”。

在mousedown中，保存起始鼠标X＆amp; 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 ...
}

在mousemove中，测试鼠标移动的总像素是否小于约5（或10px或其他）。

如果移动＆lt; 5像素，则无需预期此次点击。

如果移动＆gt; = 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 ...
}

当鼠标发生时，我们只需阅读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>

如何知道在画布上我们想要的地方是否发生了mousedown事件？

1 个答案: