2

多数の画像と4つの説明ボックスを表示している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/で見つけたチュートリアルに基づいています。

誰かが私が間違っていることを見つけることができますか、そして画像が対応する説明ボックスにドラッグされたときに画像がキャンバスから確実に削除されるようにするにはどうすればよいですか？

4

1 に答える 1

1

その例は古いように見えたので私を悩ませたので、少し編集しました...
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-18T10:00:41.523 に答える