2011-05-12 13 views
3

HTML 캔버스 요소에 모든 마우스 및 벡터 관련 정보를 muleheadedly 구현 한 후 EaselJS로 전환했습니다.EaselJS 변경 색상 onMouseOver

나는 EaselJS에 익숙해졌으며 정말 멋지다. 특히 용기가 마음에 들었고 컨테이너를 그리는 것이 얼마나 단순한 지 알 수있었습니다. 그러나 마우스 오버시에 shape의 색상 변경을 어떻게 구현하는지 파악할 수 없습니다. 빨간색에서 녹색으로 변하는 직사각형과 같은 간단한 것.

컨테이너에서 모양을 제거하고 새 색상으로 새 모양을 만들겠습니까?

한 가지 모양이 다른 모양을 부분적으로 가리고, 원 안에 사각형을 말하면, 사각형 위에있을 때 onMouseOver는 원에 등록되지 않습니다. 이 문제를 해결할 방법이 있습니까?

건배

편집

: 여기에 내가 된 beginFill 새로운 색상을 통과 할 수있는 쉬운 방법이 있나요 내 원

var circle=new Shape(); 
    circle.graphics.beginStroke("rgba(255,0,0,0.75)") 
      .setStrokeStyle(lw) 
      .drawCircle(w/2,h/2,r) 
      .endStroke() 
      .beginFill("rgba(255,255,0,0.5)") 
      .drawCircle(w/2,h/2,r-lw/2) 
      .endFill(); 
    circle.shadow=new Shadow("rgba(0,0,0,0.5)",10,-10,10) 

그리는 데 사용하는 벡터의 예입니다? 변수를 사용할 수 있습니까? circle.graphics...은 한 번만 실행되거나 stage.update()에 대한 호출이있을 때마다 실행됩니까?

답변

3

마우스 오버시 Shape.graphics.beginFill을 다른 색으로 변경하려고합니다.

Here's an example (경고 : 부주의 코드!)를 예를 들어

+0

고맙습니다. 제 경우에는 상황이 좀 더 복잡합니다. 알파 값이 0.5 인 원이 있으므로 단순히 다시 그리기만으로 충분하지 않습니다. 또한 그림자가 있습니다. 나는 단지 EaselJS에'color' 속성이 있다고 가정했기 때문에 쉽게 업데이트 할 수 있습니다. 그러나 Shapes에는 복잡한 벡터가 있다고 가정하면 간단하지 않습니다. 나는 가 나는 1) 통화 stage.clear() 2) 재정 3 칠한 할 모양의 전체 벡터)이 새로운 모양으로 된 모양을 대체 4) 전화 stage.update()에있는 것 같아요 쉬운 방법? (btw, 내 코드 스 니펫 포함) – puk

+2

해결책을 찾았습니다. 기본적으로, 이미지를 다시 그리기 위해해야 ​​할 일은 모든 마우스 오버/아웃에 'circle.graphics = new Graphics()'와 같은 새로운 Graphics 인스턴스를 생성하고 매번 색상을 변경하는 것입니다. – puk