Udostępnij za pośrednictwem

Xamarin.Forms Kształty: przekształcenia ścieżki

  • Artykuł

Obiekt Transform definiuje sposób przekształcania Path obiektu z jednej przestrzeni współrzędnej na inną przestrzeń współrzędną. Po zastosowaniu Path przekształcenia do obiektu zmienia sposób renderowania obiektu w interfejsie użytkownika.

Przekształcenia można podzielić na cztery klasyfikacje ogólne: rotację, skalowanie, niesymetryczność i tłumaczenie. Xamarin.Forms definiuje klasę dla każdej z tych klasyfikacji przekształceń:

  • RotateTransform, który obraca element Path według określonego Angleelementu .
  • ScaleTransform, który skaluje Path obiekt według określonej ScaleX wartości i ScaleY .
  • SkewTransform, który wypacza Path obiekt o określone AngleX wartości i AngleY .
  • TranslateTransform, który przenosi Path obiekt według określonej X wartości i Y .

Xamarin.Forms Udostępnia również następujące klasy do tworzenia bardziej złożonych przekształceń:

  • TransformGroup, który reprezentuje transformację złożoną składającą się z wielu obiektów transformacji.
  • CompositeTransform, który stosuje wiele operacji przekształcania Path do obiektu.
  • MatrixTransform, który tworzy niestandardowe przekształcenia, które nie są udostępniane przez inne klasy transformacji.

Wszystkie te klasy pochodzą z Transform klasy, która definiuje właściwość typu Matrix, która reprezentuje bieżącą Value transformację Matrix jako obiekt. Ta właściwość jest wspierana BindableProperty przez obiekt, co oznacza, że może być obiektem docelowym powiązań danych i stylizowany. Aby uzyskać więcej informacji na temat Matrix struktury, zobacz Przekształcanie macierzy.

Aby zastosować przekształcenie do Pathklasy , należy utworzyć klasę transform i ustawić ją jako wartość Path.RenderTransform właściwości.

Przekształcanie rotacji

Przekształcenie rotacji obraca Path obiekt zgodnie z ruchem wskazówek zegara o określonym punkcie w układzie współrzędnych 2D x-y.

Klasa RotateTransform , która pochodzi z Transform klasy, definiuje następujące właściwości:

  • Angle, typu double, reprezentuje kąt, w stopniach, obrotu zgodnie z ruchem wskazówek zegara. Wartość domyślna tej właściwości to 0,0.
  • CenterX, typu double, reprezentuje współrzędną x punktu środkowego obrotu. Wartość domyślna tej właściwości to 0,0.
  • CenterY, typu double, reprezentuje współrzędną y punktu środkowego obrotu. Wartość domyślna tej właściwości to 0,0.

Te właściwości są wspierane przez BindableProperty obiekty, co oznacza, że mogą być obiektami docelowymi powiązań danych i stylizowanymi.

Właściwości CenterX i CenterY określają punkt, o którym Path obiekt jest obracany. Ten punkt środkowy jest wyrażony w przestrzeni współrzędnej przekształconego obiektu. Domyślnie rotacja jest stosowana do (0,0), czyli lewego górnego Path rogu obiektu.

W poniższym przykładzie pokazano, jak obrócić Path obiekt:

<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>

W tym przykładzie Path obiekt jest obracany o 45 stopni w lewym górnym rogu.

Skalowanie transformacji

Przekształcenie skalowania skaluje obiekt w układzie Path współrzędnych 2D x-y.

Klasa ScaleTransform , która pochodzi z Transform klasy, definiuje następujące właściwości:

  • ScaleX, typu double, który reprezentuje współczynnik skalowania osi x. Wartość domyślna tej właściwości to 1.0.
  • ScaleY, typu double, który reprezentuje współczynnik skalowania osi y. Wartość domyślna tej właściwości to 1.0.
  • CenterX, typu double, który reprezentuje współrzędną x punktu środkowego tej transformacji. Wartość domyślna tej właściwości to 0,0.
  • CenterY, typu double, który reprezentuje współrzędną y punktu środkowego tej transformacji. Wartość domyślna tej właściwości to 0,0.

Te właściwości są wspierane przez BindableProperty obiekty, co oznacza, że mogą być obiektami docelowymi powiązań danych i stylizowanymi.

Wartość ScaleX i ScaleY mają ogromny wpływ na wynikowe skalowanie:

  • Wartości z zakresu od 0 do 1 zmniejszają szerokość i wysokość skalowanego obiektu.
  • Wartości większe niż 1 zwiększają szerokość i wysokość skalowanego obiektu.
  • Wartości 1 wskazują, że obiekt nie jest skalowany.
  • Wartości ujemne przerzucają obiekt skalowania w poziomie i w pionie.
  • Wartości z zakresu od 0 do -1 przerzucają obiekt skalowania i zmniejszają jego szerokość i wysokość.
  • Wartości mniejsze niż -1 przerzucają obiekt i zwiększają jego szerokość i wysokość.
  • Wartości -1 przerzucają przeskalowany obiekt, ale nie zmieniają rozmiaru poziomego ani pionowego.

Właściwości CenterX i CenterY określają punkt, o którym Path obiekt jest skalowany. Ten punkt środkowy jest wyrażony w przestrzeni współrzędnej przekształconego obiektu. Domyślnie skalowanie jest stosowane do (0,0), czyli lewego górnego Path rogu obiektu. Ma to wpływ na przeniesienie obiektu i pojawienie się go większego, ponieważ po zastosowaniu Path przekształcenia zmieniasz przestrzeń współrzędną, w której Path znajduje się obiekt.

W poniższym przykładzie pokazano, jak skalować Path obiekt:

<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>

W tym przykładzie Path obiekt jest skalowany do 1,5 razy większy.

Przekształć niesymetryczne

Przekrzywiona transformacja wypacza obiekt w układzie współrzędnych 2D x-y i przydaje Path się do tworzenia iluzji głębokości 3D w obiekcie 2D.

Klasa SkewTransform , która pochodzi z Transform klasy, definiuje następujące właściwości:

  • AngleX, typu double, który reprezentuje kąt niesymetryczności osi x, który jest mierzony w stopniach odwrotnie od osi y. Wartość domyślna tej właściwości to 0,0.
  • AngleY, typu double, który reprezentuje kąt niesymetryczności osi y, który jest mierzony w stopniach odwrotnie od osi x. Wartość domyślna tej właściwości to 0,0.
  • CenterX, typu double, który reprezentuje współrzędną x centrum transformacji. Wartość domyślna tej właściwości to 0,0.
  • CenterY, typu double, który reprezentuje współrzędną y centrum transformacji. Wartość domyślna tej właściwości to 0,0.

Te właściwości są wspierane przez BindableProperty obiekty, co oznacza, że mogą być obiektami docelowymi powiązań danych i stylizowanymi.

Aby przewidzieć efekt przekształcenia niesymetryczności, należy wziąć pod uwagę, że AngleX wartości osi x są niesymetryczne względem oryginalnego układu współrzędnych. W związku z tym dla AngleX 30 osi y obraca się 30 stopni przez źródło i wypacza wartości w x o 30 stopni od tego źródła. Podobnie, AngleY 30 wypacza wartości Path y obiektu o 30 stopni od źródła.

Uwaga

Aby skośnić Path obiekt na miejscu, ustaw CenterX właściwości i CenterY na punkt środkowy obiektu.

W poniższym przykładzie pokazano, jak wypaczyć Path obiekt:

<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>

W tym przykładzie do obiektu zastosowano Path niesymetryczność poziomą 45 stopni z punktu środkowego (0,0).

Tłumaczenie przekształcenia

Przekształcenie tłumaczenia przenosi obiekt w układzie współrzędnych 2D x-y.

Klasa TranslateTransform , która pochodzi z Transform klasy, definiuje następujące właściwości:

  • X, typu double, który reprezentuje odległość do poruszania się wzdłuż osi x. Wartość domyślna tej właściwości to 0,0.
  • Y, typu double, który reprezentuje odległość do poruszania się wzdłuż osi y. Wartość domyślna tej właściwości to 0,0.

Te właściwości są wspierane przez BindableProperty obiekty, co oznacza, że mogą być obiektami docelowymi powiązań danych i stylizowanymi.

Wartości ujemne X przenoszą obiekt do lewej strony, a wartości dodatnie przenoszą obiekt z prawej strony. Wartości ujemne Y przenoszą obiekt w górę, a wartości dodatnie przenoszą obiekt w dół.

W poniższym przykładzie pokazano, jak przetłumaczyć Path obiekt:

<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>

W tym przykładzie Path obiekt jest przenoszony o 50 jednostek niezależnych od urządzenia po prawej stronie i 50 jednostek niezależnych od urządzenia.

Wiele przekształceń

Xamarin.Forms ma dwie klasy, które obsługują stosowanie wielu przekształceń do Path obiektu. TransformGroupSą to , i CompositeTransform. Element TransformGroup wykonuje przekształcenia w dowolnej żądanej kolejności, a CompositeTransform element wykonuje przekształcenia w określonej kolejności.

Przekształcanie grup

Grupy przekształcania reprezentują złożone przekształcenia składające się z wielu Transform obiektów.

Klasa TransformGroup , która pochodzi z Transform klasy, definiuje Children właściwość typu TransformCollection, która reprezentuje kolekcję Transform obiektów. Ta właściwość jest wspierana BindableProperty przez obiekt, co oznacza, że może być obiektem docelowym powiązań danych i stylizowany.

Kolejność przekształceń jest ważna w transformacji złożonej TransformGroup , która używa klasy . Jeśli na przykład najpierw obrócisz, przeprowadź skalowanie, a następnie przetłumacz, uzyskasz inny wynik niż w przypadku pierwszego tłumaczenia, a następnie obróć, a następnie przeprowadź skalowanie. Jedną z przyczyn jest to, że przekształcenia, takie jak rotacja i skalowanie, są wykonywane w odniesieniu do źródła układu współrzędnych. Skalowanie obiektu, który jest wyśrodkowany na początku, daje inny wynik w celu skalowania obiektu, który został przeniesiony z punktu początkowego. Podobnie obracanie obiektu, który jest wyśrodkowany na początku, powoduje inny wynik niż obracanie obiektu, który został przeniesiony z punktu początkowego.

W poniższym przykładzie pokazano, jak wykonać transformację złożoną przy użyciu TransformGroup klasy :

<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>

W tym przykładzie Path obiekt jest skalowany do 1,5 razy większy, a następnie obracany o 45 stopni.

Przekształcenia złożone

Przekształcenie złożone stosuje wiele przekształceń do obiektu.

Klasa CompositeTransform , która pochodzi z Transform klasy, definiuje następujące właściwości:

  • CenterX, typu double, który reprezentuje współrzędną x punktu środkowego tej transformacji. Wartość domyślna tej właściwości to 0,0.
  • CenterY, typu double, który reprezentuje współrzędną y punktu środkowego tej transformacji. Wartość domyślna tej właściwości to 0,0.
  • ScaleX, typu double, który reprezentuje współczynnik skalowania osi x. Wartość domyślna tej właściwości to 1.0.
  • ScaleY, typu double, który reprezentuje współczynnik skalowania osi y. Wartość domyślna tej właściwości to 1.0.
  • SkewX, typu double, który reprezentuje kąt niesymetryczności osi x, który jest mierzony w stopniach odwrotnie od osi y. Wartość domyślna tej właściwości to 0,0.
  • SkewY, typu double, który reprezentuje kąt niesymetryczności osi y, który jest mierzony w stopniach odwrotnie od osi x. Wartość domyślna tej właściwości to 0,0.
  • Rotation, typu double, reprezentuje kąt, w stopniach, obrotu zgodnie z ruchem wskazówek zegara. Wartość domyślna tej właściwości to 0,0.
  • TranslateX, typu double, który reprezentuje odległość do poruszania się wzdłuż osi x. Wartość domyślna tej właściwości to 0,0.
  • TranslateY, typu double, który reprezentuje odległość do poruszania się wzdłuż osi y. Wartość domyślna tej właściwości to 0,0.

Te właściwości są wspierane przez BindableProperty obiekty, co oznacza, że mogą być obiektami docelowymi powiązań danych i stylizowanymi.

Zastosowanie CompositeTransform przekształceń w tej kolejności:

  1. Skaluj (ScaleX i ScaleY).
  2. Niesymetryczność (SkewX i SkewY).
  3. Obróć (Rotation).
  4. Przetłumacz (TranslateX, TranslateY).

Jeśli chcesz zastosować wiele przekształceń do obiektu w innej kolejności, należy utworzyć TransformGroup i wstawić przekształcenia w zamierzonej kolejności.

Ważne

Element CompositeTransform używa tych samych punktów CenterX środkowych i CenterY, dla wszystkich przekształceń. Jeśli chcesz określić różne punkty środkowe na przekształcenie, użyj elementu TransformGroup,

W poniższym przykładzie pokazano, jak wykonać transformację złożoną przy użyciu CompositeTransform klasy :

<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>

W tym przykładzie Path obiekt jest skalowany do 1,5 razy większy, a następnie obracany o 45 stopni, a następnie tłumaczony przez 50 jednostek niezależnych od urządzenia.

Macierz przekształcania

Przekształcenie można opisać w postaci macierzy transformacji 3x3, która wykonuje przekształcenia w przestrzeni 2D. Ta macierz 3x3 jest reprezentowana przez Matrix strukturę, która jest kolekcją trzech wierszy i trzech kolumn double wartości.

Struktura Matrix definiuje następujące właściwości:

  • Determinant, typu double, który pobiera determinant macierzy.
  • HasInverse, typu bool, który wskazuje, czy macierz jest niewzględna.
  • Identity, typu Matrix, który pobiera macierz tożsamości.
  • HasIdentity, typu bool, który wskazuje, czy macierz jest macierzą tożsamości.
  • M11, typu double, który reprezentuje wartość pierwszego wiersza i pierwszej kolumny macierzy.
  • M12, typu double, który reprezentuje wartość pierwszego wiersza i drugiej kolumny macierzy.
  • M21, typu double, który reprezentuje wartość drugiego wiersza i pierwszej kolumny macierzy.
  • M22, typu double, który reprezentuje wartość drugiego wiersza i drugiej kolumny macierzy.
  • OffsetX, typu double, który reprezentuje wartość trzeciego wiersza i pierwszej kolumny macierzy.
  • OffsetY, typu double, który reprezentuje wartość trzeciego wiersza i drugiej kolumny macierzy.

Właściwości OffsetX i OffsetY są tak nazwane, ponieważ określają ilość, aby przetłumaczyć przestrzeń współrzędnych wzdłuż osi x i y odpowiednio.

Ponadto struktura uwidacznia szereg metod, Matrix których można użyć do manipulowania wartościami macierzy, w tym Append, Invert, MultiplyPrepend i wiele innych.

W poniższej Xamarin.Forms tabeli przedstawiono strukturę macierzy:

M11

M12

0,0

M21

M22

0,0

Przesunięcie X

Przesunięcie

1.0

Uwaga

Macierz przekształcenia affine ma końcową kolumnę równą (0,0,1), więc należy określić tylko elementy członkowskie w dwóch pierwszych kolumnach.

Manipulując wartościami macierzy, można obracać, skalować, niesymetrycznie i tłumaczyć Path obiekty. Jeśli na przykład zmienisz OffsetX wartość na 100, możesz użyć jej przeniesienia Path obiektu 100 jednostek niezależnych od urządzenia wzdłuż osi x. Jeśli zmienisz M22 wartość na 3, możesz użyć jej do rozciągnięcia Path obiektu na trzy razy więcej niż jego bieżąca wysokość. Jeśli zmienisz obie wartości, przeniesiesz Path obiekt 100 jednostek niezależnych od urządzenia wzdłuż osi x i rozciągniesz jego wysokość przez współczynnik 3. Ponadto macierze przekształcania affine można mnożyć w celu utworzenia dowolnej liczby przekształceń liniowych, takich jak rotacja i niesymetryczność, a następnie tłumaczenie.

Przekształcenia niestandardowe

Klasa MatrixTransform , która pochodzi z Transform klasy, definiuje Matrix właściwość typu Matrix, która reprezentuje macierz definiującą transformację. Ta właściwość jest wspierana BindableProperty przez obiekt, co oznacza, że może być obiektem docelowym powiązań danych i stylizowany.

Dowolna transformacja, którą można opisać za pomocą obiektu TranslateTransform, , ScaleTransformRotateTransformlubSkewTransform, może być równie opisana przez obiekt MatrixTransform. Jednak TranslateTransformklasy , ScaleTransform, RotateTransformi SkewTransform są łatwiejsze do koncepcji niż ustawianie składników wektorów w obiekcie Matrix. MatrixTransform W związku z tym klasa jest zwykle używana do tworzenia przekształceń niestandardowych, które nie są dostarczane przez RotateTransformklasy , ScaleTransform, SkewTransformlub TranslateTransform .

W poniższym przykładzie pokazano, jak przekształcić Path obiekt przy użyciu elementu 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>

W tym przykładzie Path obiekt jest rozciągnięty, skośny i przesunięty zarówno w wymiarach X, jak i Y.

Alternatywnie można to napisać w uproszczonej postaci, która używa konwertera typów wbudowanego w Xamarin.Formsprogram :

<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>

W tym przykładzie Matrix właściwość jest określana jako ciąg rozdzielany przecinkami składający się z sześciu elementów członkowskich: M11, , M12M21, M22, OffsetXOffsetY. Podczas gdy składowe są rozdzielane przecinkami w tym przykładzie, można je również rozdzielić co najmniej jedną spacją.

Ponadto poprzedni przykład można jeszcze bardziej uprościć, określając te same sześć elementów członkowskich co wartość RenderTransform właściwości:

<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" />