Xamarin.Forms 셰이프: 경로 태그 구문

Download Sample 샘플 다운로드

Xamarin.Forms 경로 태그 구문을 사용하면 XAML에서 경로 기하 도형을 압축적으로 지정할 수 있습니다. 구문은 속성에 대한 문자열 값 Path.Data 으로 지정됩니다.

<Path Stroke="Black"
      Data="M13.908992,16.207977 L32.000049,16.207977 32.000049,31.999985 13.908992,30.109983Z" />

경로 태그 구문은 선택적 FillRule 값과 하나 이상의 그림 설명으로 구성됩니다. 이 구문은 [fillRule]figureDescription[figureDescription]으로 <Path Data="표현할 수 있습니다. * " ... />

이 구문에서:

  • fillRule은 기하 도형 EvenOddNonzeroFillRule에서 사용 여부를 지정하는 선택 사항 Xamarin.Forms.Shapes.FillRule 입니다. F0 채우기 규칙을 지정 EvenOdd 하는 데 사용되는 반면 F1 채우기 규칙을 지정 Nonzero 하는 데 사용됩니다. 채우기 규칙에 대한 자세한 내용은 셰이프: 채우기 규칙을 참조 Xamarin.Forms 하세요.
  • figureDescription 은 이동 명령, 그리기 명령 및 선택적 close 명령으로 구성된 그림을 나타냅니다. 이동 명령은 그림의 시작점을 지정합니다. 그리기 명령은 그림의 내용을 설명하고 선택적 close 명령은 그림을 닫습니다.

위의 예제에서 경로 태그 구문은 이동 명령(), 줄 명령(M)을 사용하는 일련의 직선을 사용하여 시작점을 지정하고 닫기 명령L(Z)을 사용하여 경로를 닫습니다.

경로 태그 구문에서는 명령 앞이나 뒤에 공백이 필요하지 않습니다. 또한 두 숫자를 쉼표 또는 공백으로 구분할 필요는 없지만 문자열이 명확하지 않은 경우에만 이 작업을 수행할 수 있습니다.

경로 태그 구문은 SVG(Scalable Vector Graphics) 이미지 경로 정의와 호환되므로 SVG 형식에서 그래픽을 포팅하는 데 유용할 수 있습니다.

경로 태그 구문은 XAML에서 사용할 수 있지만 클래스에서 메서드 PathGeometryConverterGeometry 호출 ConvertFromInvariantString 하여 코드의 개체로 변환할 수 있습니다.

Geometry pathData = (Geometry)new PathGeometryConverter().ConvertFromInvariantString("M13.908992,16.207977 L32.000049,16.207977 32.000049,31.999985 13.908992,30.109983Z");

이동 명령

이동 명령은 새 그림의 시작점을 지정합니다. 이 명령의 구문은 startPoint 또는 mstartPoint입니다M.

이 구문 에서 startPointPoint 새 그림의 시작점을 지정하는 구조체입니다. 이동 명령 뒤의 여러 점을 나열하면 해당 점에 선이 그려집니다.

M 10,10 는 유효한 이동 명령의 예입니다.

그리기 명령

그리기 명령은 여러 도형 명령으로 구성될 수 있습니다. 다음 그리기 명령을 사용할 수 있습니다.

  • 줄(L 또는 l)입니다.
  • 가로줄(H 또는 h).
  • 세로선(V 또는 v).
  • 타원형 호(A 또는 a).
  • 입방형 베지어 곡선(C 또는 c).
  • 이차 베지어 곡선(Q 또는 q).
  • 부드러운 입방형 베지어 곡선(S 또는 s).
  • 부드러운 이차형 베지어 곡선(T 또는 t).

각 그리기 명령은 대/소문자를 구분하지 않는 문자로 지정됩니다. 동일한 형식의 두 개 이상의 명령을 순차적으로 입력하는 경우 중복 명령 항목을 생략할 수 있습니다. 예를 들어 L 100,200 300,400 .L 100,200 L 300,400

선 명령

줄 명령은 현재 점과 지정된 끝점 사이에 직선을 만듭니다. 이 명령의 구문은 endPoint 또는 lendPoint입니다L.

이 구문 에서 endPointPoint 줄의 끝점을 나타내는 것입니다.

L 20,30L 20 30은 유효한 선 명령의 예입니다.

직선을 개체로 PathGeometry 만드는 방법에 대한 자세한 내용은 LineSegment 만들기를 참조하세요.

가로줄 명령

가로줄 명령은 현재 점과 지정된 x 좌표 사이에 가로 선을 만듭니다. 이 명령의 구문은 x 또는 hx입니다H.

이 구문 에서 xdouble 선 끝점의 x 좌표를 나타내는 것입니다.

H 90은 유효한 수평선 명령의 예입니다.

세로선 명령

세로줄 명령은 현재 점과 지정된 y 좌표 사이에 세로 선을 만듭니다. 이 명령의 구문은 y 또는 vy입니다V.

이 구문 에서 ydouble 선 끝점의 y 좌표를 나타내는 것입니다.

V 90은 유효한 수직선 명령의 예입니다.

타원형 호 명령

타원형 호 명령은 현재 점과 지정된 끝점 사이에 타원형 호를 만듭니다. 이 명령의 구문은 AsizerotationAngleisLargeArcFlagsweepDirectionFlagendPoint 또는 asizerotationAngleisLargeArcFlagsweepDirectionFlagendPoint입니다.

이 구문에서:

  • sizeSize 호의 x-반경과 y 반경을 나타내는 값입니다.
  • rotationAngledouble 는 타원의 회전을 도 단위로 나타내는 것입니다.
  • isLargeArcFlag 원호의 각도가 180도 이상이어야 하는 경우 1로 설정해야 합니다. 그렇지 않으면 0으로 설정합니다.
  • sweepDirectionFlag 원호가 양각 방향으로 그려지면 1로 설정해야 합니다. 그렇지 않으면 0으로 설정합니다.
  • endPointPoint 호가 그려지는 값입니다.

A 150,150 0 1,0 150,-150 는 유효한 타원형 호 명령의 예입니다.

타원형 호를 개체로 PathGeometry 만드는 방법에 대한 자세한 내용은 ArcSegment 만들기를 참조하세요.

입방형 베지어 곡선 명령

입방형 베지어 곡선 명령은 지정된 두 제어점을 사용하여 현재 점과 지정된 끝점 사이에 입방형 베지어 곡선을 만듭니다. 이 명령의 구문은 CcontrolPoint1controlPoint2endPoint 또는c controlPoint1 controlPoint2엔드포인트입니다.

이 구문에서:

  • controlPoint1Point 곡선의 첫 번째 제어점을 나타내는 것으로, 곡선의 시작 탄젠트를 결정합니다.
  • controlPoint2Point 곡선의 끝 탄젠트를 결정하는 곡선의 두 번째 제어점을 나타내는 것입니다.
  • endPointPoint 곡선이 그려지는 지점을 나타내는 것입니다.

C 100,200 200,400 300,200 는 유효한 입방형 베지어 곡선 명령의 예입니다.

입방형 베지어 곡선을 개체로 PathGeometry 만드는 방법에 대한 자세한 내용은 BezierSegment 만들기를 참조하세요.

4차원 베지어 곡선 명령

이차 베지어 곡선 명령은 지정된 제어점을 사용하여 현재 점과 지정된 끝점 사이에 이차 베지어 곡선을 만듭니다. 이 명령의 구문은 controlPoint endPoint 또는 controlPoint endPoint입니다. Qq

이 구문에서:

  • controlPointPoint 곡선의 시작 및 끝 탄젠트를 결정하는 곡선의 제어점을 나타내는 것입니다.
  • endPointPoint 곡선이 그려지는 지점을 나타내는 것입니다.

Q 100,200 300,200은 유효한 정방형 3차원 곡선 명령의 예입니다.

이차 베지어 곡선을 개체로 PathGeometry 만드는 방법에 대한 자세한 내용은 QuadraticBezierSegment 만들기를 참조 하세요.

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

부드러운 입방형 베지어 곡선 명령은 지정된 제어점을 사용하여 현재 점과 지정된 끝점 사이에 입방형 베지어 곡선을 만듭니다. 이 명령의 구문은 controlPoint2 endPoint 또는s controlPoint2 엔드포인트입니다. S

이 구문에서:

  • controlPoint2Point 곡선의 끝 탄젠트를 결정하는 곡선의 두 번째 제어점을 나타내는 것입니다.
  • endPointPoint 곡선이 그려지는 지점을 나타내는 것입니다.

첫 번째 제어점은 현재 지점을 기준으로 이전 명령의 두 번째 제어점이 반영된 것으로 간주됩니다. 이전 명령이 없거나 이전 명령이 입방형 베지어 곡선 명령이나 부드러운 입방형 베지어 곡선 명령이 아닌 경우 첫 번째 제어점은 현재 점과 일치하는 것으로 간주됩니다.

S 100,200 200,300 는 유효한 부드러운 입방형 베지어 곡선 명령의 예입니다.

부드러운 이차형 베지어 곡선 명령

부드러운 이차 베지어 곡선 명령은 제어점을 사용하여 현재 점과 지정된 끝점 사이에 이차 베지어 곡선을 만듭니다. 이 명령의 구문은 endPoint 또는 tendPoint입니다T.

이 구문 에서 endPointPoint 곡선이 그려지는 지점을 나타내는 것입니다.

제어점은 현재 점을 기준으로 이전 명령의 제어점의 리플렉션으로 간주됩니다. 이전 명령이 없거나 이전 명령이 이차형 베지어 곡선 또는 부드러운 이차형 Bezier 곡선 명령이 아닌 경우 제어점은 현재 점과 일치하는 것으로 간주됩니다.

T 100,30 는 유효한 부드러운 2차원 입방형 베지어 곡선 명령의 예입니다.

닫기 명령

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

close 명령에 대한 구문은 다음과 Zz같습니다.

추가 값

표준 숫자 값 대신 다음과 같은 대/소문자를 구분하는 특수 값을 사용할 수도 있습니다.

  • Infinity 는 .를 double.PositiveInfinity나타냅니다.
  • -Infinity 는 .를 double.NegativeInfinity나타냅니다.
  • NaN 는 .를 double.NaN나타냅니다.

또한 대/소문자를 구분하지 않는 과학적 표기법을 사용할 수도 있습니다. 따라서 +1.e17 유효한 값입니다.