我正在尝试更改鼠标悬停在图像上的鼠标指针，这是我的脚本:
var sc = new Kinetic.Layer();
var sCircle = new Image();
var sCircleImage;
sCircle.onload = function () {
sCircleImage = new Kinetic.Image({
x: 186.183,
y: 185.89,
width: 142.114,
height: 140.22,
image: sCircle
});
sc.add(sCircleImage);
sc.draw();
};
sCircle.src = '../../Content/images/arrow_circle.png';
sCircleImage.on('mouseover', function () {
document.body.style.cursor = 'pointer';
});
sCircleImage.on('mouseout', function () {
document.body.style.cursor = 'default';
});
我收到以下错误:无法获取未定义或空引用的属性“on”。我将不胜感激您的建议。提前致谢。
最佳答案
在图像 onload 函数中使用 mouseover 和 mouseout 函数。 尝试下面的代码
<!DOCTYPE HTML>
<html>
<head>
<style>
body
{
margin: 0px;
padding: 0px;
}
</style>
</head>
<body>
<div id="container">
</div>
<script src="http://www.html5canvastutorials.com/libraries/kinetic-v4.3.0-beta2.js"></script>
<script>
var stage = new Kinetic.Stage({
container: 'container',
width: 578,
height: 200
});
var sc = new Kinetic.Layer();
var sCircle = new Image();
var sCircleImage;
sCircle.onload = function() {
sCircleImage = new Kinetic.Image({
x: 186.183,
y: 185.89,
width: 142.114,
height: 140.22,
image: sCircle
});
sc.add(sCircleImage);
sc.draw();
stage.add(sc);
sCircleImage.on('mouseover', function() {
document.body.style.cursor = 'pointer';
});
sCircleImage.on('mouseout', function() {
document.body.style.cursor = 'default';
});
};
sCircle.src = '../../Content/images/arrow_circle.png';
</script>
</body>
</html>
关于image - KineticJS 鼠标悬停在图像上，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/15565031/