easeljs로 객체 복제하기

Question

easeljs 라이브러리를 사용하여 요소를 재사용하는 데 계속 문제가 있습니다. 클론 () 메소드를 사용하는지 여부에 관계없이 하나의 인스턴스 만 가져올 수 있으며 onPress와 같은 이벤트는 새 요소에서 작동하지 않습니다.

두 개 이상의 컨테이너에 같은 개체를 추가하면 개체가 모든 곳에서 사라집니다. 이 문제를 해결하기 위해 코드를 엉망으로 만들고 리소스를 낭비해야합니다.

도움이나 팁을 미리 보내 주셔서 감사합니다.

Answer 1

당신이 모양의 그래픽를 사용하는 경우, 당신은 매개 변수로 사실를 전달하는 것을 고려할 수 있습니다. CreateJs 문서에서

var boxClone = box.clone(true); 

: http://www.createjs.com/Docs/EaselJS/classes/Shape.html#method_clone

clone (recursive)

이 형상의 복제를 돌려줍니다. 이 인스턴스의 현재 컨텍스트에 특정한 일부 속성은 기본값 (예 : .parent)으로 되돌려집니다.

매개 변수는 : 재귀

true의 경우,이 모양의 그래픽 인스턴스는 복제 될 것입니다. false의 경우, Graphics 인스턴스는 새로운 Shape와 공유됩니다.

Answer 2

어때? 이것이 당신이 무엇인지 모르지만 ... 아마 누군가를 도울 것입니다.

var canvas, stage; 

    function init() { 
     canvas = document.getElementById("testCanvas"); 

     //check to see if we are running in a browser with touch support 
     stage = new createjs.Stage(canvas); 
     createjs.Ticker.setFPS(24); 
     createjs.Ticker.addListener(window); 

     var width = 50; 
     var height = 50; 
     var padding = 5; 
     var box = new createjs.Shape(); 
     box.graphics.beginFill("#FF0099").drawRect(0, 0, width, width).endFill(); 

     var l = 25; 
     var cols = 7; 
     for(var i=0;i<l;i++) { 
      var boxClone = box.clone(); 
      boxClone.x = (width+padding) * (i%cols); 
      boxClone.y = (height+padding) * (i/cols|0); 
      boxClone.index = i; 
      boxClone.onClick = handleClick; 
      stage.addChild(boxClone); 
     } 
    } 

    function handleClick(event) { 
     console.log(event.target); 
    } 

    function tick() { 
     stage.update(); 
    }