Удаление изображения с холста html5 при его перетаскивании в определенное место

У меня есть холст 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./

Может ли кто-нибудь определить, что я делаю неправильно, и как я могу убедиться, что изображение удаляется с холста, когда оно перетаскивается в соответствующее поле описания?


javascript html5-canvas kineticjs
person Noble-Surfer    schedule 17.12.2012    source источник

Ответы (1)


arrow_upward
1
arrow_downward

Этот пример раздражал меня, потому что казался старым, поэтому я немного его отредактировал...
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/

person PAEz    schedule 18.12.2012
comment
JSFiddles все еще работает? - person yonetpkbji; 22.11.2013
comment
@perl-user Я давно не смотрел на Kinect и похоже, что нет, извините. URL-адрес, который я использовал для ссылки на источник KinectJS, больше не работает, и я не могу найти cdn или что-то еще. Если вы можете найти URL-адрес, просто удалите старый во внешних ресурсах и замените его этим. Извините, я не могу больше помочь... На самом деле я изменил URL-адрес на тот, который указан на главной странице, но, глядя на этот URL-адрес, я бы не подумал, что он постоянный, но, м-м, вот.... jsfiddle.net/LTq9C/12 ...похоже, это все равно не работает;( - person PAEz; 22.11.2013