0

HTML5 キャンバス上の特定の場所に画像がドラッグされたことを検出するために使用している次の JS 関数があります。

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 ライブラリを使用してすべての画像をキャンバスに描画したことを念頭に置いて、配列からではなくキャンバスから画像を削除するにはどうすればよいですか?

4

1 に答える 1

0

次の方法で形状を非表示にしてみてください。

selectedImage.hide();

それを削除する代わりに。このhide()メソッドは KineticJS に組み込まれています。
これでもうまくいかない場合は、不透明度を 0 に設定してください。

selectedImage.setOpacity(0);
于 2013-03-19T22:57:25.520 に答える