我有以下 JS 函数,我用它来检测图像何时被拖到 HTML5 画布上的某个位置:
function isHit(mouseX, mouseY, obj){
console.log("isHit has been called from within if statement in mousemove function");
console.log("draggingImage variable value = " +draggingImage);
if(draggingImage == true){
console.log("if dragging image == true statment is being called");
console.log("Value of selectedImage = " + selectedImage);
console.log("Value of selectedImageArrayLocation = " + selectedImageArrayLocation);
if(mouseY > 250){
console.log("Value of obj.shape.index = " +obj.shape.index);
if((mouseX > 80) && (mouseX < 200) && (selectedImageArrayLocation >= 0) && (selectedImageArrayLocation <= numImagesAssets)){
console.log("Correct");
document.getElementById('tipsParagraph').innerHTML = "Correct! This is an asset because it is an item that can be bought or sold for cash.";
selectedImage.remove();
console.log("selectedImage has been removed: " + selectedImage);
}else{
console.log("Incorrect");
document.getElementById('tipsParagraph').innerHTML = "Incorrect! This icon is an asset because it is an item that can be bought or sold for cash.";
}
}
}
}
如果图像被拖到正确的位置,我想将其从画布中删除,并为用户提供一些反馈。如果它被拖到错误的位置,我想将图像留在画布上,并为用户提供反馈。
每当拖动图像时,我都会从我的mousemove
函数中调用上述函数(我有一个布尔值,每当mousedown
在图像上检测到 a 时将其设置为 true,并且在检测到 a 时将其设置为 false mouseup
。
目前,当图像被拖到正确的位置时,它会从画布中移除,并向用户提供反馈,但数组中其余图像的位置随后会重新排序。
我想知道这是否是因为selectedImage.remove();
我上面的函数中的行正在从数组中删除图像,而不仅仅是从画布中?
我如何从画布中删除图像,而不是从数组中删除,记住我已经使用 KineticJS 库将所有图像绘制到画布上?