如何檢測可拖動的圓形與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重疊的另一個圓形？

回答

相關問題