다음을 통해 공유


이동 및 그리기 명령 구문

경로 기하 도형을 XAML 특성 값으로 지정하는 데 사용할 수 있는 이동 및 그리기 명령(미니 언어)에 대해 알아봅니다. 이동 및 그리기 명령은 벡터 그래픽 또는 셰이프를 serialization 및 교환 형식으로 출력할 수 있는 많은 디자인 및 그래픽 도구에서 사용됩니다.

이동 및 그리기 명령 문자열을 사용하는 속성

이동 및 그리기 명령 구문은 명령을 구문 분석하고 런타임 그래픽 표현을 생성하는 XAML의 내부 형식 변환기에서 지원됩니다. 이 표현은 기본적으로 프레젠테이션할 준비가 된 완성된 벡터 집합입니다. 벡터 자체는 프레젠테이션 세부 정보를 완료하지 않습니다. 요소에 다른 값을 설정해야 합니다. Path 개체의 경우 Fill, Stroke 및 기타 속성에 대한 값도 필요합니다. 그런 다음 Path를 시각적 트리에 연결해야 합니다. PathIcon 개체의 경우 Foreground 속성을 설정합니다.

Windows 런타임에는 이동 및 그리기 명령을 나타내는 문자열을 사용할 수 있는 두 가지 속성인 Path.DataPathIcon.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를 생성합니다. 각 그리기 명령은 단일 PathFigureSegments 컬렉션에서 PathSegment 파생 클래스를 생성하고, 이동 명령은 StartPoint를 변경하며, 닫기 명령이 IsClosed으로 설정합니다. 런타임에 데이터 값을 검사하는 경우 이 구조를 개체 모델로 탐색할 수 있습니다.

기본 구문

이동 및 그리기 명령에 대한 구문은 다음과 같이 요약할 수 있습니다.

  1. 선택적 채우기 규칙으로 시작합니다. 일반적으로 EvenOdd 기본값을 원하지 않는 경우에만 지정합니다. ( EvenOdd 에 대한 자세한 내용은 나중에 참조하세요.)
  2. 정확히 하나의 이동 명령을 지정합니다.
  3. 하나 이상의 그리기 명령을 지정합니다.
  4. close 명령을 지정합니다. close 명령을 생략할 수 있지만, 그러면 그림이 열린 상태로 계속 남아있게 됩니다(이는 일반적이지 않습니다).

이 구문의 일반적인 규칙은 다음과 같습니다.

  • 각 명령은 정확히 하나의 문자로 표시됩니다.
  • 해당 문자는 대문자 또는 소문자일 수 있습니다. 사례는 우리가 설명한 대로 중요합니다.
  • close 명령을 제외한 각 명령에는 일반적으로 하나 이상의 숫자가 잇습니다.
  • 명령에 대해 숫자가 두 개 이상인 경우 쉼표나 공백으로 구분합니다.

[fillRule]moveCommanddrawCommand[drawCommand*][closeCommand]

대부분의 그리기 명령은 x,y 값을 제공하는 지점을 사용합니다. *points 자리 표시자가 표시되면 x,y 값에 2개의 소수점 값을 준다고 가정할 수 있습니다.

결과가 모호하지 않은 경우 공백을 생략할 수 있습니다. 실제로 모든 숫자 집합(점 및 크기)에 대해 구분 기호로 쉼표로 사용하는 경우 모든 공백을 생략할 수 있습니다. 예를 들어, 이 사용법은 합법적입니다: F1M0,58L2,56L6,60L13,51L15,53L6,64z. 그러나 명확성을 위해 명령 사이에 공백을 포함하는 것이 더 일반적입니다.

쉼표는 10진수의 소수점으로 사용하지 마세요. 명령 문자열은 XAML에서 해석되며 en-us 로캘에 사용되는 규칙과 다른 문화권별 숫자 서식 지정 규칙을 고려하지 않습니다.

구문 세부 정보

채우기 규칙

선택적 채우기 규칙에는 F0 또는 F1의 두 가지 가능한 값이 있습니다. F 는 항상 대문자입니다. F0 은 기본값입니다. EvenOdd 채우기 동작을 생성하므로 일반적으로 지정하지 않습니다. F1을 사용하여 비영점 채우기 기능을 사용하세요. 이러한 채우기 값은 FillRule 열거형의 값과 일치합니다.

이동 명령

새 그림의 시작점을 지정합니다.

Syntax
M startPoint
- 또는 -
m startPoint
용어 Description
startPoint
새 그림의 시작점입니다.

대문자 MstartPoint 가 절대 좌표임을 나타냅니다. 소문자 mstartPoint 가 이전 지점의 오프셋이거나 이전 점이 없는 경우 (0,0)임을 나타냅니다.

메모 이동 명령 후에 여러 지점을 지정하는 것은 합법적입니다. 선 명령을 지정한 것처럼 해당 점에 선이 그려집니다. 그러나 권장되는 스타일은 아닙니다. 대신 전용 줄 명령을 사용합니다.

그리기 명령

그리기 명령은 선, 가로선, 세로선, 입방형 베지어 곡선, 4차원 베지어 곡선, 부드러운 입방형 베지어 곡선, 부드러운 이차형 베지어 곡선 및 타원형 호와 같은 여러 셰이프 명령으로 구성될 수 있습니다.

모든 그리기 명령의 경우 대/소문자를 구분합니다. 대문자가 절대 좌표를 나타내고 소문자가 이전 명령을 기준으로 좌표를 나타냅니다.

세그먼트의 제어점은 이전 세그먼트의 끝점을 기준으로 합니다. 동일한 형식의 두 개 이상의 명령을 순차적으로 입력하는 경우 중복 명령 항목을 생략할 수 있습니다. 예를 들어 L 100,200 300,400L 100,200 L 300,400와 같습니다.

줄 명령

현재 점과 지정된 끝점 사이에 직선을 만듭니다. l 20 30L 20,30는 유효한 줄 명령의 예입니다. LineGeometry 개체에 해당하는 개체를 정의합니다.

Syntax
L 끝점
- 또는 -
l 끝점
용어 Description
엔드포인트
줄의 끝점입니다.

가로줄 명령

현재 점과 지정된 x 좌표 사이에 가로 선을 만듭니다. H 90 는 유효한 가로줄 명령의 예입니다.

Syntax
H x
-또는-
h x
용어 Description
x 더블
선 끝점의 x 좌표입니다.

세로줄 명령

현재 점과 지정된 y 좌표 사이에 세로선을 만듭니다. v 90 는 유효한 세로줄 명령의 예입니다.

Syntax
V y
-또는-
v y
용어 Description
y 더블
선 끝점의 y 좌표입니다.

큐빅 베지어 곡선 명령

지정된 두 제어점(controlPoint1controlPoint2)을 사용하여 현재 점과 지정된 끝점 사이에 입방형 3차원 곡선을 만듭니다. C 100,200 200,400 300,200 는 유효한 곡선 명령의 예입니다. BezierSegment 개체를 사용하여 PathGeometry 개체에 해당하는 개체를 정의합니다.

Syntax
C controlPoint1controlPoint2endPoint
-또는-
c controlPoint1controlPoint2endPoint
용어 Description
controlPoint1
곡선의 시작 탄젠트를 결정하는 곡선의 첫 번째 제어점입니다.
controlPoint2
곡선의 끝 탄젠트를 결정하는 곡선의 두 번째 제어점입니다.
끝점
곡선이 그려지는 지점입니다.

2차 베지에 곡선 명령

지정된 제어점(controlPoint)을 사용하여 현재 점과 지정된 끝점 사이에 이차 3차원 곡선을 만듭니다. q 100,200 300,200 는 유효한 이차 베지에 곡선 명령의 예입니다. QuadraticBezierSegment를 사용하여 PathGeometry에 해당하는 항목을 정의합니다.

Syntax
Q 제어점 종료점
-또는-
q 제어점 종점
용어 Description
controlPoint
곡선의 시작 및 끝 탄젠트를 결정하는 곡선의 제어점입니다.
끝점
곡선이 그려지는 지점입니다.

부드러운 입방형 베지어 곡선 명령

현재 점과 지정된 끝점 사이에 입방형 3차원 곡선을 만듭니다. 첫 번째 제어점은 현재 지점을 기준으로 이전 명령의 두 번째 제어점이 반영된 것으로 간주됩니다. 이전 명령이 없거나 이전 명령이 입방형 베지어 곡선 명령이나 부드러운 입방형 베지어 곡선 명령이 아닌 경우 첫 번째 제어점이 현재 점과 일치된다고 가정합니다. 두 번째 제어점인 곡선 끝의 제어점은 controlPoint2에 의해 지정됩니다. 예를 들어 S 100,200 200,300 유효한 부드러운 입방형 베지어 곡선 명령입니다. 이 명령은 앞의 곡선 세그먼트가 있었던 BezierSegment를 사용하여 PathGeometry에 해당하는 항목을 정의합니다.

Syntax
S controlPoint2endPoint
-또는-
s 제어점2 끝점
용어 Description
controlPoint2
곡선의 끝 탄젠트를 결정하는 곡선의 제어점입니다.
끝점
곡선이 그려지는 지점입니다.

부드러운 이차 베지어 곡선 커맨드

현재 점과 지정된 끝점 사이에 이차 베지에 곡선을 만듭니다. 제어점은 현재 지점을 기준으로 이전 명령의 제어점을 반영하는 것으로 간주됩니다. 이전 명령이 없거나 이전 명령이 이차 베지어 곡선 명령이나 부드러운 이차 베지어 곡선 명령이 아닌 경우 제어점은 현재 점과 일치합니다. 이 명령은 앞의 곡선 세그먼트가 있었던 QuadraticBezierSegment를 사용하여 PathGeometry에 해당하는 항목을 정의합니다.

Syntax
T controlPointendPoint
-또는-
t controlPointendPoint
용어 Description
controlPoint
곡선의 시작 및 탄젠트를 결정하는 곡선의 제어점입니다.
끝점
곡선이 그려지는 지점입니다.

타원형 호 명령

현재 점과 지정된 끝점 사이에 타원형 호를 만듭니다. ArcSegment를 사용하여 PathGeometry에 해당하는 항목을 정의합니다.

Syntax
A sizerotationAngleisLargeArcFlagsweepDirectionFlagendPoint
-또는-
a 크기회전각도isLargeArcFlagsweepDirectionFlag끝점
용어 Description
크기 크기
아크의 x 반경 및 y 반경입니다.
rotationAngle 더블
타원의 회전(도)입니다.
isLargeArcFlag 호 각도가 180도 이상이어야 하는 경우 1로 설정합니다. 그렇지 않으면 0으로 설정합니다.
sweepDirectionFlag 원호가 양각 방향으로 그려지면 1로 설정합니다. 그렇지 않으면 0으로 설정합니다.
끝점
호가 그려지는 지점입니다.

닫기 명령

현재 그림을 종료하고 현재 지점을 그림의 시작점에 연결하는 선을 만듭니다. 이 명령은 그림의 마지막 세그먼트와 첫 번째 세그먼트 사이에 줄 조인(모서리)을 만듭니다.

Syntax
Z
-또는-
z

포인트 구문

점의 x 좌표 및 y 좌표를 설명합니다. 다음도 참조하세요: .

Syntax
x,y
-또는-
xy
용어 Description
x 더블
점의 x 좌표입니다.
y 더블
점의 y 좌표입니다.

추가 참고 사항

표준 숫자 값 대신 다음 특수 값을 사용할 수도 있습니다. 이러한 값은 대/소문자를 구분합니다.

  • 무한대: 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 페이지에 바로 붙여넣을 수 있습니다. (그러나 Windows 런타임 XAML은 해당 브러시를 지원하지 않으므로 변환된 XAML의 일부인 경우 RadialGradientBrush를 사용할 수 없습니다.)