kinetic.js에서 countable 변수를 함수 및 이벤트 이름에 추가하는 방법은 무엇입니까?

kinetic.js에서 셀 수있는 변수를 함수 및 이벤트 이름에 추가하려면 어떻게합니까? 2 개의 서클이 있고 더 갖고 싶다면 서클에는 마우스 오버 이벤트와 함수가 있습니다. 붙여 넣기 기능을 복사하지 않으려면 "for"루프에 넣고 싶습니다. 하지만 함수 이름과 이벤트 이름에 변수를 추가하는 방법을 모르겠습니다. 답변 해 주셔서 감사합니다. 당신은 그룹을 만들고 (내가 정확하게 문제를 이해하는 경우)에 대한 - 루프 A 사용하여에 동그라미를 추가 할 수kinetic.js에서 countable 변수를 함수 및 이벤트 이름에 추가하는 방법은 무엇입니까?

<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를 계산해야합니까? 각각의 고립 된 이벤트가있는 여러 개의 서클을 원한다고 생각하십니까? 다음 코드는 모든 원 indipendent 수

<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

당신은 내가 자바 스크립트에별로 좋지 않다는 것을 알았을지도 모른다. 이것은 내가 찾고있는 axactly이다! 고마워요! Greets Ben Green –

에 체크 아웃 : : http://jsfiddle.net/9vsps/2/

여기

내 코드입니다

출처

2012-08-29 10:02:46 Stripps

에 대한 schould 무엇을 찾고있는 경우

을 참조하십시오. 그리고 evry circle은 다른 사람들과 독립적 인 입장을 취할 수 있어야한다. 이 때문에 나는 하나 이상의 단계를 더 만든다. 너무 쉽다면 환상적 일 것입니다.하지만 그렇지 않습니다. –

그룹을 드래그 할 수 없게 만들고 그룹 [0] 그룹 [1]을 (를) 통해 개별 서클 속성을 설정해야합니다. – Stripps

나는 이미 해결책이있다 –

kinetic.js에서 countable 변수를 함수 및 이벤트 이름에 추가하는 방법은 무엇입니까?

답변

관련 문제