KineticJS : 유형별로 요소 선택

KineticJS 및 HTML5를 사용하여 반복적으로 원을 그립니다. 모든 서클에서 mousemove를 감지하고 선택한 서클의 ID를 얻고 싶습니다. 이름이나 ID로 요소를 선택할 수 있지만 유형 (원)별로 요소를 선택하려면 어떻게해야합니까? 아래 코드를 사용하면 마지막 서클에 응답 (마지막으로 선언 된 "서클"이기 때문에)하지만 모든 서클에 응답하도록 변경하는 방법을 모르겠습니다.KineticJS : 유형별로 요소 선택

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
    <script src="jquery.js" type="text/javascript"></script> 
    <link rel="stylesheet" href="style.css" type="text/css"> 
</head> 

    <div id="container"></div> 
     <script src="http://www.html5canvastutorials.com/libraries/kinetic-v4.3.0-beta2.js"></script> 
     <script> 
      var startX = 200; 
      var startY = 100; 
      var radius = 10; 

      var stage = new Kinetic.Stage({ 
       container: 'container', 
       width:400, 
       height:500 
      }); 

      for(i=0; i<10; i++){ 
       window['circle'+i]; 
      } 

      var layer = new Kinetic.Layer(); 

      for (i=0; i<10;i++){ 
       var circle = new Kinetic.Circle({ 
        x: startX, 
        y: startY, 
        radius: radius, 
        fill: '#CCCCCC', 
        stroke: '#999', 
        strokeWidth: 4, 
        name: 'step'+i 
       }); 

       layer.add(circle); 

       var stepName = new Kinetic.Text({ 
        x: startX + radius*2.5, 
        y: startY-7.5, 
        text: "circle"+i, 
        fontSize: 15, 
        fontFamily: 'Calibri', 
        fill: 'black' 
       }); 

       layer.add(stepName); 
       stage.add(layer); 

       startY = startY + radius*3.5; 
      } 

      circle.on('mousemove', function(){ 
       var shapeName = this.getName(); 
       console.log(shapeName); 
      }) 

     </script> 
</body> 
</html>

출처

2013-02-14 scientiffic

나는 '원'으로 모든 원 요소의 이름을 설정하여이 문제를 해결하고

var shapes = stage.get('.circle') 
for(i=0;i<shapes.length;i++){ 
console.log(shapes[i].getId()); 
}

했다

출처

2013-02-14 17:06:36 scientiffic

KineticJS : 유형별로 요소 선택

답변

관련 문제