1

如何恢复 Kinetic.js 事件？我编写了一个 Kinetic.js “形状按钮”，它监听 mouseover 和 mouseout 事件。当我点击它时，它会改变颜色并且不再听鼠标悬停/退出。当我第二次单击它时，我希望它再次听到 mouseover 和 mouseout。我试图删除一个单击事件并在两个事件中恢复另一个事件，但是我无法恢复一个事件，因为 circle.on("eventname") 我必须定义一个函数， circle.on("eventname", function(){//do stuff here}); 但它会以定义函数的连续循环结束

谢谢你的回答！

这是我的代码：

<head>
        <script src="http://www.html5canvastutorials.com/libraries/kinetic-v4.0.0.js">    </script>
        <script>

            var layer = new Kinetic.Layer();
            var sfcolor = '#00ff00'         
            var nfcolor = '#0000ff'         
            var cfcolor = '#ff0000'         
            var smcolor = '#009a00'         
            var nmcolor = '#00009a'         
            var cmcolor = '#9a0000'         
            var slcolor = '#007000'         
            var nlcolor = '#000070'         
            var clcolor = '#700000'         
            function drawCircle(sx, sy, sradius, sstrokeWidth) {
                var stage = new Kinetic.Stage({ container: "container", width: 578, height: 200 });
                var circleLayer = new Kinetic.Layer();
                //circle
                var scircle = new Kinetic.Circle({
                    x: sx,
                    y: sy,
                    radius: sradius,
                    fill:  {
                    start: {
                        x: 0,
                        y: 0,
                        radius: 0
                    },
                    end: {
                        x: 0,
                        y: 0,
                    radius: sradius
                    },
                colorStops: [0, sfcolor, 0.5, smcolor, 1, slcolor]
      },
                    stroke: slcolor,
                    strokeWidth: sstrokeWidth
                });
                scircle.on("mouseover.event1", function() {
                    this.setFill({
                        start: {
                            x: 0,
                            y: 0,
                            radius: 0
                        },
                        end: {
                            x: 0,
                            y: 0,
                            radius: sradius
                        },
                        colorStops: [0, nfcolor, 0.5, nmcolor, 1, nlcolor]
                });
                    this.setStroke(nlcolor);
                    scircle.off("click.event2");
                    circleLayer.draw();
                });
                scircle.on("mouseout.event1", function() {
                    this.setFill({
                        start: {
                            x: 0,
                            y: 0,
                            radius: 0
                        },
                        end: {
                            x: 0,
                            y: 0,
                            radius: sradius
                        },
                        colorStops: [0, sfcolor, 0.5, smcolor, 1, slcolor]
                    });
                    this.setStroke(slcolor);
                    scircle.off("click.event2");
                    circleLayer.draw();
                });
                scircle.on("click.event1", function() {
                    this.setFill({
                        start: {
                            x: 0,
                            y: 0,
                            radius: 0
                        },
                        end: {
                            x: 0,
                            y: 0,
                            radius: sradius
                        },
                        colorStops: [0, cfcolor, 0.5, cmcolor, 1, clcolor]
                    });
                    this.setStroke(clcolor);
                    scircle.off("mouseout.event1");
                    scircle.off("mouseover.event1");
                    scircle.off("click.event1");
                    scircle.on("click.event2", function() {
                        this.setFill({
                            start: {
                                x: 0,
                                y: 0,
                                radius: 0
                            },
                            end: {
                                x: 0,
                                y: 0,
                                radius: sradius
                            },
                            colorStops: [0, nfcolor, 0.5, nmcolor, 1, nlcolor]
                        });
                        this.setStroke(clcolor);
                        scircle.on("mouseout.event1");
                        scircle.on("mouseover.event1");
                        scircle.on("click.event1");
                        scircle.off("click.event2");
                        circleLayer.draw();
                    });

                    circleLayer.draw();
                });


                circleLayer.add(scircle);
                stage.add(circleLayer);
            }
            window.onload = function() {
                drawCircle(200, 100, 50, 3);
            };
        </script>


    </head>
    <body>
        <div id="container">
        </div>
    </body>
4

1 回答 1

2

“开”功能需要两个参数。第一个是事件名称。第二个是处理程序。您需要传递处理程序才能正确恢复事件。

我认为您应该尝试将事件分配给处理程序并将它们传递给 scircle.on

看看下面的代码是否有效

干杯!

<head>
        <script src="http://www.html5canvastutorials.com/libraries/kinetic-v4.0.0.js">    </script>
        <script>

            var layer = new Kinetic.Layer();
            var sfcolor = '#00ff00'         
            var nfcolor = '#0000ff'         
            var cfcolor = '#ff0000'         
            var smcolor = '#009a00'         
            var nmcolor = '#00009a'         
            var cmcolor = '#9a0000'         
            var slcolor = '#007000'         
            var nlcolor = '#000070'         
            var clcolor = '#700000'         
            function drawCircle(sx, sy, sradius, sstrokeWidth) {
                var stage = new Kinetic.Stage({ container: "container", width: 578, height: 200 });
                var circleLayer = new Kinetic.Layer();
                //circle
                var scircle = new Kinetic.Circle({
                    x: sx,
                    y: sy,
                    radius: sradius,
                    fill:  {
                    start: {
                        x: 0,
                        y: 0,
                        radius: 0
                    },
                    end: {
                        x: 0,
                        y: 0,
                        radius: sradius
                    },
                    colorStops: [0, sfcolor, 0.5, smcolor, 1, slcolor]
                    },
                    stroke: slcolor,
                    strokeWidth: sstrokeWidth
                });

                mouseover_event1 = function() {
                    this.setFill({
                        start: {
                            x: 0,
                            y: 0,
                            radius: 0
                        },
                        end: {
                            x: 0,
                            y: 0,
                            radius: sradius
                        },
                        colorStops: [0, nfcolor, 0.5, nmcolor, 1, nlcolor]
                    });
                    this.setStroke(nlcolor);
                    scircle.off("click.event2");
                    circleLayer.draw();
                };
                scircle.on("mouseover.event1", mouseover_event1);

                mouseout_event1 = function() {
                    this.setFill({
                        start: {
                            x: 0,
                            y: 0,
                            radius: 0
                        },
                        end: {
                            x: 0,
                            y: 0,
                            radius: sradius
                        },
                        colorStops: [0, sfcolor, 0.5, smcolor, 1, slcolor]
                    });
                    this.setStroke(slcolor);
                    scircle.off("click.event2");
                    circleLayer.draw();
                }
                scircle.on("mouseout.event1", mouseout_event1);

                click_event1 = function() {
                    this.setFill({
                        start: {
                            x: 0,
                            y: 0,
                            radius: 0
                        },
                        end: {
                            x: 0,
                            y: 0,
                            radius: sradius
                        },
                        colorStops: [0, cfcolor, 0.5, cmcolor, 1, clcolor]
                    });
                    this.setStroke(clcolor);
                    scircle.off("mouseout.event1");
                    scircle.off("mouseover.event1");
                    scircle.off("click.event1");
                    scircle.on("click.event2", click_event2);

                    circleLayer.draw();
                };

                click_event2 = function() {
                    this.setFill({
                        start: {
                            x: 0,
                            y: 0,
                            radius: 0
                        },
                        end: {
                            x: 0,
                            y: 0,
                            radius: sradius
                        },
                        colorStops: [0, nfcolor, 0.5, nmcolor, 1, nlcolor]
                    });
                    this.setStroke(clcolor);
                    scircle.on("mouseout.event1", mouseout_event1);
                    scircle.on("mouseover.event1", mouseover_event1);
                    scircle.on("click.event1", click_event1);
                    scircle.off("click.event2");
                    circleLayer.draw();
                };

                scircle.on("click.event1", click_event1);


                circleLayer.add(scircle);
                stage.add(circleLayer);
            }
            window.onload = function() {
                drawCircle(200, 100, 50, 3);
            };
        </script>


    </head>
    <body>
        <div id="container">
        </div>
    </body>
于 2012-08-27T17:41:44.787 回答