动态.js单击画布外的按钮时从画布中删除图像

Kinetic.js removing image from canvas on click of a button outside the canvas

本文关键字:布中 删除 图像 js 单击 布外 动态 按钮      更新时间:2023-09-26

需要一些帮助。我不知道是动力学.js库问题还是我在这里做错了什么。我正在Windows.onload上加载2张图像然后在画布外有一组图像,然后单击我将它们放置在画布内的图像,工作正常..(我只使用了一个函数来加载画布外部的任何图像。图片集 :

     <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) 函数不起作用。

并且此函数以意想不到的方式运行。

任何指针

谢谢。。

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

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

代码的另一个问题是您在stage.remove(layert);删除代码后使用了layert.draw();,因此当您删除此层时,您无法绘制它。