使用kineticjs将图像拖放到图像中

Question

我想放下树上的星星，并检测哪颗星星已经掉落，所以我可以突出显示并最终选择它。但我无法超越仅仅移动明星。

我选择kineticjs是因为它适用于触摸屏，所以我不想在可能的情况下使用其他东西。

（除非它具有触摸屏和鼠标太作品）这是我的javascript：

<script defer="defer"> 
    function drawImage(imageObj) { 
    var stage = new Kinetic.Stage({ 
     container: "star", 
     width: 900, 
     height: 500 
    }); 
    var layer = new Kinetic.Layer(); 

    // star 
    var star = new Kinetic.Image({ 
     image: imageObj, 
     x: 376, 
     y: 30, 
     width: 40, 
     height: 46, 
     draggable: true, 
     draw: false 
    }); 

    // add cursor styling 
    star.on('mouseover', function() { 
     document.body.style.cursor = 'pointer'; 
    }); 
    star.on('mouseout', function() { 
     document.body.style.cursor = 'default'; 
    }); 

    layer.add(star); 
    stage.add(layer); 
    } 
    var imageObj = new Image(); 
    imageObj.onload = function() { 
    drawImage(this); 
    }; 
    imageObj.src = 'http://upload.wikimedia.org/wikipedia/commons/d/df/Star_icon_1.png'; 

</script> 

请参阅捣鼓的完整代码： http://jsfiddle.net/hpq7rpnh/1/

Answer 1

添加树木作为自己的对象，然后你可以检查星星和树木之间的碰撞：

var starLayer = new Kinetic.Layer(); // its own layer, index should be above tree layer 
var treeLayer = new Kinetic.Layer(); // its own layer 

stage.add(treeLayer); 
stage.add(starLayer); 

var tree = new Kinetic.Rectangle(...); 

treeLayer.add(tree); 

var tree2 = new Kinetic.Rectangle(...); // another tree at another coordinate 
treeLayer.add(tree2); // assuming you have a layer for Trees ONLY already 

后来，当用户放下星星时，你需要检查碰撞

// sample bounding box collision detection 
function checkCollision(){ 
    var trees = treeLayer.getChildren(); // gets all the trees 
    for(tree in trees) 
     if(star.xCoord > tree.xCoord && star.xCoord + star.width < tree.xCoord + tree.width ... same for y coordinates) 
}