KineticJS - 동적 객체를 추가 할 수 없습니다.

KineticJS를 사용하여 동적 동작을 관리하려면 컨테이너 종류를 만들어야합니다.KineticJS - 동적 객체를 추가 할 수 없습니다.

나는 간단한 객체를 사용하여 함수를 사용하여 원을 추가 할 수 있습니다.

여기 내 코드입니다 : 나는 함수 내부의 코드를 삽입하지 않는 경우,

function Stage() { 
    var self = this; 

    self.stage = new Kinetic.Stage({ 
     container: "museumMapContainer", 
     width: 500, 
     height: 500 
    }); 

    self.layer = new Kinetic.Layer(); 

    self.addCircle = function (x,y) { 
     var circle = new Kinetic.Circle({ 
      x: x, 
      y: y, 
      radius: 40, 
      fill: 'red', 
      stroke: 'black', 
      strokeWidth: 4, 
      draggable: true 
     }); 

     circle.on('mouseover', function() { 
      document.body.style.cursor = 'pointer'; 
     }); 
     circle.on('mouseout', function() { 
      document.body.style.cursor = 'default'; 
     }); 
     self.layer.add(circle); 
    } 

    self.stage.add(self.layer); 

} 

stage = new Stage(); 

stage.addCircle(250,250);

일반적으로, 난 쉽게 아무 문제없이 원을 만들 수 있습니다. 그러나이 코드는 작동하지 않으며 실제로 이유를 모르겠습니다. 여기

은 Plunker입니다 : http://plnkr.co/edit/E1fbCFMeZwGNAKhsArhm?p=preview

이 콘솔에 오류가 없습니다 아무것도 표시되지 않는 이유는 나도 몰라 ...

출처

2014-03-24 CoachNono

당신의 새로운 원을 만든 후 확인 layer.draw 않습니다 확인 :

<!DOCTYPE html> 
<html> 
    <head> 
<script src="http://d3lp1msu2r81bx.cloudfront.net/kjs/js/lib/kinetic-v5.0.1.min.js"></script> 
    </head> 
    <body> 
    <h1>Hello Plunker!</h1> 
    <div id="museumMapContainer" style="width:500px;height:500px;border:1px solid black;"></div> 

     <script defer="defer"> 

     function Stage() { 

      var self = this; 

      self.stage = new Kinetic.Stage({ 
       container: "museumMapContainer", 
       width: 500, 
       height: 500 
      }); 

      self.layer = new Kinetic.Layer(); 
      self.stage.add(self.layer); 

      self.addCircle = function (x,y) { 
       var circle = new Kinetic.Circle({ 
        x: x, 
        y: y, 
        radius: 40, 
        fill: 'red', 
        stroke: 'black', 
        strokeWidth: 4, 
        draggable: true 
       }); 

       circle.on('mouseover', function() { 
        document.body.style.cursor = 'pointer'; 
       }); 
       circle.on('mouseout', function() { 
        document.body.style.cursor = 'default'; 
       }); 
       self.layer.add(circle); 
       self.layer.draw(); 
      } 
     } 

     stage = new Stage(); 

     stage.addCircle(250,250); 

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

출처

2014-03-24 17:29:53 markE

제발 도와주세요. http://stackoverflow.com/q/26861963/2858044 – itx

KineticJS - 동적 객체를 추가 할 수 없습니다.

답변

관련 문제