Kinetic.js удаляет изображение с холста по нажатию кнопки за пределами холста

Нужна помощь. Я не знаю, проблема ли это в библиотеке kinetic.js или я делаю что-то не так. изображения, которые я помещаю в холст, который работает нормально.. (Я использовал только одну функцию для загрузки любого изображения из-за пределов холста, делая это.. Набор изображений:

     <li>
        <a href="javascript:void(0)" onclick="loadWithType(document.getElementById('i3'))">

        <img src="<?php echo base_url()?>images/eagle/baby1.png" id="i3"  alt="Pulpitrock"width="100" height="120" /></a>
         <a href="javascript:void(0)" onclick="removewithType(document.getElementById('i3'))">Close</a>
       </li>
     <li>
        <a href="javascript:void(0)" onclick="loadWithType(document.getElementById('i4'))">
        <img src="<?php echo base_url()?>images/eagle/pattern-1.png" id="i4" alt="Pulpit rock" width="100" height="120" /></a>
        <a href="javascript:void(0)" onclick="removewithType(document.getElementById('i4'))">Close</a>
        </li>

загрузка изображений

         function loadWithType(img){
        var sources = {
            yoda1 : img.src,
        };
        loadImages(sources,initStage1);
      };

функция (определение позиции и все)

           function initStage1(images){ 

            layert = new Kinetic.Layer();

            var yoda1 = new Kinetic.Image({
            image: images.yoda1,
            x: 106,
            y: 0,
            width: 180,
            height: 220,
            draggable:true,
            detectionType: "pixel"

            });


                    /*
                     * check if animal is in the right spot and
                     * snap into place if it is
                     */
                    yoda1.on("dragend", function() {
                            layert.draw();
                            // disable drag and drop

                            yoda1.saveImageData();
                    });

            layert.add(yoda1);
            stage.add(layert);
            yoda1.saveImageData();

            }

Это работает нормально .. (загрузка изображений при нажатии на них)

Но когда я пытаюсь удалить изображения с помощью кнопки закрытия. У меня возникают проблемы, поскольку последнее изображение удаляется, и после этого библиотека выдает мне ошибку. Я делаю что-то вроде этого..

          function removewithType(img){
        var sources = {
            yoda1 :img.src,
        };
        loadImages(sources,removeStage1);
        }

         function removeStage1(images){

                var yoda1 = new Kinetic.Image({
                image: images.yoda1,
                x: 106,
                y: 0,
                width: 180,
                height: 220,
                draggable:true,

            });
                layert.clear();
                stage.remove(layert);
                layert.draw();

                 }

здесь прежде всего .. функция layert.remov(yoda1) не работает.

и эта функция ведет себя неожиданным образом..

любые указатели

Спасибо..


person boyfromnorth    schedule 09.08.2012    source источник
comment
Не могли бы вы опубликовать рабочий пример проблемы на jsfiddle.net?   -  person net.uk.sweet    schedule 09.08.2012


Ответы (1)


Если причина, по которой вы удаляете изображение, скрывается, вы можете просто использовать функцию .hide():

yoda1.hide();
layert.draw();

Другая проблема с вашим кодом заключается в том, что вы использовали layert.draw(); после того, как удалили его stage.remove(layert);, поэтому, когда вы удалили этот слой, вы не можете его рисовать.

person Erfan Zarger    schedule 09.08.2012
comment
добро пожаловать, дайте мне знать, если у вас есть дополнительные вопросы по этому поводу. - person Erfan Zarger; 10.08.2012