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 に答える