1 Results for 'path'

  1. 2008.01.20 Geometry의 Path 설정 방법 메모 (4)
실버라이트는 벡터 그래픽 시스템을 사용하기 때문에 비트맵 이미지와 동영상을 제외한 모든 그래픽 요소는 벡터로 표시되는데요, 이 벡터 그래픽은 결국 두 개의 점을 잇는 방법과 이 점들이 폐곡선을 이룰 때 칠하는 방법에 대한 정의로 수렴될 수 있죠.

여튼 자세히 정리하고 싶지만 뭔가 만들다가 참고를 하기 위해 간단하게 메모합니다.
기본적으로 WPF의 Path Syntax를 참고해서 정리한 것이지만 실버라이트도 동일하게 적용되죠.

Geometry Path의 정의
Geometry Path의 정의는 StreamGeometryPathFigureCollection이라는 두 개의 미니 언어로 제공됩니다.

  • StreamGeometry는 UIElement의 Clip 속성이나 Path 엘리먼트의 Data속성을 설정하기 위한 미니 언어로 간단한 문자열만으로 geometry를 표현합니다.
XAML - StreamGeometry
<Path Stroke="Black" Fill="Gray"
      Data="M 10,100 L 10,300 300,-200 300,100" />
  • PathFigureCollection은 PathGeometry의 Figures를 설정할 때 사용하는 미니 언어로 역시 StreamGeometry와 같은 양식으로 표현할 수도 있지만 좀 더 계층적으로 구분할 수 있습니다.
XAML - PathFigureCollection
<Path Stroke="Black" Fill="Gray">
  <Path.Data>
    <PathGeometry Figures="M 10,100 L 10,300 300,-200 300,100" />
  </Path.Data>
</Path>


XAML - 좀 더 계층적인 PathFigureCollection
<Path Stroke="Black" Fill="Gray">
  <Path.Data>
    <PathGeometry>
      <PathGeometry.Figures>
        <PathFigure StartPoint="10,100">
          <PathFigure.Segments>
            <LineSegment Point="10, 300"/>
            <LineSegment Point="300, -200"/>
            <LineSegment Point="300, 100"/>
          </PathFigure.Segments>
        </PathFigure>
      </PathGeometry.Figures>
    </PathGeometry>
  </Path.Data>
</Path>

공백에 대해
Geometry Path의 문법에서 각 포인트 사이는 간결하게 단일 공백으로 구분하며 다중 공백도 허용됩니다. 심지어 두 숫자가 명확하게 구분가능 할 경우는 공백을 필요로 하지 않습니다. 예를 들어 "2..3"은 두 숫자 "2.0"과 "0.3"을 의미하고 "2-3"은 두 숫자 "2"와 "-3"을 의미합니다. 이럴 경우 문자열 커맨드를 공백 없이 붙여써도 됩니다.

문법
StreamGeometry의 XAML 문법은 옵셔널한 FillRule 값과 하나 이상의 figure 설명으로 조합됩니다.

StreamGeometry 문법
<obejct property="[FillRule] figureDescription[ figureDescription]*" />

이에 반해 PathFigureCollection에서는 FillRule을 사용하지 않고 나머지는 StreamGeometry와 동일합니다. 각 요소는 다음과 같은 정의를 가집니다.

규칙 설명
FillRule System.Windows.Media.FillRule 참고
StreamGeometry가 EvenOdd 또는 Nonzero FillRule을 사용하는지 지정합니다.
  • F0는 EvenOdd 채우기를 지정합니다.
  • F1은 Nonzero 채우기를 지정합니다.
이 명령을 생략할 경우 기본으로 EvenOdd를 선택하며, 이 명령을 설정할 경우 반드시 문자열의 첫머리에 넣어야 합니다.
figureDescription 다음 명령 중 하나를 선택합니다. 보다 자세한 사항은 아래에서 설명합니다.
  • 이동 명령
  • 그리기 명령
  • 닫기 명령

명령은 연속해서 추가될 수 있고 닫기는 일련의 figure를 단일폐곡선으로 닫을 때 사용됩니다.


이동 명령
규칙 설명
M startPoint
- or -
m startPoint
System.Windows.Point
새 figure를 시작합니다.

대문자 M은 절대 좌표를 의미하고 소문자 m은 이전 포인트에 대한 상대 좌표를 의미하며 만약 이전 포인트가 없을 경우 (0, 0)에 대한 좌표를 의미합니다. 만약 여러 개의 포인트가 지정된 경우 직선 명령으로 그린 것과 동일합니다.

그리기 명령
그리기 명령은 주어진 점과 점 사이를 직선이나 곡선으로 연결하여 도형을 이룹니다. 이동 명령과 마찬가지로 모든 명령은 대소문자로 구분되며 대문자는 절대 좌표, 소문자는 상대 좌표를 의미합니다.
규칙 설명
L endPoint
- or -
l endPoint
System.Windows.Point
지정된 좌표까지 직선으로 그립니다.
H x
- or -
h x
System.Windows.Double
지정된 x좌표까지 수평선으로 그립니다.
V y
- or -
v y
System.Windows.Double
지정된 y좌표까지 수직선으로 그립니다.
C controlPoint1 controlPoint2 endPoint
- or -
c controlPoint1 controlPoint2 endPoint
System.Windows.Ponit
지정된 컨트롤 포인트와 엔드 포인트로 Cubic 베지어 곡선을 그립니다.
Q controlPoint endPoint
- or -
q controlPoint endPoint
System.Windows.Ponit
지정된 컨트롤 포인트와 엔드 포인트로 정방형(Quadratic) 베지어 곡선을 그립니다.
S controlPoint2 endPoint
- or -
s controlPoint2 endPoint
System.Windows.Ponit
컨트롤 포인트1을 현재 포인트로 고정하고 지정된 컨트롤 포인트2와 엔드 포인트로 부드러운 cubic 베지어 곡선을 그립니다.
T controlPoint endPoint
- or -
t controlPoint endPoint
System.Windows.Ponit
컨트롤 포인트2를 현재 포인트로 고정하고 지정된 컨트롤 포인트과 엔드 포인트로 부드러운 cubic 베지어 곡선을 그립니다.
A size rotationAngle isLargeArgFlag sweepDirectionFlag
- or -
a size rotationAngle isLargeArgFlag sweepDirectionFlag
지정된 포인트와 현재 포인트 사이의 호를 만듭니다.

닫기  명령

figure를 닫고 시작 점과 연결합니다.

특수한 값 표현
일반적인 숫자값 외에 다음과 같이 특별한 값을 사용할 수 있고 이 값들은 대소문자를 구분합니다.
Infinity ; System.Double.PositiveInfinity를 의미합니다.
-Infinity ; System.Double.NegativeInfinity를 의미합니다.
NaN ; System.Double.NaN을 의미합니다.

이 외에도 +1.e17과 같은 지수 표현을 사용할 수 있습니다.

기타 특이 사항
정확하지는 않지만 StreamGeometry 형식으로 표현되는 문자열의 명령은 한 라인에 쓸 수 있는 개수가 제한이 있는 걸로 보입니다.
제 테스트에 의하면 약 1550개 이상의 명령(혹은 포인트)가 들어갈 경우 XAML 파싱 에러가 발생합니다.

참고
http://msdn2.microsoft.com/ko-kr/library/ms752293(VS.85).aspx
신고
Posted by gongdo


티스토리 툴바