이동 및 그리기 명령 구문
경로 기하 도형을 XAML 특성 값으로 지정하는 데 사용할 수 있는 이동 및 그리기 명령(미니 언어)에 대해 알아봅니다. 이동 및 그리기 명령은 벡터 그래픽 또는 도형을 serialization 및 교환 형식으로 출력할 수 있는 많은 디자인 및 그래픽 도구에서 사용됩니다.
이동 및 그리기 명령 문자열을 사용하는 속성
이동 및 그리기 명령 구문은 명령을 구문 분석하고 런타임 그래픽 표현을 생성하는 XAML의 내부 형식 변환기에서 지원됩니다. 이 표현은 기본적으로 프레젠테이션 할 준비가 된 완성된 벡터 집합입니다. 벡터 자체는 프레젠테이션 세부 정보를 완료하지 않습니다. 요소에 다른 값을 설정해야 합니다. Path 개체의 경우 Fill, Stroke 및 기타 속성에 대한 값도 필요합니다. 그런 다음 Path를 시각적 트리에 연결해야 합니다. PathIcon 개체의 경우 Foreground 속성을 설정합니다.
Windows 런타임 이동 및 그리기 명령을 나타내는 문자열을 사용할 수 있는 두 가지 속성이 있습니다. Path.Data 및 PathIcon.Data. 이동 및 그리기 명령을 지정하여 이러한 속성 중 하나를 설정하는 경우 일반적으로 해당 요소의 다른 필수 특성과 함께 XAML 특성 값으로 설정합니다. 세부 사항에 들어가지 않고 다음과 같은 모양이 됩니다.
<Path x:Name="Arrow" Fill="White" Height="11" Width="9.67"
Data="M4.12,0 L9.67,5.47 L4.12,10.94 L0,10.88 L5.56,5.47 L0,0.06" />
PathGeometry 사용과 비교한 이동 및 그리기 명령 사용
Windows 런타임 XAML의 경우 이동 및 그리기 명령은 Figures 속성 값이 있는 단일 PathFigure 개체를 사용하여 PathGeometry를 생성합니다. 각 그리기 명령은 단일 PathFigure의 Segments 컬렉션에서 PathSegment 파생 클래스를 생성하고, 이동 명령은 StartPoint를 변경하고, 닫기 명령 집합이 True로 닫힙니다. 런타임에 데이터 값을 검사하는 경우 이 구조를 개체 모델로 탐색할 수 있습니다.
기본적인 구문
이동 및 그리기 명령에 대한 구문은 다음과 같이 요약할 수 있습니다.
- 선택적 채우기 규칙으로 시작합니다. 일반적으로 EvenOdd 기본값을 원하지 않는 경우에만 지정합니다. (자세한 정보 EvenOdd 나중에.)
- 정확히 하나의 이동 명령을 지정합니다.
- 하나 이상의 그리기 명령을 지정합니다.
- close 명령을 지정합니다. close 명령을 생략할 수 있지만 그림이 열린 상태로 유지됩니다(일반적이지는 않습니다).
이 구문의 일반적인 규칙은 다음과 같습니다.
- 각 명령은 정확히 하나의 문자로 표시됩니다.
- 해당 문자는 대문자 또는 소문자일 수 있습니다. 사례는 우리가 설명한 대로 중요합니다.
- close 명령을 제외한 각 명령에는 일반적으로 하나 이상의 숫자가 잇습니다.
- 명령에 대해 숫자가 두 개 이상인 경우 쉼표나 공백으로 구분합니다.
[fillRule] moveCommand drawCommand [drawCommand*] [closeCommand]
대부분의 그리기 명령은 x,y 값을 제공하는 지점을 사용합니다. *points 개체 틀이 표시될 때마다 포인트의 x,y 값에 대해 두 개의 10진수 값을 제공한다고 가정할 수 있습니다.
결과가 모호하지 않은 경우 공백을 생략할 수 있습니다. 실제로 모든 숫자 집합(점 및 크기)에 대해 구분 기호로 쉼표로 사용하는 경우 모든 공백을 생략할 수 있습니다. 예를 들어 다음 코드는 올바릅니다: F1M0,58L2,56L6,60L13,51L15,53L6,64z 그러나 명확성을 위해 명령 사이에 공백을 포함하는 것이 더 일반적입니다.
쉼표는 10진수의 소수점으로 사용하지 마세요. 명령 문자열은 XAML에서 해석되며 en-us 로케일에 사용되는 규칙과 다른 문화권 별 숫자 서식 규칙을 고려하지 않습니다.
구문 세부 정보
채우기 규칙
선택적 채우기 규칙에 는 F0 또는 F1의 두 가지 가능한 값이 있습니다. (이 F 는 항상 대문자입니다.) F0 은 기본값이며 EvenOdd 채우기 동작을 생성 하므로 일반적으로 지정하지 않습니다. F1을 사용하여 0이 아닌 채우기 동작을 가져옵니다. 이러한 채우기 값은 FillRule 열거형의 값과 일치합니다.
이동 명령
새 그림의 시작점을 지정합니다.
| 구문 |
|---|
M startPoint - 또는 - m startPoint |
| 용어 | 설명 |
|---|---|
| startPoint | 연락 새 그림의 시작점입니다. |
대문자 M은 startPoint가 절대 좌표임을 나타내고, 소문자 m은 startPoint가 이전 지점의 오프셋임을 나타내고, 이전 점이 없으면 (0,0)을 나타냅니다.
참고 이동 명령 후에 여러 지점을 지정하는 것은 합법적입니다. 선 명령을 지정한 것처럼 해당 점에 선이 그려집니다. 그러나 권장되는 스타일은 아닙니다. 대신 전용 줄 명령을 사용합니다.
그리기 명령
그리기 명령은 다음과 같은 도형을 포함합니다: 선, 수평선, 수직선, 입방형 3차원 곡선, 정방형 3차원 곡선, 부드러운 입방형 3차원 곡선, 부드러운 정방형 3차원 곡선 및 타원형 호 등.
모든 그리기 명령의 경우 대/소문자를 구분합니다. 대문자가 절대 좌표를 나타내고 소문자가 이전 명령을 기준으로 좌표를 나타냅니다.
세그먼트의 제어점은 이전 세그먼트의 끝점을 기준으로 합니다. 같은 형식의 명령을 2개 이상 순차적으로 입력할 경우 중복되는 명령 항목을 생략해도 됩니다. 예를 들어 L 100,200 300,400는 L 100,200 L 300,400와 같습니다.
선 명령
현재 점과 지정된 끝점 간에 직선을 만듭니다. l 20 30 및 L 20,30은 유효한 선 명령의 예입니다. LineGeometry 개체에 해당하는 개체를 정의합니다.
| 구문 |
|---|
L endPoint - 또는 - l endPoint |
| 용어 | 설명 |
|---|---|
| endPoint | 연락 선의 끝점입니다. |
가로줄 명령
현재 점과 지정된 x 좌표 간에 수평선을 만듭니다. H 90은 유효한 수평선 명령의 예입니다.
| 구문 |
|---|
H x -또는- h x |
| 용어 | 설명 |
|---|---|
| x | 이중 선 끝점의 x 좌표입니다. |
세로선 명령
현재 점과 지정된 y 좌표 간에 수직선을 만듭니다. v 90은 유효한 수직선 명령의 예입니다.
| 구문 |
|---|
V y -또는- v y |
| 용어 | 설명 |
|---|---|
| y | 이중 선 끝점의 y 좌표입니다. |
입방형 3차원 곡선 명령
지정한 두 개의 제어점(1 및 2)을 사용하여 현재 점과 지정된 끝점 간에 입방체 베지에 곡선을 만듭니다( 그리고 ). C 100,200 200,400 300,200은 유효한 곡선 명령의 예입니다. BezierSegment 개체를 사용하여 PathGeometry 개체에 해당하는 개체를 정의합니다.
| 구문 |
|---|
C controlPoint1 controlPoint2 endPoint -또는- c controlPoint1 controlPoint2 endPoint |
| 용어 | 설명 |
|---|---|
| controlPoint1 | 연락 곡선의 시작 접선을 결정하는 곡선의 첫 번째 제어점입니다. |
| controlPoint2 | 연락 곡선의 끝 접선을 결정하는 곡선의 두 번째 제어점입니다. |
| endPoint | 연락 곡선을 그릴 지점입니다. |
2차원 베지에 곡선 명령
지정한 제어점(controlPoint)을 사용하여 현재 점과 지정된 끝점 간에 2차원 베지에 곡선을 만듭니다. q 100,200 300,200은 유효한 정방형 3차원 곡선 명령의 예입니다. QuadraticBezierSegment를 사용하여 PathGeometry에 해당하는 항목을 정의합니다.
| 구문 |
|---|
Q controlPoint endPoint -또는- q controlPoint endPoint |
| 용어 | 설명 |
|---|---|
| controlPoint | 연락 곡선의 시작 및 끝 접선을 결정하는 곡선의 제어점입니다. |
| endPoint | 연락 곡선을 그릴 지점입니다. |
부드러운 입방형 3차원 곡선 명령
현재 점과 지정된 끝점 간에 입방형 베지에 곡선을 만듭니다. 첫 번째 제어점은 현재 점을 기준으로 이전 명령의 두 번째 제어점의 리플렉션으로 간주됩니다. 이전 명령이 없거나 이전 명령이 입방형 베지에 곡선 명령 또는 부드러운 입방형 베지에 곡선 명령이 아닌 경우 첫 번째 제어점이 현재 점과 일치한다고 가정합니다. 곡선 끝에 대한 제어점인 두 번째 제어점은 controlPoint2로 지정됩니다. 예를 들어 S 100,200 200,300은 유효한 부드러운 입방형 베지에 곡선 명령입니다. 이 명령은 앞의 곡선 세그먼트가 있었던 BezierSegment를 사용하여 PathGeometryx에 해당하는 항목을 정의합니다.
| 구문 |
|---|
ScontrolPoint2 끝점 -또는- scontrolPoint2 endPoint |
| 용어 | 설명 |
|---|---|
| controlPoint2 | 연락 곡선의 끝 접선을 결정하는 곡선의 제어점입니다. |
| endPoint | 연락 곡선을 그릴 지점입니다. |
부드러운 정방형 3차원 곡선 명령
현재 점과 지정된 끝점 간에 2차형 베지어 곡선을 만듭니다. 제어점은 현재 점을 기준으로 이전 명령의 제어점의 리플렉션으로 간주됩니다. 이전 명령이 없거나 이전 명령이 2차형 베지어 곡선 명령 또는 부드러운 2차형 베지어 곡선 명령이 아닌 경우 제어점이 현재 점과 일치합니다. 이 명령은 앞의 곡선 세그먼트가 있었던 BezierSegment를 사용하여 PathGeometryx에 해당하는 항목을 정의합니다.
| 구문 |
|---|
TcontrolPoint 끝점 -또는- tcontrolPoint 끝점 |
| 용어 | 설명 |
|---|---|
| controlPoint | 연락 곡선의 시작 접선을 결정하는 곡선의 제어점입니다. |
| endPoint | 연락 곡선을 그릴 지점입니다. |
타원형 호 명령
현재 점과 지정된 끝점 간에 타원형 호를 만듭니다. ArcSegment를 사용하여 PathGeometry에 해당하는 항목을 정의합니다.
| 구문 |
|---|
A 크기 rotationAngle isLargeArcFlag sweepDirectionFlag endPoint -또는- a 크기 rotationAngle isLargeArcFlag sweepDirectionFlag endPoint |
| 용어 | 설명 |
|---|---|
| size | 크기 원호의 X 반지름 및 y 반지름입니다. |
| rotationAngle | 이중 타원의 회전 각도입니다. |
| isLargeArcFlag | 호의 각도가 180도보다 커야 하면 1로 설정하고, 그렇지 않으면 0으로 설정합니다. |
| sweepDirectionFlag | 호가 양의 각도 방향으로 그려지면 1로 설정하고, 그렇지 않으면 0으로 설정합니다. |
| endPoint | 연락 호를 그리는 점입니다. |
닫기 명령
현재 그림을 끝내고 현재 점을 그림의 시작 점에 연결하는 선을 만듭니다. 이 명령은 그림의 마지막 세그먼트와 첫 번째 세그먼트 사이에 선 조인(모서리)을 만듭니다.
| 구문 |
|---|
Z -또는- z |
포인트 구문
점의 x 좌표 및 y 좌표를 설명합니다. 점도 참조하세요.
| 구문 |
|---|
| xy -또는- xy |
| 용어 | 설명 |
|---|---|
| x | 이중 점의 X 좌표입니다. |
| y | 이중 점의 Y 좌표입니다. |
추가적인 참고 사항
표준 숫자 값 대신 다음과 같은 특수 값을 사용할 수도 있습니다. 이 값은 대/소문자를 구분합니다.
- Infinity: PositiveInfinity를 나타냅니다.
- \-Infinity: NegativeInfinity를 나타냅니다.
- NaN: NaN을 나타냅니다.
10진수 또는 정수를 사용하는 대신 과학적 표기법을 사용할 수 있습니다. 예를 들어 +1.e17은 유효한 값입니다.
이동 및 그리기 명령을 생성하는 디자인 도구
Blend for Microsoft Visual Studio 2015에서 펜 도구 및 기타 그리기 도구를 사용하면 일반적으로 이동 및 그리기 명령을 사용하여 Path 개체를 생성합니다.
컨트롤에 대한 Windows 런타임 XAML 기본 템플릿에 정의된 일부 컨트롤 부분에 기존 이동 및 그리기 명령 데이터가 표시될 수 있습니다. 예를 들어 일부 컨트롤은 이동 및 그리기 명령으로 정의된 데이터가 있는 PathIcon을 사용합니다.
XAML 형식으로 벡터를 출력할 수 있는 다른 일반적으로 사용되는 벡터 그래픽 디자인 도구에 사용할 수 있는 내보내기 또는 플러그 인이 있습니다. 일반적으로 Path.Data에 대한 이동 및 그리기 명령을 사용하여 레이아웃 컨테이너에 Path 개체를 만듭니다. 다른 브러시를 적용할 수 있도록 XAML에 여러 Path 요소가 있을 수 있습니다. 이러한 내보내기 또는 플러그 인의 대부분은 원래 WPF(Windows Presentation Foundation) XAML 또는 Silverlight용으로 작성되었지만 XAML 경로 구문은 Windows 런타임 XAML과 동일합니다. 일반적으로 내보내기에서 XAML 청크를 사용하여 Windows 런타임 XAML 페이지에 바로 붙여넣을 수 있습니다. (그러나 다음을 사용할 수 없습니다. RadialGradientBrush가 변환된 XAML의 일부인 경우 Windows 런타임 XAML은 해당 브러시를 지원하지 않기 때문입니다.)