-1

因此，我将尽我所能解释这一点：我有一个画布，上面有一堆要触摸的对象，它们具有突出显示的状态（如您在此处看到的那样交换背景图像）。我在这里只展示对象“应用程序”和“企业”的 2 个示例，但这些对象有很多。我的目标是让一个对象有它的悬停图像，而其余的则没有。单击另一个对象后，我希望激活该对象的悬停图像，并删除所有其他对象的悬停图像（基本上摆脱了“触摸鼠标移出”功能。

我想说的是：'如果 touchstart/mouseover 这个对象，使用它的悬停图像，并禁用所有其他对象上的所有悬停图像。

applications.on('touchstart mouseover', function() {
                        writeMessage(messageLayer, 'touchstart applications circle');
                        this.setFill({ image: images.applicationshover});
                        layer.draw();
                    });
applications.on('touchend mouseout', function() {
                        writeMessage(messageLayer, 'Mouseup applications circle');
                        this.setFill({ image: images.applicationsimage});
                        layer.draw();
                    });

enterprises.on('touchstart mouseover', function() {
                        writeMessage(messageLayer, 'touchstart enterprises circle');
                        this.setFill({ image: images.enterpriseshover});
                        layer.draw();
                    });
enterprises.on('touchend mouseout', function() {
                        writeMessage(messageLayer, 'Mouseup enterprises circle');
                        this.setFill({ image: images.enterprisesimage});
                        layer.draw();
                    });
4

1 回答 1

1

我讨厌在没有调整示例的情况下回答我知之甚少的问题，但是这里......

而不是你所做的，为什么不试试这个......
当你创建你的形状/图像时，为它们添加一个属性，即用于悬停而不是悬停状态的图像。
有点像这样...... 

 var thing = new Kinetic.Image({
            x: 0,
            y: 0,
            image: imageObj,
            hoverImage: hoverImageObj,
            notHoverImage: imageObj,
            name: 'image'
        });

然后，您可以为所有图像设置一个例程... 

var hover = function() {
        writeMessage(messageLayer, 'touchstart enterprises circle');
        this.setFill({
            image: this.attrs.hoverImage
        });
        layer.draw();
    }

var notHover = function() {
        writeMessage(messageLayer, 'Mouseup enterprises circle');
        this.setFill({
            image: this.attrs.notHoverImage
        });
        layer.draw();
    }

icons.on('touchstart mouseover', hover);
icons.on('touchend mouseout', notHover);

可能有更好的方法来做到这一点，我真的必须去阅读文档；）

于 2012-12-16T17:21:02.350 回答