html5 - 캔버스 - Createjs - 그래픽 드로잉의 음수 공간

Question

lineTo() 및 drawCircle() 메서드를 사용하여 모양을 그리는 복잡한 상황이 있지만 어떤 방향으로 그리는지에 따라 부정적인 공간 동작이 있습니다. 선. 이 JsFiddle :)에서

//draw from right to left 
var shape2 = new createjs.Shape(); 
    shape2.graphics.beginFill('blue').moveTo(300,200).lineTo(0,200).lineTo(0,300).lineTo(300,300).closePath(); 
    shape2.graphics.drawCircle(280,250,100) 

봐 https://jsfiddle.net/zOgs/3epv7o54/

파란색 원이 부정적인 공간을 왜 누군가가 나에게 설명 할 수 ..? 그리고 그 동작을 방지하는 방법 ...

들으을

는 (... 나는 모양 인스턴스의 compositeOperation의 PARAM을 변경하려 시도했지만 아무 효과가없는 것입니다)!

편집 1 : 나는 내 작업 케이스의보다 정확한 예제를 만들었

. 이 JsFiddle을보고 마우스를 캔버스 위로 이동하십시오. 오른쪽에서 왼쪽으로 어떤 문제도 보이지 않을 것입니다 ...하지만 네거티브 공간은 왼쪽에서 오른쪽으로 나타납니다 !!

https://jsfiddle.net/zOgs/psa3x9y2/

가 나는 이유를 정확히 이해하지 못하고 (더 나은보기를 신속하게 이동), 그리고 난 때문에 성능 이유 ... (캐싱 가능한 유효한 해결 방법을 찾을 수없는, 더 composeOperation 없기 때문에 배경 문제)

Answer 1

EDIT 1 (제거 두 이전에 제안 된 해결 방법)의 내가 해결책을 찾은 것 같아

: 원하기 전에 다시 채우기를 설정하면 그려진는 해결 보인다 그것.

위의 예에서 마지막 줄을 수정하여 shape2.graphics.beginFill('blue').drawCircle(280,250,100);으로 수정해야합니다.

당신의 발언 업데이트 jsfiddle에 대한 응답으로 편집이

, 당신은 또한 바로 Shape() 인스턴스 후 shape3.compositeOperation = "xor"; 설정을 시도 할 수 있습니다.

업데이트 된 바이올린 : https://jsfiddle.net/93gv1e06/