當它被拖動到某個位置時，從html5畫布中移除圖像

我有一個顯示大量圖像和四個說明框的HTML5畫布。目前可以在畫布上拖放圖像，但是我想添加刪除圖像的功能，以便將圖像拖動到正確的描述框中。當它被拖動到某個位置時，從html5畫布中移除圖像

我試着寫了下面的功能，但它目前並不似乎在做什麼...也就是說，如果我將圖像拖到其描述盒，並把它，它仍然在畫布上：

function initStage(images){ 
    var stage = new Kinetic.Stage({ 
     container: "container", 
     width: 1000, 
     height: 500 
    }); 
    var descriptionLayer = new Kinetic.Layer(); 
    //var imagesLayer = new Kinetic.Layer(); 
    var allImages = []; 
    var currentScore = 0; 

    var descriptionBoxes = { 
     assetsDescriptionBox: { 
      x: 70, 
      y: 400 
     }, 
     liabilitiesDescriptionBox: { 
      x: 300, 
      y: 400 
     }, 
     incomeDescriptionBox: { 
      x: 530, 
      y: 400 
     }, 
     expenditureDescriptionBox: { 
      x: 760, 
      y: 400 
     }, 
    }; 

    /*Code to detect whether image has been dragged to correct description box */ 
    for (var key in sources){ 
     /*Anonymous function to induce scope */ 
     (function(){ 
      var privateKey = key; 
      var imageSource = sources[key]; 

      /*Check if image has been dragged to the correct box, and add it to that box's 
       array and remove from canvas if it has */ 
      canvasImage.on("dragend", function(){ 
       var descriptionBox = descriptionBoxes[privateKey]; 
       if(!canvasImage.inRightPlace && isNearDescriptionBox(itemImage, descriptionBox)){ 
        context.remove(canvasImage); 
        /*Will need to add a line in here to add the image to the box's array */ 
       } 
      }) 

     })(); 
    } 

}

我是基於我發現在本教程編寫的代碼：http://www.html5canvastutorials.com/labs/html5-canvas-animals-on-the-beach-game-with-kineticjs/

任何人能發現我在做什麼錯了，我怎麼能保證圖像從畫布上刪除時，它的拖到相應的描述框？

來源

2012-12-17 someone2088

這個例子竊聽我，因爲它似乎老了，所以我編輯了一點...
http://jsfiddle.net/LTq9C/1/
......記住，我不能是積極的，我所有的編輯都做的事情最好的辦法，林新和所有;）

在這裏，我再次編輯爲你展示要刪除的圖像...

animal.on("dragend", function() { 
     var outline = outlines[privKey + "_black"]; 
     if (!animal.inRightPlace && isNearOutline(animal, outline)) { 
      animal.remove(); 
      animalLayer.draw(); 
     } 
    });

http://jsfiddle.net/8S3Qq/1/

來源

2012-12-18 10:00:41 PAEz

是JS小提琴仍然運作？ –

@ perl的用戶我還沒有在年齡看着Kinect和看起來像他們不是，對不起。我用於鏈接到KinectJS源代碼的網址不再工作，我無法找到一個CDN或任何東西。如果你可以找到一個網址，那麼只需刪除外部資源中的舊網址，然後將其替換。對不起，我不能更多的幫助....其實我把網址更改爲主頁上的網址，但看着那個網址我不認爲它的永久性，但是，哦，在這裏你去... http：// jsfiddle。淨/ LTq9C/12/...看起來不工作anywayz;（ – PAEz

當它被拖動到某個位置時，從html5畫布中移除圖像

回答

相關問題