我希望在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';
});
答案 0 :(得分:0)
在Kinetic.Image上使用.setImage
换换到其他图片:
使用var hoverImage=new Image() ...
和var blurImage=new Image() ...
将图像预加载到图像对象中。
重要提示:请确保使用图像对象的.onload
方法完全加载两个图像。
在事件处理程序中,使用image.setImage(hoverImage)
或image.setImage(blurImage)
交换图像。
使用layer.draw()
显示交换的图片。