如何将一个可数变量添加到kinetic.js中的函数和eventnames中？

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

这里是我的代码：

<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>

来源

2012-08-29 Ben Green

不好意思问，但是你真的需要计数事件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-29 18:51:08 maiconio

像你可能已经看到我不擅长JavaScript，这是我正在寻找的！非常感谢你！欢迎Ben Green –

你可以做一团，并通过使用一个for循环的社交圈吧（如果我理解正确的话您的问题）

检查了这一点：http://jsfiddle.net/9vsps/2/

来源

2012-08-29 10:02:46 Stripps

schould是indipendent。埃夫里圈可以获得独立于他人的位置。正因为如此，我做了比一个更多的阶段，依此类推。如果它非常容易，那就太棒了，但它不是 –

您应该可以使组不可拖动，然后通过组[0] group [1]等设置它们来创建个别的圆形属性。 – Stripps

我已经有一个解决方案 –

如何将一个可数变量添加到kinetic.js中的函数和eventnames中？

回答

相关问题