KineticJS 鼠标悬停在图像上答案

【问题标题】：KineticJS mouseover an imageKineticJS 鼠标悬停在图像上
【发布时间】：2013-03-11 23:54:26
【问题描述】：

我正在尝试更改鼠标悬停在图像上的鼠标指针，这是我的脚本：

                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”。我会很感激你的建议。提前致谢。

【问题讨论】：

标签： image mouseover kineticjs

【解决方案1】：

在图像加载功能中使用 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>

【讨论】：