如何检测可拖动的圆形与KineticJS重叠的另一个圆形？

我有一个可拖动的圆形状，用户拖动到另一个圆形[静态，不可拖动]。当可拖动的圆圈与静态圆圈重叠时，我需要显示“成功”文本。我该怎么做？如何检测可拖动的圆形与KineticJS重叠的另一个圆形？

2013-03-26 devcoder

不知道，但如果你用什么毕达哥拉斯获得之间的距离2个圆圈的中心，然后检查它是否小于两个圆的半径？ – 2013-03-26 02:32:57

当用户拖动圆圈时，可以处理“拖动”事件。

在“dragmove”中：测试圆圈是否发生碰撞。如果是这样，那么宣布成功！

Circle1.on("dragmove",function(){ 
    if(theyAreColliding(Circle1,Circle2)){ 
     // Success! 
    } 
});

碰撞测试看起来是这样的：

function theyAreColliding(c1,c2){ 
    var dx=c1.getX()-c2.getX(); 
    var dy=c1.getY()-c2.getY(); 
    var radiiSum=c1.getRadius()+c2.getRadius(); 
    console.log(dx+"/"+dy+": "+radiiSum); 
    return((dx*dx+dy*dy)<radiiSum*radiiSum); 
}

这里是代码和一个小提琴：http://jsfiddle.net/m1erickson/3dQpL/

<!DOCTYPE html> 
<html> 
    <head> 
    <meta charset="utf-8"> 
    <title>Prototype</title> 
    <script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script> 
    <script src="http://www.html5canvastutorials.com/libraries/kinetic-v4.3.3-beta.js"></script> 

<style> 
canvas{ 
    border:solid 1px #ccc; 
} 
</style>   
<script> 
$(function(){ 

     var layer = new Kinetic.Layer(); 
     var stage = new Kinetic.Stage({ 
      container: "container", 
      width: 400, 
      height: 400 
     }); 
     stage.add(layer); 

     // mouse events don't fire on the empty part of the stage 
     // so fill the stage with a rect to get events on entire stage 
     // now stage.on("mouse... will work 
     var background = new Kinetic.Rect({ 
      x: 0, 
      y: 0, 
      width: 400, //stage.getWidth(), 
      height: 400, //stage.getHeight(), 
      fill: "#eee" 
     }); 
     layer.add(background); 

     var Radius1=50; 
     var Circle1=new Kinetic.Circle({ 
      x: 225, 
      y: 125, 
      radius: Radius1, 
      fill: 'green', 
      stroke: 'orange', 
      strokeWidth: 2, 
      draggable:true   
     }); 
     layer.add(Circle1); 


     var Radius2=50; 
     var Circle2=new Kinetic.Circle({ 
      x: 75, 
      y: 175, 
      radius: Radius2, 
      fill: 'blue', 
      stroke: 'black', 
      strokeWidth: 2   
     }); 
     layer.add(Circle2); 

     var message = new Kinetic.Text({ 
     x: 10, 
     y: 15, 
     text: "", 
     fontSize: 30, 
     fontFamily: 'Calibri', 
     fill: 'green' 
     }); 
     layer.add(message); 

     var instructions = new Kinetic.Text({ 
     x: 10, 
     y: 285, 
     text: "Drag green on top of blue", 
     fontSize: 18, 
     fontFamily: 'Calibri', 
     fill: 'green' 
     }); 
     layer.add(instructions); 
     layer.draw(); 

Circle1.on("dragmove",function(){ 
    if(theyAreColliding(Circle1,Circle2)){ 
     message.setText("Collision Detected!"); 
     Circle1.setFill("red"); 
     layer.draw(); 
    }else{ 
    } 
}); 


function theyAreColliding(c1,c2){ 
    var dx=c1.getX()-c2.getX(); 
    var dy=c1.getY()-c2.getY(); 
    var radiiSum=c1.getRadius()+c2.getRadius(); 
    console.log(dx+"/"+dy+": "+radiiSum); 
    return((dx*dx+dy*dy)<radiiSum*radiiSum); 
} 



}); // end $(function(){}); 

</script>  
</head> 

<body> 
    <div id="container"></div> 
</body> 
</html>

来源

2013-03-26 04:46:05 markE

哇！这太棒了！谢谢 – devcoder 2013-03-26 14:03:07

正是我所评论的。然而，你可以做到这一点，而不会创建这么多不必要的变量：'function theyAreColliding（c1，c2）{return Math.pow（c1.getX（） - c2.getX（）， 2）+ Math.pow（c1.getY（） - c2.getY（），2） 2013-03-26 14:24:43

@FabrícioMatté - 谢谢！另一个相关问题，我将如何修改此代码，以便只有当一个圈子完全或超过50％覆盖另一个时才显示“成功”。 – devcoder 2013-03-26 14:27:46

如何检测可拖动的圆形与KineticJS重叠的另一个圆形？

回答

相关问题