使用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) 
}