html5 캔버스에서 이미지를 특정 위치로 끌 때 이미지 제거

Question

여러 개의 이미지와 설명 상자를 표시하는 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/

사람이 내가 잘못 뭘하는지, 나는 그 때 이미지가 캔버스에서 제거되었는지 확인하는 방법을 발견 할 수 해당 설명 상자로 드래그 했습니까? , 내 모든 편집이 일을 할 수있는 최선의 방법임을 긍정적 인 기운을 명심 ...
http://jsfiddle.net/LTq9C/1/
를가 된 것 같았다 때문에

Answer 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/