0

如何在 kinetic.js 中将可数变量添加到函数和事件名称中？我有 2 个圆圈，想要更多，圆圈有鼠标悬停事件和功能等等。我不想复制粘贴圆圈功能，我想将它放在“for”循环中。但我不知道如何在函数名称和事件名称中添加变量。谢谢你的回答！

这是我的代码：

<head>
        <script src="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'
            var sradius = 50
            var strokeWidth = 1
            function drawCircle1/*here an countable variable*/(sx, sy, sradius, sstrokeWidth, containerID) {
                var stage = new Kinetic.Stage({ container: containerID, width: 2*(sradius+strokeWidth+1), height: 2*(sradius+strokeWidth+1) });
                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/*here an countable var*/ = 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/*here an countable var*/");
                    circleLayer.draw();
                };
                scircle.on("mouseover.event1/*here an countable var*/", mouseover_event1/*here an countable var*/);

                mouseout_event1/*here an countable var*/ = 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/*here an countable var*/");
                    circleLayer.draw();
                }
                scircle.on("mouseout.event1/*here an countable var*/", mouseout_event1/*here an countable var*/);

                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/*here an countable var*/");
                    scircle.off("mouseover.event1/*here an countable var*/");
                    scircle.off("click.event1/*here an countable var*/");
                    scircle.on("click.event2/*here an countable var*/", click_event2/*here an countable var*/);

                    circleLayer.draw();
                };

                click_event2/*here an countable var*/ = 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.on("mouseout.event1/*here an countable var*/", mouseout_event1/*here an countable var*/);
                    scircle.on("mouseover.event1/*here an countable var*/", mouseover_event1/*here an countable var*/);
                    scircle.on("click.event1/*here an countable var*/", click_event1/*here an countable var*/);
                    scircle.off("click.event2/*here an countable var*/");
                    circleLayer.draw();
                };

                scircle.on("click.event1"/*here an countable var*/, click_event1/*here an countable var*/);


                circleLayer.add(scircle);
                stage.add(circleLayer);
        }
function drawCircle2/*here an countable var*/(sx, sy, sradius, sstrokeWidth, containerID)/*it is the same function with the variables count up manual*/ {
            var stage = new Kinetic.Stage({ container: containerID, width: 2*(sradius+strokeWidth+1), height: 2*(sradius+strokeWidth+1) });
            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_event3/*here an countable var*/ = 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.event4/*here an countable var*/");
                circleLayer.draw();
            };
            scircle.on("mouseover.event3/*here an countable var*/", mouseover_event3/*here an countable var*/);

            mouseout_event3/*here an countable var*/ = 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.event4/*here an countable var*/");
                circleLayer.draw();
            }
            scircle.on("mouseout.event3/*here an countable var*/", mouseout_event3/*here an countable var*/);

            click_event3/*here an countable var*/ = 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.event3/*here an countable var*/");
                scircle.off("mouseover.event3/*here an countable var*/");
                scircle.off("click.event3/*here an countable var*/");
                scircle.on("click.event4/*here an countable var*/", click_event4/*here an countable var*/);

                circleLayer.draw();
            };

            click_event4/*here an countable var*/ = 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.on("mouseout.event3/*here an countable var*/", mouseout_event3/*here an countable var*/);
                scircle.on("mouseover.event3/*here an countable var*/", mouseover_event3/*here an countable var*/);
                scircle.on("click.event3/*here an countable var*/", click_event3/*here an countable var*/);
                scircle.off("click.event4/*here an countable var*/");
                circleLayer.draw();
            };

            scircle.on("click.event3/*here an countable var*/", click_event3/*here an countable var*/);


            circleLayer.add(scircle);
            stage.add(circleLayer);
        }
        window.onload = function() {
            drawCircle1/*here an countable var*/(sradius, sradius, sradius, strokeWidth, "1"/*here an countable var*/);
            drawCircle2/*here an countable var*/(sradius, sradius, sradius, strokeWidth, "2"/*here an countable var*/);
        };

    </script>


</head>
<body>
    <table border="2">
        <tr>
            <td> <div id="1"></div> </td>
        </tr>
        <tr>
            <td> <div id="2"></div> </td>
        </tr>
    </table>
</body>
4

2 回答 2

1

很抱歉问，但你真的需要计算事件 ID 吗？似乎你想要有几个圈子，每个圈子都有自己的孤立事件，是吗？

看看下面的代码是不是你要找的

<head>
        <script src="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'
            var sradius = 50
            var strokeWidth = 1

            function drawCircle(sx, sy, sradius, sstrokeWidth, containerID) {
                this.stage = new Kinetic.Stage({ container: containerID, width: 2*(sradius+strokeWidth+1), height: 2*(sradius+strokeWidth+1) });
                this.circleLayer = new Kinetic.Layer();

                //circle
                this.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
                });

                this.mouseover_eventA = 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);
                    this.off("click.eventB");
                    this.parent.draw();
                };
                this.scircle.on("mouseover.eventA", mouseover_eventA);


                this.mouseout_eventA = 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);
                    this.off("click.eventB");
                    this.parent.draw();
                }
                this.scircle.on("mouseout.eventA", mouseout_eventA);

                this.click_eventA = 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);
                    this.off("mouseout.eventA");
                    this.off("mouseover.eventA");
                    this.off("click.eventA");
                    this.on("click.eventB", click_eventB);
                    this.parent.draw();
                };

                this.click_eventB = 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);
                    this.on("mouseout.eventA", mouseout_eventA);
                    this.on("mouseover.eventA", mouseover_eventA);
                    this.on("click.eventA", click_eventA);    
                    this.off("click.eventB");
                    this.parent.draw();
                };

                this.scircle.on("click.eventA", click_eventA);

                this.circleLayer.add(this.scircle);
                this.stage.add(this.circleLayer);
            }
            window.onload = function() {
                for (i=1; i<=6; i++){                   
                    drawCircle(sradius, sradius, sradius, strokeWidth, i.toString());
                }
            };
    </script>
</head>
<body>
    <table border="2">
        <tr>
            <td> <div id="1"></div> </td>
        </tr>
        <tr>
            <td> <div id="2"></div> </td>
        </tr>
        <tr>
            <td> <div id="3"></div> </td>
        </tr>
        <tr>
            <td> <div id="4"></div> </td>
        </tr>
        <tr>
            <td> <div id="5"></div> </td>
        </tr>
        <tr>
            <td> <div id="6"></div> </td>
        </tr>
    </table>
</body>
于 2012-08-29T18:51:08.200 回答
0

您可以使用for循环创建一个组并为其添加圆圈（如果我正确理解您的问题）

看看这个：http: //jsfiddle.net/9vsps/2/

于 2012-08-29T10:02:46.243 回答