如何恢复 Kinetic.js 鼠标事件答案

【问题标题】：How can i restore an Kinetic.js mouseevent如何恢复 Kinetic.js 鼠标事件
【发布时间】：2012-08-27 10:07:25
【问题描述】：

如何恢复 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>

【问题讨论】：

标签： javascript canvas mouseevent restore kineticjs

【解决方案1】：

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

我认为您应该尝试将事件分配给处理程序并将它们传递给 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>

【讨论】：

嘿maiconio，它超级有效！感谢你们对我的帮助。你知道我如何生成一些像 thad 这样的函数吗？我必须向上计数事件 ID（test.event1 到 test.event3 和 tes.event2 到 test.event4），并且我必须向上计数容器 ID 和函数 ID。如果你回答会很好，问候本格林