Question

所以，我会尽力解释这个问题：我有一个画布，其中有一堆要触摸的对象具有突出显示的状态（交换背景图像，如此处所示）。我只在这里展示对象'应用程序'和'企业'的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();
                    });

Answer 1

我讨厌回答一些我不知道的事情，但没有一个例子来调整问题，但是这里...... [/ p>

为什么不尝试这个呢？在创建形状/图像时，为它们添加一个属性，该属性是用于悬停而不是悬停状态的图像有点像....

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

有更好的方法可以做到这一点，我真的要去阅读文档;）

Kinetic JS，触摸/悬停这个，影响所有其他对象

1 个答案: