Question

此代码使用Kineticjs。我正在为其中一个图像使用mouseover和mouseout事件。该图层有2个图像。我想隐藏其中一个。我是否需要为每个图像创建单独的图层？

img.onload = function(){
                    var image = new Kinetic.Image({
                        image: img,
                        name:'iconImage',
                        width: 50,
                        height: 50,
                        //draggable: true,
                        //visible:true,
                        listening:true
                    });
                    var image2 = new Kinetic.Image({
                        x:100,
                        y:100,
                        image: img,
                        name:'iconImage',
                        width: 50,
                        height: 50,
                        //draggable: true,
                        //visible:true,
                        listening:true
                    });
                iconLayer.add(image).add(image2);
                stage.add(iconLayer);
                //stage.draw();


                image.on('mouseover',function(){
                    image.hide();

                    iconLayer.clear();
                    //iconLayer.draw();

                });

                image.on('mouseout',function(){
                    //iconLayer.clear();
                    //image.show();
                    //iconLayer.draw();

                    image.show();
                    iconLayer.draw();

                    //stage.draw();
                });

                }

这是使用hide（）和show（）函数的最佳方法吗？

Answer 1

您不需要单独的图层。

只需使用myShape.hide（）和myShape.show（）

即可

Answer 2

正如markE所说，您可以使用hide()和show()但不要忘记在使用stage.draw()隐藏/显示您的形状后重新绘制图层。

Answer 3

@tussh我同意你对hidden = mouseout的观察，因为事件处理程序将不再处理隐藏对象的事件。可以用的是这个，在图像顶部添加透明矩形，或者交替使用透明图像（alpha），然后在其上设置事件处理程序。物体永远存在，眼睛看不见但仍能检测到你所有的事件。

Answer 4

请阅读以上答案以了解我的答案。

在我的代码中，我在image1上添加了'mouseover'事件并隐藏了image1 然后我在image1上添加'mouseout'并显示image1。当我进行隐藏绘制和展示时，图像会闪烁并且不会完全消失。 我猜测Kinetic需要隐藏= mouseout，因为图像不再存在。

然而，image1上的'mouseover'事件然后隐藏image2与hide-draw和show-draw方法一起正常工作。这种情况对我有用。谢谢你的帮助人员

隐藏图层中的单个元素 - Kineticjs

4 个答案: