Xamarin.Forms 셰이프: 경로 변환

  • 아티클

Download Sample 샘플 다운로드

A Transform 는 개체를 한 좌표 공간에서 다른 좌표 공간으로 변환 Path 하는 방법을 정의합니다. 변환이 개체에 Path 적용되면 개체가 UI에서 렌더링되는 방식이 변경됩니다.

변환은 회전, 크기 조정, 기울이기 및 변환의 네 가지 일반 분류로 분류할 수 있습니다. Xamarin.Forms 는 이러한 각 변환 분류에 대한 클래스를 정의합니다.

  • RotateTransform지정된 으로 회전하는 Path /a0>입니다 Angle.
  • ScaleTransform지정된 크기만큼 ScaleY 개체 ScaleX 의 크기를 조정하는 Path/a0>입니다.
  • SkewTransform지정된 크기만큼 개체 AngleXAngleY 를 기울이는 Path/a0>입니다.
  • TranslateTransform지정된 크기만큼 개체 XY 를 Path 이동합니다.

Xamarin.Forms 또한 더 복잡한 변환을 만들기 위한 다음 클래스를 제공합니다.

  • TransformGroup여러 변환 개체로 구성된 복합 변환을 나타내는 입니다.
  • CompositeTransform- 개체에 여러 변환 작업을 적용합니다 Path .
  • MatrixTransform- 다른 변환 클래스에서 제공하지 않는 사용자 지정 변환을 만듭니다.

이러한 모든 클래스는 현재 변환을 개체로 Matrix 나타내는 형식Matrix의 속성을 정의하는 Value 클래스에서 Transform 파생됩니다. 이 속성은 개체에 BindableProperty 의해 지원됩니다. 즉, 데이터 바인딩의 대상이 될 수 있으며 스타일이 지정됩니다. 구조체에 대한 자세한 내용은 변환 매트릭스를 Matrix 참조 하세요.

변환을 적용하려면 Path변환 클래스를 만들고 속성 값 Path.RenderTransform 으로 설정합니다.

회전 변환

회전 변환은 2D x-y 좌표계의 지정된 지점에 대해 개체를 시계 방향으로 회전 Path 합니다.

클래스에서 Transform 파생되는 클래스는 RotateTransform 다음 속성을 정의합니다.

  • Angle의 형식 double은 시계 방향 회전 각도를 도 단위로 나타냅니다. 이 속성의 기본값은 0.0입니다.
  • CenterX형식 double의 회전 중심점의 x 좌표를 나타냅니다. 이 속성의 기본값은 0.0입니다.
  • CenterY형식 double의 회전 중심점의 y 좌표를 나타냅니다. 이 속성의 기본값은 0.0입니다.

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

및 CenterY 속성은 CenterX 개체가 회전되는 Path 지점을 지정합니다. 이 중심점은 변환된 개체의 좌표 공간에서 표현됩니다. 기본적으로 회전은 개체의 왼쪽 위 모서리인 (0,0)에 Path 적용됩니다.

다음 예제에서는 개체를 회전 Path 하는 방법을 보여줍니다.

<Path Stroke="Black"
      Aspect="Uniform"
      HorizontalOptions="Center"
      HeightRequest="100"
      WidthRequest="100"
      Data="M13.908992,16.207977L32.000049,16.207977 32.000049,31.999985 13.908992,30.109983z">
    <Path.RenderTransform>
        <RotateTransform CenterX="0"
                         CenterY="0"
                         Angle="45" />
    </Path.RenderTransform>
</Path>

이 예제에서는 개체가 Path 왼쪽 위 모서리에 대해 45도 회전됩니다.

크기 조정 변환

배율 변환은 Path 2D x-y 좌표계의 개체 크기를 조정합니다.

클래스에서 Transform 파생되는 클래스는 ScaleTransform 다음 속성을 정의합니다.

  • ScaleXx축 배율 인수를 나타내는 형식 double의 입니다. 이 속성의 기본값은 1.0입니다.
  • ScaleYy축 배율 인수를 나타내는 형식 double의 입니다. 이 속성의 기본값은 1.0입니다.
  • CenterX이 변환의 중심점 x 좌표를 나타내는 형식 double의 입니다. 이 속성의 기본값은 0.0입니다.
  • CenterY이 변환의 중심점의 y 좌표를 나타내는 형식 double의 입니다. 이 속성의 기본값은 0.0입니다.

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

결과 크기 조정에 큰 영향을 미치는 값 ScaleXScaleY 은 다음과 같습니다.

  • 0에서 1 사이의 값은 배율 조정된 개체의 너비와 높이를 줄입니다.
  • 1보다 큰 값은 배율 조정된 개체의 너비와 높이를 늘입니다.
  • 값이 1이면 개체의 크기가 조정되지 않습니다.
  • 음수 값은 배율 개체를 가로 및 세로로 대칭 이동합니다.
  • 0에서 -1 사이의 값은 배율 개체를 대칭 이동하고 너비와 높이를 줄입니다.
  • -1보다 작은 값은 개체를 대칭 이동하고 너비와 높이를 늘입니다.
  • -1 값은 배율 조정된 개체를 대칭 이동하지만 가로 또는 세로 크기는 변경하지 않습니다.

및 CenterY 속성은 CenterX 개체의 Path 크기를 조정할 지점을 지정합니다. 이 중심점은 변환된 개체의 좌표 공간에서 표현됩니다. 기본적으로 크기 조정은 개체의 Path 왼쪽 위 모서리인 (0,0)에 적용됩니다. 변환을 적용할 때 개체가 있는 좌표 공간을 변경하므로 개체를 이동하고 Path 더 크게 표시할 수 있습니다 Path .

다음 예제에서는 개체의 크기를 조정 Path 하는 방법을 보여줍니다.

<Path Stroke="Black"
      Aspect="Uniform"
      HorizontalOptions="Center"
      HeightRequest="100"
      WidthRequest="100"
      Data="M13.908992,16.207977L32.000049,16.207977 32.000049,31.999985 13.908992,30.109983z">
    <Path.RenderTransform>
        <ScaleTransform CenterX="0"
                        CenterY="0"
                        ScaleX="1.5"
                        ScaleY="1.5" />
    </Path.RenderTransform>
</Path>

이 예제에서는 개체 크기 Path 가 1.5배로 조정됩니다.

기울이기 변환

기울이기 변환은 2D x-y 좌표계의 개체를 기울이 Path 며 2D 개체에서 3D 깊이의 환상을 만드는 데 유용합니다.

클래스에서 Transform 파생되는 클래스는 SkewTransform 다음 속성을 정의합니다.

  • AngleX- x축 기울이기 각도를 나타내는 형식 double으로, y축에서 시계 반대 방향으로 측정됩니다. 이 속성의 기본값은 0.0입니다.
  • AngleYx축에서 시계 반대 방향으로 측정되는 y축 기울이기 각도를 나타내는 형식 double의 입니다. 이 속성의 기본값은 0.0입니다.
  • CenterX변환 센터의 x 좌표를 나타내는 형식 double의 입니다. 이 속성의 기본값은 0.0입니다.
  • CenterY- 변환 센터의 y 좌표를 나타내는 형식 double입니다. 이 속성의 기본값은 0.0입니다.

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

기울이기 변형 효과를 예측하려면 AngleX는 원래 좌표계를 기준으로 x축 값을 기울인다는 점을 고려하세요. 따라서 30의 경우 AngleX y축은 원점에서 30도 회전하고 x의 값을 해당 원점에서 30도 기울입니다. 마찬가지로 AngleY , 30개 중 1개는 개체의 Path y 값을 원점으로부터 30도 기울어 줍니다.

참고 항목

개체를 현재 위치로 Path 기울이려면 개체의 중심점으로 및 CenterY 속성을 설정합니다CenterX.

다음 예제에서는 개체를 기울이는 Path 방법을 보여줍니다.

<Path Stroke="Black"
      Aspect="Uniform"
      HorizontalOptions="Center"
      HeightRequest="100"
      WidthRequest="100"
      Data="M13.908992,16.207977L32.000049,16.207977 32.000049,31.999985 13.908992,30.109983z">
    <Path.RenderTransform>
        <SkewTransform CenterX="0"
                       CenterY="0"
                       AngleX="45"
                       AngleY="0" />
    </Path.RenderTransform>
</Path>

이 예제에서는 가운데점(0,0)에서 45도의 가로 기울이기를 개체에 적용 Path 합니다.

변환 변환

변환 변환은 2D x-y 좌표계의 개체를 이동합니다.

클래스에서 Transform 파생되는 클래스는 TranslateTransform 다음 속성을 정의합니다.

  • Xx축을 따라 이동할 거리를 나타내는 형식 double의 입니다. 이 속성의 기본값은 0.0입니다.
  • Yy축을 따라 이동할 거리를 나타내는 형식 double의 입니다. 이 속성의 기본값은 0.0입니다.

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

음수 X 값은 개체를 왼쪽으로 이동하고 양수 값은 개체를 오른쪽으로 이동합니다. 음수 Y 값은 개체를 위로 이동하고 양수 값은 개체를 아래로 이동합니다.

다음 예제에서는 개체를 번역 Path 하는 방법을 보여줍니다.

<Path Stroke="Black"
      Aspect="Uniform"
      HorizontalOptions="Center"
      HeightRequest="100"
      WidthRequest="100"
      Data="M13.908992,16.207977L32.000049,16.207977 32.000049,31.999985 13.908992,30.109983z">
    <Path.RenderTransform>
        <TranslateTransform X="50"
                            Y="50" />
    </Path.RenderTransform>
</Path>

이 예제에서는 개체가 Path 오른쪽으로 디바이스 독립적 단위 50개, 디바이스 독립적 단위 50개 아래로 이동됩니다.

여러 변환

Xamarin.Forms 에는 개체에 여러 변환 적용을 지원하는 두 개의 클래스가 Path 있습니다. 이러한 항목은 다음과 같습니다TransformGroupCompositeTransform. A TransformGroup 는 원하는 순서로 변환을 수행하는 반면 CompositeTransform 변환은 특정 순서로 수행됩니다.

그룹 변환

변환 그룹은 여러 Transform 개체로 구성된 복합 변환을 나타냅니다.

클래스에서 파생되는 클래스는 TransformGroup 개체 컬렉션을 Transform 나타내는 형식TransformCollection의 속성을 정의 Children 합니다.Transform 이 속성은 개체에 BindableProperty 의해 지원됩니다. 즉, 데이터 바인딩의 대상이 될 수 있으며 스타일이 지정됩니다.

변환 순서는 클래스를 사용하는 복합 변환에서 중요합니다 TransformGroup . 예를 들어 경우 먼저 회전 다음 크기 조정, 변환, 결과 얻게 다른 보다 먼저 변환 하는 경우 다음 회전 하 고 확장 합니다. 순서가 중요한 이유 중 하나는 회전 및 크기 조정과 같은 변환이 좌표계의 원점과 관련하여 수행되기 때문입니다. 원점에서 가운데에 있는 개체의 크기를 조정하면 원점에서 멀리 이동된 개체의 크기를 조정하는 것과 다른 결과가 생성됩니다. 마찬가지로, 개체를 회전 하면 원점에 중점을 두는 원본에서 이동 된 개체를 회전 다른 결과 생성 합니다.

다음 예제에서는 클래스를 사용하여 복합 변환을 TransformGroup 수행하는 방법을 보여줍니다.

<Path Stroke="Black"
      Aspect="Uniform"
      HorizontalOptions="Center"
      HeightRequest="100"
      WidthRequest="100"
      Data="M13.908992,16.207977L32.000049,16.207977 32.000049,31.999985 13.908992,30.109983z">
    <Path.RenderTransform>
        <TransformGroup>
            <ScaleTransform ScaleX="1.5"
                            ScaleY="1.5" />
            <RotateTransform Angle="45" />
        </TransformGroup>
    </Path.RenderTransform>
</Path>

이 예제에서는 개체 크기 Path 가 1.5배로 조정된 다음 45도 회전합니다.

복합 변환

복합 변환은 개체에 여러 변환을 적용합니다.

클래스에서 Transform 파생되는 클래스는 CompositeTransform 다음 속성을 정의합니다.

  • CenterX이 변환의 중심점 x 좌표를 나타내는 형식 double의 입니다. 이 속성의 기본값은 0.0입니다.
  • CenterY이 변환의 중심점의 y 좌표를 나타내는 형식 double의 입니다. 이 속성의 기본값은 0.0입니다.
  • ScaleXx축 배율 인수를 나타내는 형식 double의 입니다. 이 속성의 기본값은 1.0입니다.
  • ScaleYy축 배율 인수를 나타내는 형식 double의 입니다. 이 속성의 기본값은 1.0입니다.
  • SkewX- x축 기울이기 각도를 나타내는 형식 double으로, y축에서 시계 반대 방향으로 측정됩니다. 이 속성의 기본값은 0.0입니다.
  • SkewYx축에서 시계 반대 방향으로 측정되는 y축 기울이기 각도를 나타내는 형식 double의 입니다. 이 속성의 기본값은 0.0입니다.
  • Rotation의 형식 double은 시계 방향 회전 각도를 도 단위로 나타냅니다. 이 속성의 기본값은 0.0입니다.
  • TranslateXx축을 따라 이동할 거리를 나타내는 형식 double의 입니다. 이 속성의 기본값은 0.0입니다.
  • TranslateYy축을 따라 이동할 거리를 나타내는 형식 double의 입니다. 이 속성의 기본값은 0.0입니다.

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

A CompositeTransform 는 다음 순서로 변환을 적용합니다.

  1. 크기 조정(ScaleX 및 ScaleY).
  2. 기울이기(SkewX 및 SkewY).
  3. 회전(Rotation).
  4. 번역(TranslateX, TranslateY).

개체에 여러 변환을 다른 순서로 적용하려면 원하는 순서로 변환을 TransformGroup 만들고 삽입해야 합니다.

Important

A CompositeTransform 는 모든 변환에 대해 동일한 중심점을 CenterXCenterY사용합니다. 변환당 다른 중심점을 지정하려면 다음을 TransformGroup사용합니다.

다음 예제에서는 클래스를 사용하여 복합 변환을 CompositeTransform 수행하는 방법을 보여줍니다.

<Path Stroke="Black"
      Aspect="Uniform"
      HorizontalOptions="Center"
      HeightRequest="100"
      WidthRequest="100"
      Data="M13.908992,16.207977L32.000049,16.207977 32.000049,31.999985 13.908992,30.109983z">
    <Path.RenderTransform>
        <CompositeTransform ScaleX="1.5"
                            ScaleY="1.5"
                            Rotation="45"
                            TranslateX="50"
                            TranslateY="50" />
    </Path.RenderTransform>
</Path>

이 예제 Path 에서 개체의 크기는 1.5배로 조정된 다음 45도 회전한 다음 50개의 디바이스 독립적 단위로 변환됩니다.

변환 매트릭스

변환은 2D 공간에서 변환을 수행하는 3x3 아핀 변환 매트릭스의 관점에서 설명할 수 있습니다. 이 3x3 행렬은 세 개의 행과 세 개의 값 열로 구성된 컬렉션인 구조체로 double 표시됩니다Matrix.

구조체는 Matrix 다음 속성을 정의합니다.

  • Determinant행렬의 결정자를 가져오는 형식 double의 입니다.
  • HasInverse행렬을 반전할 수 있는지 여부를 나타내는 형식 bool의 입니다.
  • IdentityID 행렬을 가져오는 형식 Matrix의 입니다.
  • HasIdentity행렬이 ID 행렬인지 여부를 나타내는 형식 bool의 입니다.
  • M11행렬의 첫 번째 행과 첫 번째 열의 값을 나타내는 형식 double의 입니다.
  • M12행렬의 첫 번째 행과 두 번째 열의 값을 나타내는 형식 double의 입니다.
  • M21는 행렬의 두 번째 행과 첫 번째 열의 값을 나타내는 형식 double의 입니다.
  • M22행렬의 두 번째 행과 두 번째 열의 값을 나타내는 형식 double의 입니다.
  • OffsetX행렬의 세 번째 행과 첫 번째 열의 값을 나타내는 형식 double의 입니다.
  • OffsetY행렬의 세 번째 행과 두 번째 열의 값을 나타내는 형식 double의 입니다.

및 속성은 OffsetX 각각 x축과 OffsetY y축을 따라 좌표 공간을 변환할 크기를 지정하기 때문에 이름이 지정됩니다.

또한 구조체는 Matrix 행렬 값(예Append: , InvertMultiplyPrepend 등)을 조작하는 데 사용할 수 있는 일련의 메서드를 노출합니다.

다음 표에서는 행렬의 구조를 보여줍니다.Xamarin.Forms

M11

M12

0.0

M21

M22

0.0

OffsetX

OffsetY

1.0

참고 항목

아핀 변환 행렬의 최종 열은 0,0,1과 같으므로 처음 두 열의 멤버만 지정해야 합니다.

행렬 값을 조작하여 개체를 회전, 크기 조정, 기울이기 및 변환할 Path 수 있습니다. 예를 들어 값을 100으로 변경 OffsetX 하면 x축을 따라 개체 100 디바이스 독립적 단위를 이동할 Path 수 있습니다. 값을 3으로 변경 M22 하면 개체를 현재 높이의 Path 3배로 늘리는 데 사용할 수 있습니다. 두 값을 모두 변경하면 x축을 Path 따라 개체 100 디바이스 독립적 단위를 이동하고 높이를 3 배 늘입니다. 또한 아핀 변환 매트릭스를 곱하여 회전 및 기울이기와 같은 선형 변환의 수와 변환을 형성할 수 있습니다.

사용자 지정 변환

클래스에서 Transform 파생되는 클래스는 MatrixTransform 변환을 정의하는 행렬을 Matrix 나타내는 형식Matrix의 속성을 정의합니다. 이 속성은 개체에 BindableProperty 의해 지원됩니다. 즉, 데이터 바인딩의 대상이 될 수 있으며 스타일이 지정됩니다.

, , ScaleTransformRotateTransform또는 SkewTransform 개체를 사용하여 설명할 수 있는 TranslateTransform모든 변환은 을 통해 동일하게 설명할 MatrixTransform수 있습니다. 그러나 TranslateTransform, ScaleTransform, RotateTransform및 SkewTransform 클래스는 벡터 구성 요소를 설정하는 것보다 개념화하기 쉽습니다 Matrix. 따라서 MatrixTransform 클래스는 일반적으로 , ScaleTransform또는 SkewTransformTranslateTransform 클래스에서 제공하지 않는 사용자 지정 변환을 RotateTransform만드는 데 사용됩니다.

다음 예제에서는 다음을 사용하여 개체를 Path 변환하는 방법을 보여줍니다.MatrixTransform

<Path Stroke="Black"
      Aspect="Uniform"
      HorizontalOptions="Center"
      Data="M13.908992,16.207977L32.000049,16.207977 32.000049,31.999985 13.908992,30.109983z">
    <Path.RenderTransform>
        <MatrixTransform>
            <MatrixTransform.Matrix>
                <!-- M11 stretches, M12 skews -->
                <Matrix OffsetX="10"
                        OffsetY="100"
                        M11="1.5"
                        M12="1" />
            </MatrixTransform.Matrix>
        </MatrixTransform>
    </Path.RenderTransform>
</Path>

이 예제 Path 에서는 X 차원과 Y 차원 모두에서 개체가 늘어나고, 기울어지고, 오프셋됩니다.

또는 다음과 같이 기본 제공되는 Xamarin.Forms형식 변환기를 사용하는 간단한 형식으로 작성할 수 있습니다.

<Path Stroke="Black"
      Aspect="Uniform"
      HorizontalOptions="Center"
      Data="M13.908992,16.207977L32.000049,16.207977 32.000049,31.999985 13.908992,30.109983z">
    <Path.RenderTransform>
        <MatrixTransform Matrix="1.5,1,0,1,10,100" />
    </Path.RenderTransform>
</Path>

이 예제 Matrix 에서 속성은 6개의 멤버M22OffsetYM11M12M21OffsetX로 구성된 쉼표로 구분된 문자열로 지정됩니다. 멤버는 이 예제에서 쉼표로 구분되지만 하나 이상의 공백으로 구분할 수도 있습니다.

또한 이전 예제는 속성 값 RenderTransform 과 동일한 6개의 멤버를 지정하여 더욱 간소화할 수 있습니다.

<Path Stroke="Black"
      Aspect="Uniform"
      HorizontalOptions="Center"
      RenderTransform="1.5 1 0 1 10 100"
      Data="M13.908992,16.207977L32.000049,16.207977 32.000049,31.999985 13.908992,30.109983z" />