在KineticJS中悬停时更改图像

Question

我希望在KineticJS中悬停时更改图像。现在发生的是图像只是附加到图层，实际上并没有交换图像。在不删除图层的情况下，我想将图像与另一个图像交换。这是我的代码。

       imgObj.onload = function () {
        var image = new Kinetic.Image({
            x: 10,
            y: 10,
            image: imgObj,
            width: 28,
            height: 28,
            id: 'myImage'
        });

        image.on("mouseenter", function (e) {
            document.body.style.cursor = 'pointer';
            imgObj.src = 'myHoverImage.png';
            layer.draw();
        });

        image.on("mouseleave", function () {
            document.body.style.cursor = 'default';
            imgObj.src = 'myImage.png';
        });

Answer 1

在Kinetic.Image上使用.setImage换换到其他图片：

• 使用var hoverImage=new Image() ...和var blurImage=new Image() ...将图像预加载到图像对象中。

• 重要提示：请确保使用图像对象的.onload方法完全加载两个图像。

• 在事件处理程序中，使用image.setImage(hoverImage)或image.setImage(blurImage)交换图像。

• 使用layer.draw()显示交换的图片。