【问题标题】:Layer.remove(Image); not working in Kinetic.js层.删除(图像);不能在 Kinetic.js 中工作
【发布时间】:2012-08-14 14:42:51
【问题描述】:

我正在使用最新的 kineticjs。(v.3.10) 问题来了

我正在使用单个函数将图像发送到单击时位于画布外部的画布。 我正在制作可拖动的图像和所有.. 我还添加了双击删除图像功能。 当我双击任何图像时.. 最后添加的图像被删除,之后如果我尝试单击其他图像.. 我收到此错误:TypeError: this.children[child.index] is undefined

这是一个小代码:

使用这个函数通过ajax从另一个文件中获取路径

       function loadajax(imgpath,imgid){

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

来源功能:----

       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];
       }
     }

这是我用来删除/拖放/等的函数。

             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();         

        }

现在根据这个函数 我应该能够将图像添加到画布(工作正常) 当我拖动它时应该能够将一个图像移动到另一个图像上(.ie.moveToTop 函数)_不工作 应该能够通过双击删除图像(仅适用于最新添加的图像)

请帮忙

谢谢

【问题讨论】:

    标签: javascript html drag-and-drop html5-canvas kineticjs


    【解决方案1】:
    layery.remove(yodaGroup1);
    

    指的是这个函数:

    • remove() 从舞台上移除图层

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

    没有功能可以只删除层中包含的一个节点:/

    【讨论】:

      【解决方案2】:

      要删除层中包含的节点,只需使用以下命令:

      node.remove();
      

      所以在你的情况下你会这样做:

      yodaGroup1.remove();
      layery.draw();
      

      http://kineticjs.com/docs/Kinetic.Image.html

      【讨论】:

        猜你喜欢
        • 1970-01-01
        • 1970-01-01
        • 2013-05-25
        • 1970-01-01
        • 1970-01-01
        • 1970-01-01
        • 1970-01-01
        • 1970-01-01
        • 2017-05-29
        相关资源
        最近更新 更多