如何知道mousedown事件是否出现在我们想要的画布上？

1 回答

• 1

  An explanation of what your code is testing.

  这部分代码......

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

  ...使用毕达哥拉斯定理来数学测试鼠标是否在圆周内 .

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

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

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

  ---

  我们无法告诉 why 测试是在没有看到更多代码的情况下完成的 .

  但是，但大概是如果你决定用户想要拖动圆圈的那个小圈子 .

  而相反，如果鼠标是你决定用户打算执行点击的圈子 .

  ---

  An alternative click vs drag test:

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

  • 在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 ...
  }
  

  • 在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 ...
  }
  

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

  回复于 2024-04-28T08:33:53+08:00