Kinetic.js从画布上的一个按钮,点击画布外的去除用图像(Kinetic.js removin

2019-10-30 15:52发布

需要一些帮助。我不知道这是否是在kinetic.js库问题,或者我在这里做得不对..我在windows.onload装载2个图像,然后有画布和外面的onclick一组图像我把那些做工精细画布中的图像。(我已经这样做..设置图像的使用只是一个单一的功能,从画布外加载任何图像:

     <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)功能不能正常工作。

而这个功能是在一个意想不到的行为方式..

任何指针

谢谢..

Answer 1:

如果要删除的图像的原因是隐藏它,你可以简单地使用.hide()函数:

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

与您的代码的另一个问题是,你使用layert.draw(); 卸下后stage.remove(layert); ,所以当你已经删除了这一层,你不能得出它。



文章来源: Kinetic.js removing image from canvas on click of a button outside the canvas