Question

I am using the latest kineticjs.(v.3.10)
Here is the problem

I am using a single function to send images to the canvas which are outside the canvas on click.
I am making the images draggable and all..
I have also added a remove image function on double click.
when I double click on any image..
the last added image gets removed and after that if I try to click on some other image..
I get this error: TypeError: this.children[child.index] is undefined

Here is a little code.:

Using this function to fetch the path from another file using ajax

       function loadajax(imgpath,imgid){

            sources = {
            yoda1 : imgpath,
        };
        loadImages(sources,initStage1);
      };

Sources function:—-

       function loadImages(sources, callback){
        var images = {};
        var loadedImages = 0;
        var numImages = 0;
        for (var src in sources) {
          numImages++;
         }
        for (var src in sources) {
          images[src] = new Image();
          images[src].onload = function(){
          if (++loadedImages >= numImages) {
              callback(images);
           }
         };
     images[src].src = sources[src];
       }
     }

Here is the function that I’m using to remove/drag and drop/etc..

             function initStage1(images){ 
            yodaGroup1 = new Kinetic.Group({
            x: 100,
            y: 110,
           draggable: true,
            });
            layery = new Kinetic.Layer();
            layery.add(yodaGroup1);
            stage.add(layery);
            var yoda1 = new Kinetic.Image({
            image: images.yoda1,
            x: 0,
            y: 0,
            width: 100,
            height: 120,
            name:"image",
            detectionType:"Pixel"
            });



    yodaGroup1.add(yoda1);
    yodaGroup1.on("dragstart", function() {

          yodaGroup1.moveToTop();
          layery.draw();
        });
    yodaGroup1.on("dblclick dbltap", function() {
          layery.remove(yodaGroup1);
          layery.draw();
        });          
    yodaGroup1.on("dragend", function() {
            layery.draw();
            yoda1.saveImageData();
                    });
    addAnchor(yodaGroup1,0, 0, "topLeft");
    addAnchor(yodaGroup1, 100, 0, "topRight");
    addAnchor(yodaGroup1, 100, 120, "bottomRight");
    addAnchor(yodaGroup1, 0, 120, "bottomLeft");




    stage.draw();   
    yoda1.saveImageData();         

        }

NOW according to this function
I should be able to add the images to the canvas(which is working fine)
Should be able to move one image over another when I drag it (.ie.moveToTop function)_Not working
Should be able to remove the images on double click(working only for the latest added image)

Please help

Thanks

Answer 1

layery.remove(yodaGroup1);

refers to this function :

• remove() remove layer from stage

http://www.kineticjs.com/docs/symbols/Kinetic.Layer.php#remove

There is no function to remove only one node contained in the layer :/