Kinetic.js单击画布外的按钮从画布中删除图像 [英] Kinetic.js removing image from canvas on click of a button outside the canvas

问题描述

需要一些帮助..
我不知道它是否是kinetic.js库问题或者我在这里做错了什么..
我在windows.onload $ b上加载了2个图像$ b然后在画布外面有一组图像和onclick图像我将它们放在画布内工作正常..（我只使用一个函数从画布外部加载任何图像这样做..
图像集：

Need some help.. I don't know if it's the kinetic.js library problem or I'm doing something wrong here.. I am loading 2 images on windows.onload and then there are set of images outside the canvas and onclick of the images I'm placing those inside the canvas which is working fine..(I have used just a single function to load any image from outside the canvas by doing this.. Set of images :

     <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>

loading images

loading images

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

功能（定义头寸和全部）

function(defining position and all)

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

            }

这样工作正常..（在点击时加载图片在他们身上）

THis is working fine..(loading the images on clicking over them)

但当我尝试通过关闭按钮删除图像时..
我遇到麻烦，因为最新的图像被删除并且在该库之后抛出一个错误..
我正在做这样的事情..

But when I try to remove the images by a button close.. I m having trouble as the latest image gets removed and after that library throws me an error.. I'm doing something like this..

          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。删除（yoda1）功能不起作用。

here first of all.. layert.remov(yoda1) function is not working.

并且此功能以意想不到的方式运行..

and this function is behaving in an unexpected way..

任何指针

谢谢..

推荐答案

如果是你的原因正在删除图像隐藏它，你可以简单地使用.hide（）函数：

If the reason that you are removing the image is hiding it, you can simply use .hide() function:

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

您的代码的另一个问题是您使用 layert.draw（）; 删除它后 stage.remove（layert）; ，所以当你删除这个图层时，你无法绘制它。

Another issue with your code is you used layert.draw(); after you removed it stage.remove(layert);, so when you have removed this layer you can't draw it.

这篇关于Kinetic.js单击画布外的按钮从画布中删除图像的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！