2

画像の上にマウスを置いてマウスポインターを変更しようとしています。これが私のスクリプトです:

                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';
                });

次のエラーが表示されます: 未定義または null 参照のプロパティ 'on' を取得できません。ご提案いただければ幸いです。前もって感謝します。

4

1 に答える 1

3

image 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>
于 2013-03-22T10:02:29.707 に答える