영어로 읽기

다음을 통해 공유

Xamarin.Forms 셰이프: 경로

  • 아티클
  • 2020. 09. 24.

클래스는 Path 클래스에서 Shape 파생되며 곡선 및 복합 셰이프를 그리는 데 사용할 수 있습니다. 이러한 곡선과 도형은 종종 개체를 사용하여 Geometry 설명됩니다. 클래스가 클래스에서 상속하는 Path 속성에 대한 자세한 내용은 Shapes를 참조 Xamarin.Forms 하세요.Shape

Path는 다음 속성을 정의합니다.

  • Data그릴 도형을 지정하는 형식 Geometry의 .입니다.
  • RenderTransform의 형식 Transform으로, 그리기 전에 경로의 기하 도형에 적용되는 변환을 나타냅니다.

이러한 속성은 BindableProperty 개체에서 지원하며, 따라서 데이터 바인딩의 대상이 될 수 있고 스타일이 지정될 수 있습니다.

변환에 대한 자세한 내용은 경로 변환을 참조 Xamarin.Forms 하세요.

경로 만들기

경로를 그리려면 개체를 Path 만들고 해당 Data 속성을 설정합니다. 속성을 설정하는 방법에는 두 가지가 있습니다 Data .

  • 경로 태그 구문을 사용하여 XAML에서 문자열 값을 Data 설정할 수 있습니다. 이 방법을 사용하면 값이 Path.Data 그래픽에 serialization 형식을 사용합니다. 일반적으로 이 문자열 값을 만든 후에는 직접 편집하지 않습니다. 대신 디자인 도구를 사용하여 데이터를 조작하고 속성에서 사용할 수 Data 있는 문자열 조각으로 내보냅니다.
  • 속성을 개체로 Data Geometry 설정할 수 있습니다. 이는 특정 Geometry 개체이거나 GeometryGroup 여러 기하 도형 개체를 단일 개체로 결합할 수 있는 컨테이너 역할을 하는 개체일 수 있습니다.

경로 태그 구문을 사용하여 경로 만들기

다음 XAML 예제에서는 경로 태그 구문을 사용하여 삼각형을 그리는 방법을 보여 줍니다.

<Path Data="M 10,100 L 100,100 100,50Z"
      Stroke="Black"
      Aspect="Uniform"
      HorizontalOptions="Start" />

문자열은 Data 경로에 대한 절대 시작점을 설정하는 move 명령 M으로 시작합니다. L 는 시작점에서 지정된 끝점까지 직선을 만드는 줄 명령입니다. Z 는 현재 지점을 시작점에 연결하는 선을 만드는 close 명령입니다. 결과는 삼각형입니다.

경로 삼각형

경로 태그 구문에 대한 자세한 내용은 경로 태그 구문을 참조 Xamarin.Forms 하세요.

Geometry 개체를 사용하여 Path 만들기

개체의 속성을 설정하는 Path Data 데 사용되는 개체를 사용하여 Geometry 곡선 및 셰이프를 설명할 수 있습니다. 선택할 수 있는 다양한 Geometry개체가 있습니다. EllipseGeometry, LineGeometry 및 RectangleGeometry 클래스는 비교적 간단한 셰이프를 설명합니다. 좀 더 복잡한 도형이나 곡선을 만들려면 PathGeometry를 사용하세요.

PathGeometry 개체는 하나 이상의 PathFigure 개체로 구성됩니다. 각 PathFigure 개체는 다른 도형을 나타냅니다. 각 PathFigure 개체는 각각 셰이프의 연결 부분을 나타내는 하나 이상의 PathSegment 개체로 구성됩니다. 세그먼트 형식에는 다음 LineSegment, BezierSegment및 ArcSegment 클래스가 포함됩니다.

다음 XAML 예제에서는 개체를 사용하여 삼각형을 그리는 PathGeometry 방법을 보여줍니다.

<Path Stroke="Black"
      Aspect="Uniform"
      HorizontalOptions="Start">
    <Path.Data>
        <PathGeometry>
            <PathGeometry.Figures>
                <PathFigureCollection>
                    <PathFigure IsClosed="True"
                                StartPoint="10,100">
                        <PathFigure.Segments>
                            <PathSegmentCollection>
                                <LineSegment Point="100,100" />
                                <LineSegment Point="100,50" />
                            </PathSegmentCollection>
                        </PathFigure.Segments>
                    </PathFigure>
                </PathFigureCollection>
            </PathGeometry.Figures>
        </PathGeometry>
    </Path.Data>
</Path>

이 예제에서 삼각형의 시작점은 (10,100)입니다. 선 세그먼트는 (10,100)에서 (100,100) 및 (100,100)에서 (100,50)까지 그려집니다. 그런 다음, 속성이 로 설정true되기 때문에 첫 번째 세그먼트와 마지막 세그먼트가 PathFigure.IsClosed 연결됩니다. 결과는 삼각형입니다.

경로 삼각형

기하 도형에 대한 자세한 내용은 기하 도형을 참조 Xamarin.Forms 하세요.