我有一个 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/
谁能发现我做错了什么,以及如何确保将图像拖到相应的描述框时从画布中删除?