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

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

@tussh 我同意您对 hide = mouseout 的观察，因为事件处理程序将不再处理隐藏对象的事件。可以为此工作的是，在图像顶部添加一个透明矩形或透明图像（alpha）并在其上设置事件处理程序。该对象将始终存在，肉眼看不见，但仍会检测到您的所有事件。

Answer 3

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

Answer 4

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

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

然而，image1 上的 'mouseover' 事件然后隐藏 image2 与 hide-draw 和 show-draw 方法一起工作得很好。这种情况对我有用。谢谢大家的帮助