4-2-6.채우기 모드

단순한 패스는 어디가 안이고 어디가 밖인지 판단하기 쉽지만 패스가 복잡해지면 어디가 내부이고 어디가 외부인지 판단하기 애매해진다. 패스를 구성하는 선분이 겹치면 안과 밖에 명확하지 않아 이를 판단하는 복잡한 알고리즘이 필요하다. 여러 가지 알고리즘이 있으며 다른 그리기 시스템은 이 알고리즘을 선택할 수 있다. 그러나 캔버스는 nonzero winding rule이라는 고정된 알고리즘을 사용한다.

도형 내부에서 바깥쪽으로 선을 긋되 시계 방향으로 도는 선분을 만나면 카운트를 1증가시키고 반시계 방향으로 도는 선분을 만나면 카운트를 1 감소시킨다. 패스 밖으로 나왔을 때 카운트가 0이 아니면 안이라고 판단하며 0이면 밖이라고 판단한다. 속이 꽉 채워진 다각형은 외부로 나오기 위해 선을 하나 만나므로 카운트가 항상 0이 아니며 그래서 다각형이 다득 채워진다. 선의 방향에 영향을 받지도 않는다.

그러나 선분끼리 서로 만나는 복잡한 도형은 밖으로 나오기 전에 선분을 여러 개 만나며 이때 선분 방향에 따라 내부에 포함되는지 여부가 달라진다. 다음 예제를 보자.

fillmode.html

function draw() {

ctx.beginPath();

ctx.moveTo(100,50);

ctx.lineTo(300,50);

ctx.lineTo(100,150);

ctx.lineTo(300,150);

ctx.lineTo(200,10);

ctx.lineTo(200,190);

ctx.closePath();

ctx.fill();

}

선분으로 Z 모양을 그리고 계속 이어서 Z를 옆으로 세운 선분을 그은 후 패스를 닫았다. stroke로 패스를 그리면 왼쪽과 같은 도형이 그려진다. 이 도형을 fill로 채우면 어디가 안쪽인가에 따라 채우는 영역이 달라진다.

패스내의 선분끼리 만나므로 도형 내부에 또 다른 작은 다각형 영역이 존재한다. 각 영역에 대해 안인지 밖인지는 외부로 나가면서 만나는 선의 개수와 방향에 의해 결정된다.

①번 영역은 선분과 한번만 만나므로 카운트가 0이 아니며 따라서 내부이다. ②번영역은 반시계 방향의 선분과 시계 방향의 선분을 한번씩 만나므로 도형의 외부로 취급된다. 더 복잡한 도형도 같은 알고리즘으로 내부와 외부를 판별한다.

사실 이런 복잡한 도형을 그리는 경우가 많지는 않으므로 간단한 도형만 그린다면 크게 신경쓸 필요가 없다. 볼록한 폐곡선을 그릴 때는 채우기 모드가 별 영향을 미치지 않는다. 그러나 패스로 안쪽이 뚫린 도형을 그릴 때는 채우기 모드에 따라 내부와 외부가 달라지는 경우가 있으므로 주의해야 한다. 다음 예제를 보자.

fillmode2.html

function draw() {

ctx.beginPath();

ctx.rect(10, 10, 180, 180);

ctx.arc(100, 100, 50, 0, 2*Math.PI, true);

ctx.fill();

ctx.beginPath();

ctx.rect(210, 10, 180, 180);

ctx.arc(300, 100, 50, 0, 2*Math.PI, false);

ctx.fill();

}

rect 메서드는 항상 시계 방향으로 패스를 그린다. 어느 방향으로 그리나 어차피 사각형이다. 이에 비해 arc는 그리는 방향을 인수로 전달할 수 있다. 한 패스안에 사각형과 원을 그리되 원의 방향을 다르게 한 후 내부를 채웠다.

왼쪽은 사각형은 시계, 원은 반시계 방향이므로 중앙의 원에서 밖으로 선을 그을 때 카운트가 0이 된다. 따라서 안쪽의 원 영역은 도형의 내부가 아니다. 반면 오른쪽은 둘 다 시계 방향이므로 카운트가 1이다. 따라서 이 경우는 안쪽의 원 영역이 도형의 내부이다.

fill로 채울 때 어디가 채워지는가가 다르며 또한 패스에 히트 테스트를 할 때도 내부, 외부 판단 방법이 다르다. 두 개 이상의 분리된 영역을 가지는 복잡한 도형이나 선분끼리 겹치는 도형을 그릴 때는 원하는 효과를 내기 위해 그리는 방향도 주의해야 한다.