Question

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

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

Answer 1

在图像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>

KineticJS鼠标悬停在图像上

1 个答案: