EaselJS : 속성 변경시 모양 색상 변경

Question

저는 EaselJS를 사용하여 JS에서 간단한 게임을 작성하고 있습니다. 모든 객체 지향을 유지하여 게임의 상태, EaselJS 객체의 상태 및 내 캔버스에 표시되는 내용을 동기화 상태로 유지하려고합니다. 캔버스에 표시되는 모양의 획 색상을 속성을 변경하여 변경할 수 있습니다. 나는 append()here이라는 문서에서 찾았지만 제대로 작동하지 않습니다.

모양의 정의 : : 여기

가 지금까지 달성 한 무엇

var bLetter = new createjs.Shape(); 
bLetter.graphics.append({exec: setPoweredState}); 
bLetter.graphics.moveTo(0, 0) 
       .lineTo(0, segSize * 2) 
       .arc(circSize, segSize * 2, circSize, Math.PI, Math.PI + 0.0001, true); 

setPoweredState 기능을 - 내가 bLetter.powered = true 설정하면, 선 색상은 변경해야합니다 :

setPoweredState = function(ctx, shape) { 
    if(shape.powered) { 
     shape.color = consts.COLOR_LINE_ACTIVE; 
    } else { 
     shape.color = consts.COLOR_LINE_INACTIVE; 
    } 
    shape.graphics.beginStroke(shape.color).setStrokeStyle(consts.STROKE_SIZE, 'round', 'round'); 

} 

을 때 나는 bLetter.powered = true을 설정하고 bLetter.color을 확인하면 해당 기능이 실행 된 것처럼 보입니다.속성 변경. 그러나 캔버스에있는 bLetter 개체는 업데이트되지 않습니다. 게다가, 전혀 그려지지 않았습니다. 아마 append()을 부정확하게 사용하고있을 것입니다. 내가 뭘 놓치고 있니?

BTW : 캔버스에 createjs.Stage 초기화 코드를 사용하지 않고 자식으로 bLetter을 추가하면 문제가 아닌 모양이 올바르게 그려 지므로 색상 만 변경되지 않습니다.

Answer 1

문제는 계속해서 새로운 획/strokestyle 명령을 grap 끝에 추가한다는 것입니다 hics 큐에 저장되므로 선행 경로에는 영향을 미치지 않습니다.

내 생각에 가장 쉬운 방법은 Lanny가 제안한대로 명령을 저장하지 말고 setPoweredState 방법으로 스타일을 수정하는 것입니다.

가 여기에 위의 예, 당신의 접근 방식에 최소한의 수정을 구현합니다 https://jsfiddle.net/u4o4hahw/

Answer 2

append 대신에 수정할 명령을 저장하는 것이 좋습니다. 그런 다음, 모든 명령을 저장할 나중에 속성을 변경할 수 있습니다, 기본적으로 http://blog.createjs.com/new-command-approach-to-easeljs-graphics/

:

var cmd = shape.graphics.beginFill("red").command; 
shape.graphics.otherInstructionsHere(); 
// Later 
cmd.style = "blue"; 

다음

내가 어떻게 작동하는지 요약 대답 또 다른 질문입니다 : Injecting a new stroke color into a shape를, 여기에 블로그 게시물입니다

다음은 샘플 코드에서 사용 된 채우기 명령의 문서에 대한 링크입니다. http://createjs.com/docs/easeljs/classes/Graphics.Fill.html