Sdílet prostřednictvím

Xamarin.Forms Obrazce: Transformace cesty

  • Článek

A Transform definuje, jak transformovat Path objekt z jednoho souřadnicového prostoru na jiný souřadnicový prostor. Při použití transformace na Path objekt se změní způsob vykreslení objektu v uživatelském rozhraní.

Transformace je možné kategorizovat do čtyř obecných klasifikací: rotace, škálování, nerovnoměrná distribuce a překlad. Xamarin.Forms definuje třídu pro každou z těchto klasifikací transformace:

  • RotateTransform, který otočí zadanou Path Anglehodnotou .
  • ScaleTransform, která škáluje Path objekt podle zadaných ScaleX a ScaleY částek.
  • SkewTransform, který zkosí Path objekt podle zadaných AngleX a AngleY částek.
  • TranslateTransform, který přesune Path objekt podle zadaných X a Y částek.

Xamarin.Forms poskytuje také následující třídy pro vytváření složitějších transformací:

  • TransformGroup, který představuje složenou transformaci složenou z více transformačních objektů.
  • CompositeTransform, které na objekt aplikuje více transformovacích operací Path .
  • MatrixTransform, který vytváří vlastní transformace, které nejsou poskytovány jinými třídami transformace.

Všechny tyto třídy jsou odvozeny z Transform třídy, která definuje Value vlastnost typu Matrix, která představuje aktuální transformaci jako Matrix objekt. Tato vlastnost je podporována objektem BindableProperty , což znamená, že to může být cíl datových vazeb a styl. Další informace o struktuře Matrix naleznete v tématu Transformace matice.

Chcete-li použít transformaci na objekt Path, vytvoříte transformační třídu a nastavíte ji jako hodnotu Path.RenderTransform vlastnosti.

Transformace otočení

Transformace otočení otočí Path objekt po směru hodinových ručiček o zadaném bodu v souřadnicovém systému 2D x-y.

Třída RotateTransform , která je odvozena z Transform třídy, definuje následující vlastnosti:

  • Angle, typu double, představuje úhel ve stupních otočení po směru hodinových ručiček. Výchozí hodnota této vlastnosti je 0,0.
  • CenterX, typu double, představuje souřadnici x středového bodu otáčení. Výchozí hodnota této vlastnosti je 0,0.
  • CenterY, typu double, představuje souřadnici y středového bodu otáčení. Výchozí hodnota této vlastnosti je 0,0.

Tyto vlastnosti jsou podporovány BindableProperty objekty, což znamená, že mohou být cíle datových vazeb a stylovány.

CenterY Vlastnosti CenterX určují bod, o kterém Path se objekt otočí. Tento středový bod je vyjádřen v souřadnicovém prostoru objektu, který je transformován. Ve výchozím nastavení se otočení použije u objektu (0,0), což je levý horní roh objektu Path .

Následující příklad ukazuje, jak otočit Path objekt:

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

V tomto příkladu Path je objekt otáčen o 45 stupňů o levém horním rohu.

Transformace škálování

Transformace měřítka škáluje Path objekt v souřadnicovém systému 2D x-y.

Třída ScaleTransform , která je odvozena z Transform třídy, definuje následující vlastnosti:

  • ScaleX, typu double, který představuje faktor měřítka osy x. Výchozí hodnota této vlastnosti je 1,0.
  • ScaleY, typu double, který představuje měřítko osy y. Výchozí hodnota této vlastnosti je 1,0.
  • CenterX, typu double, který představuje souřadnici x středu této transformace. Výchozí hodnota této vlastnosti je 0,0.
  • CenterY, typu double, který představuje souřadnici y středu této transformace. Výchozí hodnota této vlastnosti je 0,0.

Tyto vlastnosti jsou podporovány BindableProperty objekty, což znamená, že mohou být cíle datových vazeb a stylovány.

Hodnota ScaleX a ScaleY má obrovský dopad na výsledné škálování:

  • Hodnoty mezi 0 a 1 snižují šířku a výšku škálovaného objektu.
  • Hodnoty větší než 1 zvyšují šířku a výšku škálovaného objektu.
  • Hodnoty 1 označují, že objekt není měřítko.
  • Záporné hodnoty překlopí objekt měřítka vodorovně a svisle.
  • Hodnoty mezi 0 a -1 překlopí objekt měřítka a zmenší jeho šířku a výšku.
  • Hodnoty menší než -1 překlopí objekt a zvětší jeho šířku a výšku.
  • Hodnoty -1 překlopí měřítko objektu, ale nezmění jeho vodorovnou nebo svislou velikost.

CenterY Vlastnosti CenterX určují bod, ve kterém Path se objekt škáluje. Tento středový bod je vyjádřen v souřadnicovém prostoru objektu, který je transformován. Ve výchozím nastavení se měřítko použije u objektu (0,0), což je levý horní roh objektu Path . To má vliv na přesunutí objektu Path a jeho zvětšení, protože když použijete transformaci, změníte souřadnicový prostor, ve kterém Path se objekt nachází.

Následující příklad ukazuje, jak škálovat Path objekt:

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

V tomto příkladu Path se objekt škáluje na 1,5násobek velikosti.

Zkosená transformace

Nerovnoměrná transformace zkosení Path objektu v souřadnicovém systému 2D x-y a je užitečná při vytváření iluzí 3D hloubky v 2D objektu.

Třída SkewTransform , která je odvozena z Transform třídy, definuje následující vlastnosti:

  • AngleX, typu double, který představuje úhel zkosení osy x, který se měří ve stupních proti směru hodinových ručiček z osy y. Výchozí hodnota této vlastnosti je 0,0.
  • AngleY, typu double, který představuje úhel zkosení osy y, který se měří ve stupních proti směru hodinových ručiček z osy x. Výchozí hodnota této vlastnosti je 0,0.
  • CenterX, typu double, který představuje souřadnici x transformačního centra. Výchozí hodnota této vlastnosti je 0,0.
  • CenterY, typu double, který představuje souřadnici y transformačního centra. Výchozí hodnota této vlastnosti je 0,0.

Tyto vlastnosti jsou podporovány BindableProperty objekty, což znamená, že mohou být cíle datových vazeb a stylovány.

Pokud chcete předpovědět účinek transformace nerovnoměrné distribuce, zvažte, že AngleX zkosí hodnoty osy x vzhledem k původnímu souřadnicovém systému. AngleX Pro 30 proto osa y otočí 30 stupňů přes původ a zkosí hodnoty v x o 30 stupňů od tohoto původu. AngleY Podobně 30 zkosí hodnoty y objektu Path o 30 stupňů od počátku.

Poznámka:

Pokud chcete objekt Path na místě zkosit, nastavte CenterX vlastnosti CenterY na střed objektu.

Následující příklad ukazuje, jak zkosit Path objekt:

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

V tomto příkladu se u Path objektu použije vodorovná zkosenost 45 stupňů od středu (0,0).

Přeložit transformaci

Transformace překladu přesune objekt v souřadnicovém systému 2D x-y.

Třída TranslateTransform , která je odvozena z Transform třídy, definuje následující vlastnosti:

  • X, typu double, který představuje vzdálenost, která se má pohybovat podél osy x. Výchozí hodnota této vlastnosti je 0,0.
  • Y, typu double, který představuje vzdálenost, která se má pohybovat podél osy y. Výchozí hodnota této vlastnosti je 0,0.

Tyto vlastnosti jsou podporovány BindableProperty objekty, což znamená, že mohou být cíle datových vazeb a stylovány.

Záporné X hodnoty přesunou objekt doleva, zatímco kladné hodnoty přesunou objekt doprava. Záporné Y hodnoty přesunou objekt nahoru, zatímco kladné hodnoty přesunou objekt dolů.

Následující příklad ukazuje, jak přeložit Path objekt:

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

V tomto příkladu Path je objekt přesunut 50 jednotek nezávislých na zařízení vpravo a 50 jednotek nezávislých na zařízení dolů.

Více transformací

Xamarin.Forms má dvě třídy, které podporují použití více transformací na Path objekt. To jsou TransformGroupa CompositeTransform. A TransformGroup provede transformace v libovolném požadovaném CompositeTransform pořadí, zatímco provede transformace v určitém pořadí.

Transformace skupin

Skupiny transformace představují složené transformace složené z více Transform objektů.

Třída TransformGroup , která je odvozena z Transform třídy, definuje Children vlastnost, typu TransformCollection, který představuje kolekci Transform objektů. Tato vlastnost je podporována objektem BindableProperty , což znamená, že to může být cíl datových vazeb a styl.

Pořadítransformch TransformGroup Pokud například poprvé otočíte, pak škálujete, přeložíte, dostanete jiný výsledek než při prvním překladu, pak otočíte a pak škálujete. Jedním z důvodů je významné, že transformace, jako je otočení a škálování, se provádějí s ohledem na původ souřadnicového systému. Škálování objektu, který je uprostřed na počátku, vytvoří jiný výsledek pro škálování objektu, který byl přesunut od původu. Podobně otočení objektu, který je uprostřed na počátku, vytvoří jiný výsledek než otočení objektu, který byl přesunut od původu.

Následující příklad ukazuje, jak provést složenou transformaci pomocí TransformGroup třídy:

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

V tomto příkladu Path se objekt škáluje na 1,5násobek jeho velikosti a pak otočí o 45 stupňů.

Složené transformace

Složená transformace aplikuje více transformací na objekt.

Třída CompositeTransform , která je odvozena z Transform třídy, definuje následující vlastnosti:

  • CenterX, typu double, který představuje souřadnici x středu této transformace. Výchozí hodnota této vlastnosti je 0,0.
  • CenterY, typu double, který představuje souřadnici y středu této transformace. Výchozí hodnota této vlastnosti je 0,0.
  • ScaleX, typu double, který představuje faktor měřítka osy x. Výchozí hodnota této vlastnosti je 1,0.
  • ScaleY, typu double, který představuje měřítko osy y. Výchozí hodnota této vlastnosti je 1,0.
  • SkewX, typu double, který představuje úhel zkosení osy x, který se měří ve stupních proti směru hodinových ručiček z osy y. Výchozí hodnota této vlastnosti je 0,0.
  • SkewY, typu double, který představuje úhel zkosení osy y, který se měří ve stupních proti směru hodinových ručiček z osy x. Výchozí hodnota této vlastnosti je 0,0.
  • Rotation, typu double, představuje úhel ve stupních otočení po směru hodinových ručiček. Výchozí hodnota této vlastnosti je 0,0.
  • TranslateX, typu double, který představuje vzdálenost, která se má pohybovat podél osy x. Výchozí hodnota této vlastnosti je 0,0.
  • TranslateY, typu double, který představuje vzdálenost, která se má pohybovat podél osy y. Výchozí hodnota této vlastnosti je 0,0.

Tyto vlastnosti jsou podporovány BindableProperty objekty, což znamená, že mohou být cíle datových vazeb a stylovány.

A CompositeTransform použije transformace v tomto pořadí:

  1. Měřítko (ScaleX a ScaleY).
  2. Nerovnoměrná distribuce (SkewX a SkewY).
  3. Otočit (Rotation).
  4. Přeložit (TranslateX, TranslateY).

Pokud chcete použít více transformací na objekt v jiném pořadí, měli byste vytvořit TransformGroup a vložit transformace v zamýšleném pořadí.

Důležité

Funkce A CompositeTransform používá stejné středové body CenterX a CenterYpro všechny transformace. Pokud chcete pro každou transformaci zadat různé středové body, použijte TransformGroup

Následující příklad ukazuje, jak provést složenou transformaci pomocí CompositeTransform třídy:

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

V tomto příkladu Path se objekt škáluje na 1,5násobek své velikosti, pak otočí o 45 stupňů a pak se přeloží o 50 jednotek nezávislých na zařízení.

Transformační matice

Transformaci je možné popsat z hlediska 3x3ffinové transformační matice, která provádí transformace v 2D prostoru. Tato matice 3x3 je reprezentována Matrix strukturou, což je kolekce tří řádků a tří sloupců double hodnot.

Struktura Matrix definuje následující vlastnosti:

  • Determinant, typu double, který získá determinant matice.
  • HasInverse, typu bool, který označuje, zda je matice invertovatelná.
  • Identity, typu Matrix, který získá matici identity.
  • HasIdentity, typu bool, který označuje, zda matice je matice identity.
  • M11, typu double, který představuje hodnotu prvního řádku a prvního sloupce matice.
  • M12, typu double, který představuje hodnotu prvního řádku a druhého sloupce matice.
  • M21, typu double, který představuje hodnotu druhého řádku a prvního sloupce matice.
  • M22, typu double, který představuje hodnotu druhého řádku a druhého sloupce matice.
  • OffsetX, typu double, který představuje hodnotu třetího řádku a prvního sloupce matice.
  • OffsetY, typu double, který představuje hodnotu třetího řádku a druhého sloupce matice.

Tyto OffsetX vlastnosti OffsetY jsou tak pojmenované, protože určují velikost pro překlad prostoru souřadnic podél osy x a osy y.

Kromě toho struktura zveřejňuje řadu metod, Matrix které lze použít k manipulaci s maticovými hodnotami, včetně Append, Invert, MultiplyPrepend a mnoho dalších.

Následující tabulka ukazuje strukturu Xamarin.Forms matice:

M11

M12

0,0

M21

M22

0,0

OffsetX

Posun

1.0

Poznámka:

Matice transformace affinu má svůj poslední sloupec rovnou (0,0,1), takže je potřeba zadat pouze členy v prvních dvou sloupcích.

Manipulací s hodnotami matice můžete otáčet, škálovat, zkosit a překládat Path objekty. Pokud například změníte OffsetX hodnotu na 100, můžete ji použít k přesunutí objektu Path 100 jednotek nezávislých na zařízení podél osy x. Pokud hodnotu změníte M22 na 3, můžete ji použít k roztažení objektu Path na trojnásobek jeho aktuální výšky. Pokud změníte obě hodnoty, přesunete Path objekt 100 jednotek nezávislých na zařízení podél osy x a roztáhnete jeho výšku faktorem 3. Kromě toho je možné násobit matice transformace a vytvořit libovolný počet lineárních transformací, jako je otočení a nerovnoměrná distribuce, následované překladem.

Vlastní transformace

Třída MatrixTransform , která je odvozena z Transform třídy, definuje Matrix vlastnost typu Matrix, který představuje matici definující transformaci. Tato vlastnost je podporována objektem BindableProperty , což znamená, že to může být cíl datových vazeb a styl.

Libovolnou transformaci, kterou lze popsat pomocí objektu TranslateTransform, RotateTransformScaleTransformnebo SkewTransform objektu, lze stejně popsat pomocí .MatrixTransform Nicméně , TranslateTransform, ScaleTransformRotateTransforma SkewTransform třídy jsou snadnější konceptualizovat než nastavení vektorové komponenty v .Matrix Proto se MatrixTransform třída obvykle používá k vytváření vlastních transformací, které nejsou poskytovány RotateTransform, ScaleTransform, SkewTransformnebo TranslateTransform třídy.

Následující příklad ukazuje, jak transformovat Path objekt pomocí 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>

V tomto příkladu Path je objekt roztažen, zkosený a posun v rozměrech X i Y.

Alternativně to lze napsat ve zjednodušené podobě, která používá převaděč typů, který je integrovaný do 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>

V tomto příkladu Matrix je vlastnost určena jako řetězec oddělený čárkami, který se skládá ze šesti členů: M11, M12, M21, M22, OffsetX, . OffsetY Zatímco členy jsou v tomto příkladu oddělené čárkami, můžou být také odděleny jednou nebo více mezerami.

Předchozí příklad lze navíc ještě dále zjednodušit zadáním stejných RenderTransform šesti členů jako hodnota vlastnosti:

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