방법: 복합 도형의 채우기 제어

GeometryGroup 또는 PathGeometry의 FillRule 속성은 지정한 점이 기하 도형의 일부인지 여부를 결정하기 위해 복합 도형에서 사용하는 "규칙"을 지정합니다. FillRule의 값은 EvenOdd 및 Nonzero 중 하나가 될 수 있습니다. 다음 단원에서는 이 두 가지 규칙을 사용하는 방법을 설명합니다.

EvenOdd: 이 규칙은 점에서 시작되는 무한대의 광선을 임의의 방향으로 그린 다음 지정한 도형 내에서 광선이 교차하는 경로 세그먼트의 수를 계산하여 해당 점이 채우기 영역에 있는지 여부를 결정합니다. 이 수가 홀수이면 해당 점이 채우기 영역 안에 있는 것이고, 짝수이면 밖에 있는 것입니다.

예를 들어 아래의 XAML에서는 일련의 동심원(대상)으로 구성되고 FillRule이 EvenOdd로 설정된 복합 도형을 만듭니다.

<Path Stroke="Black" StrokeThickness="1" Fill="#CCCCFF">
  <Path.Data>
    <GeometryGroup FillRule="EvenOdd">
      <EllipseGeometry RadiusX="50" RadiusY="50" Center="75,75" />
      <EllipseGeometry RadiusX="70" RadiusY="70" Center="75,75" />
      <EllipseGeometry RadiusX="100" RadiusY="100" Center="75,75" />
      <EllipseGeometry RadiusX="120" RadiusY="120" Center="75,75" />
    </GeometryGroup>
  </Path.Data>
</Path>

다음 그림에서는 이전 예제에서 만든 도형을 보여 줍니다.

이 그림에서 보면 가운데 원과 세 번째 원이 채워져 있지 않습니다. 그 이유는 이 두 원에 있는 점에서 그린 광선이 통과하는 세그먼트 수가 짝수이기 때문입니다. 아래 그림을 참조하십시오.

NoneZero: 이 규칙은 특정 점에서 시작되는 무한대의 광선을 임의의 방향으로 그린 다음 도형의 세그먼트가 광선과 교차하는 위치를 검사하여 해당 점이 경로의 채우기 영역에 있는지 여부를 결정합니다. 0부터 세기 시작하여 세그먼트가 왼쪽에서 오른쪽으로 반직선과 교차할 때마다 1을 더하고, 경로 세그먼트가 오른쪽에서 왼쪽으로 반직선과 교차할 때마다 1을 뺍니다. 교차점 수를 모두 센 결과가 0이면 해당 점이 경로 밖에 있는 것이고, 그렇지 않으면 안에 있는 것입니다.

<Path Stroke="Black" StrokeThickness="1" Fill="#CCCCFF">
  <Path.Data>
    <GeometryGroup FillRule="NonZero">
      <EllipseGeometry RadiusX="50" RadiusY="50" Center="75,75" />
      <EllipseGeometry RadiusX="70" RadiusY="70" Center="75,75" />
      <EllipseGeometry RadiusX="100" RadiusY="100" Center="75,75" />
      <EllipseGeometry RadiusX="120" RadiusY="120" Center="75,75" />
    </GeometryGroup>
  </Path.Data>
</Path>

이 예제에서 FillRule의 Nonzero 값에 대한 결과는 다음 그림과 같습니다.

이 그림에서 볼 수 있듯이 모든 원이 채워져 있습니다. 이는 모든 세그먼트의 방향이 동일하고 임의의 점에서 그린 광선이 하나 이상의 세그먼트와 교차하므로 총 교차 횟수가 0이 아니기 때문입니다. 예를 들어 아래 그림에서 빨강 화살표는 세그먼트를 그린 방향을 나타내고 흰색 화살표는 가장 안쪽 원의 점에서 그린 임의의 광선을 나타냅니다. 세그먼트가 왼쪽에서 오른쪽으로 광선과 교차하기 때문에 0부터 시작하여 광선이 세그먼트와 교차할 때마다 1이 더해집니다.

Nonzero 규칙의 동작을 보다 명확하게 보려면 세그먼트 방향이 서로 다른 복잡한 도형이 필요합니다. 다음 XAML 코드에서는 이전 예제와 유사한 도형을 만듭니다. 단, 이 경우에는 EllipseGeometry를 사용하여 완전히 닫힌 동심원을 만드는 대신 PathGeometry를 사용하여 동심 호 네 개를 만듭니다.

<Path Stroke="Black" StrokeThickness="1" Fill="#CCCCFF">
  <Path.Data>
    <GeometryGroup FillRule="NonZero">
      <PathGeometry>
        <PathGeometry.Figures>

          <!-- Inner Ring -->
          <PathFigure StartPoint="10,120">
            <PathFigure.Segments>
              <PathSegmentCollection>
                <ArcSegment Size="50,50" IsLargeArc="True" SweepDirection="CounterClockwise" Point="25,120" />
              </PathSegmentCollection>
            </PathFigure.Segments>
          </PathFigure>

          <!-- Second Ring -->
          <PathFigure StartPoint="10,100">
            <PathFigure.Segments>
              <PathSegmentCollection>
                <ArcSegment Size="70,70" IsLargeArc="True" SweepDirection="CounterClockwise" Point="25,100" />
              </PathSegmentCollection>
            </PathFigure.Segments>
          </PathFigure>

          <!-- Third Ring (Not part of path) -->
          <PathFigure StartPoint="10,70">
            <PathFigure.Segments>
              <PathSegmentCollection>
                <ArcSegment Size="100,100" IsLargeArc="True" SweepDirection="CounterClockwise" Point="25,70" />
              </PathSegmentCollection>
            </PathFigure.Segments>
          </PathFigure>

          <!-- Outer Ring -->
          <PathFigure StartPoint="10,300">
            <PathFigure.Segments>
              <ArcSegment Size="130,130" IsLargeArc="True" SweepDirection="Clockwise" Point="25,300" />
            </PathFigure.Segments>
          </PathFigure>
        </PathGeometry.Figures>
      </PathGeometry>
    </GeometryGroup>
  </Path.Data>
</Path>

다음 그림에서는 이전 예제에서 만든 도형을 보여 줍니다.

이 그림에서 보면 중앙에서 세 번째 호가 채워져 있지 않습니다. 다음 그림은 그 이유를 보여 줍니다. 이 그림에서 빨강 화살표는 세그먼트를 그리는 방향을 나타내고, 흰색 화살표 두 개는 "채워지지 않은" 영역의 점에서 바깥 방향으로 이동하는 임의의 광선 두 개를 나타냅니다. 그림에서 볼 수 있듯이 특정 광선이 해당 경로에서 세그먼트와 교차하는 횟수의 합계는 0입니다. 앞에서 정의한 대로 합계가 0이면 해당 점이 기하 도형, 즉 채우기의 일부가 아니고, 음수 값을 포함하여 합계가 0이 아니면 점이 기하 도형의 일부임을 의미합니다.

참고: FillRule과 관련해서는 모든 도형이 닫힌 도형이라고 가정합니다. 세그먼트에 끊긴 부분이 있으면 가상의 선을 그려서 잇습니다. 위의 예제에는 원에 끊긴 부분이 세 군데 있습니다. 이 경우 끊긴 부분을 통과하는 광선과 다른 방향으로 이동하는 광선의 결과가 다를 것이라고 생각할 수 있습니다. 다음 그림에서는 이러한 끊긴 부분 중 하나와 FillRule을 적용하기 위해 이 부분을 잇는 "가상의 세그먼트"를 확대하여 보여 줍니다.

참고 항목

작업

방법: 복합 도형 만들기

개념

Geometry 개요