Sdílet prostřednictvím

Přehled transformace

  • Článek

Toto téma popisuje, jak pomocí 2D Transform tříd otáčet, škálovat, přesouvat (překládat) a zkosit FrameworkElement objekty.

Co je transformace?

A Transform definuje, jak mapovat nebo transformovat body z jednoho souřadnicového prostoru do jiného souřadnicového prostoru. Toto mapování je popsáno transformací Matrix, což je kolekce tří řádků se třemi sloupci Double hodnot.

Poznámka:

Windows Presentation Foundation (WPF) používá matice hlavní řady. Vektory jsou vyjádřeny jako vektory řádků, nikoli vektory sloupců.

Následující tabulka ukazuje strukturu matice WPF.

2D transformační matice

Osy x Osy y Affinová transformace
M11

Výchozí hodnota: 1.0		 M12

Výchozí hodnota: 0.0		 0,0
M21

Výchozí hodnota: 0.0		 M22

Výchozí hodnota: 1.0		 0,0
OffsetX

Výchozí hodnota: 0.0		 OffsetY

Výchozí hodnota: 0.0		 1.0

Pomocí manipulace s hodnotami matice můžete objekt otočit, škálovat, zkosit, zkosit a přesunout (přeložit). Pokud například změníte hodnotu v prvním sloupci třetího řádku ( OffsetX hodnota) na 100, můžete ji použít k přesunutí objektu 100 jednotek podél osy x. Pokud změníte hodnotu ve druhém sloupci druhého řádku na 3, můžete ho použít k roztažení objektu na trojnásobek jeho aktuální výšky. Pokud změníte obě hodnoty, přesunete objekt o 100 jednotek podél osy x a roztáhnete jeho výšku faktorem 3. Protože Windows Presentation Foundation (WPF) podporuje pouze affine transformace, hodnoty v pravém sloupci jsou vždy 0, 0, 1.

I když Windows Presentation Foundation (WPF) umožňuje přímo manipulovat s maticovými hodnotami, poskytuje také několik Transform tříd, které umožňují transformovat objekt bez znalosti konfigurace základní maticové struktury. Třída například ScaleTransform umožňuje škálovat objekt nastavením jeho ScaleX a ScaleY vlastností místo manipulace s transformační maticí. Stejně tak RotateTransform třída umožňuje otočit objekt pouhým nastavením jeho Angle vlastnosti.

Třídy transformace

Windows Presentation Foundation (WPF) poskytuje následující 2D Transform třídy pro běžné transformační operace:

Třída Popis Příklad Ilustrace
RotateTransform Otočí prvek zadaným Angleobjektem . Otočení objektu Rotate illustration
ScaleTransform Škáluje prvek podle zadaných ScaleX a ScaleY částek. Změna velikosti elementu Scale illustration
SkewTransform Zkosí prvek podle zadaných AngleX a AngleY částek. Zkosení elementu Skew illustration
TranslateTransform Přesune (překládá) prvek podle zadaných X a Y částek. Překlad elementu Translate illustration

Pro vytváření složitějších transformací poskytuje Windows Presentation Foundation (WPF) následující dvě třídy:

Třída Popis Příklad
TransformGroup Seskupí více TransformGroup objektů do jednoho Transform objektu, který pak můžete použít k transformaci vlastností. Použití několika transformací na objekt
MatrixTransform Vytvoří vlastní transformace, které nejsou poskytovány jinými Transform třídami. Když použijete matici MatrixTransform, manipulujete s maticí přímo. Vytvoření vlastních transformací pomocí MatrixTransform

Windows Presentation Foundation (WPF) také poskytuje 3D transformace. Další informace najdete v předmětu Transform3D .

Běžné vlastnosti transformace

Jedním ze způsobů, jak transformovat objekt, je deklarovat příslušný Transform typ a použít ho na transformační vlastnost objektu. Různé typy objektů mají různé typy transformačních vlastností. Následující tabulka uvádí několik běžně používaných typů WPF (Windows Presentation Foundation) a jejich transformačních vlastností.

Type Vlastnosti transformace
Brush Transform, RelativeTransform
ContainerVisual Transform
DrawingGroup Transform
FrameworkElement RenderTransform, LayoutTransform
Geometry Transform
TextEffect Transform
UIElement RenderTransform

Transformace a souřadnicové systémy

Při transformaci objektu neproveďte pouze transformaci objektu, transformujete souřadnicový prostor, ve kterém tento objekt existuje. Ve výchozím nastavení je transformace na střed na počátku souřadnicového systému cílového objektu: (0,0). Jedinou výjimkou je TranslateTransform, TranslateTransform že nemá žádné vlastnosti středu, které se mají nastavit, protože efekt překladu je stejný bez ohledu na to, kde je zacentrován.

Následující příklad používá RotateTransform k otočení Rectangle prvku, typ FrameworkElement, o 45 stupňů o jeho výchozí střed , (0, 0). Následující obrázek znázorňuje efekt otočení.

A FrameworkElement rotated 45 degrees about (0,0)
Obdélníkový prvek otočený o 45 stupňů o bodu (0,0)

<Canvas Width="200" Height="200">
  <Rectangle 
    Canvas.Left="100" Canvas.Top="100"
    Width="50" Height="50" 
    Fill="RoyalBlue" Opacity="1.0">
    <Rectangle.RenderTransform>
      <RotateTransform Angle="45" />
    </Rectangle.RenderTransform>
  </Rectangle>
</Canvas>

Ve výchozím nastavení se prvek otočí o levý horní roh (0, 0). Třídy RotateTransforma SkewTransform objekty ScaleTransformposkytují vlastnosti CenterX a CenterY, které umožňují určit bod, ve kterém se transformace použije.

Další příklad také používá RotateTransform k otočení Rectangle prvku o 45 stupňů; tentokrát CenterX jsou však nastaveny vlastnosti CenterY tak, aby RotateTransform byl střed (25, 25). Následující obrázek znázorňuje efekt otočení.

A Geometry rotated 45 degrees about (25, 25)
Obdélníkový prvek otočený o bod o 45 stupňů (25, 25)

<Canvas Width="200" Height="200">
  <Rectangle 
    Canvas.Left="100" Canvas.Top="100"
    Width="50" Height="50" 
    Fill="RoyalBlue" Opacity="1.0">
    <Rectangle.RenderTransform>
      <RotateTransform Angle="45" CenterX="25" CenterY="25" />
    </Rectangle.RenderTransform>
  </Rectangle>
</Canvas>

Transformace FrameworkElement

Pokud chcete použít transformace na objekt FrameworkElement, vytvořte Transform a použijte ho na jednu ze dvou vlastností, které FrameworkElement třída poskytuje:

  • LayoutTransform – Transformace, která se použije před předáním rozložení. Po použití transformace systém rozložení zpracuje transformovanou velikost a pozici prvku.

  • RenderTransform – Transformace, která upraví vzhled prvku, ale použije se po dokončení průchodu rozložení. RenderTransform Pomocí vlastnosti místo vlastnosti můžete získat výhody výkonuLayoutTransform.

Kterou vlastnost byste měli použít? Vzhledem k výhodám výkonu, které poskytuje, použijte RenderTransform vlastnost, kdykoli je to možné, zejména při použití animovaných Transform objektů. LayoutTransform Vlastnost použijte při škálování, otáčení nebo skewing a potřebujete nadřazený prvek upravit na transformovanou velikost prvku. Všimněte si, že když jsou použity s LayoutTransform vlastností, TranslateTransform objekty se zdá, že nemají žádný vliv na prvky. Důvodem je to, že systém rozložení vrátí přeložený prvek do původní pozice v rámci zpracování.

Další informace o rozložení ve Windows Presentation Foundation (WPF) naleznete v tématu Přehled rozložení .

Příklad: Otočení FrameworkElement o 45 stupňů

Následující příklad používá RotateTransform k otočení tlačítka po směru hodinových ručiček o 45 stupňů. Tlačítko je obsaženo ve StackPanel dvou dalších tlačítkách.

Ve výchozím nastavení RotateTransform se otočí o bod (0, 0). Vzhledem k tomu, že v příkladu není zadaná středová hodnota, tlačítko otočí o bod (0, 0), což je jeho levý horní roh. Použije se RotateTransform na RenderTransform vlastnost. Následující obrázek znázorňuje výsledek transformace.

A button transformed using RenderTransform
Otočení po směru hodinových ručiček o 45 stupňů od levého horního rohu

<Border Margin="30" 
  HorizontalAlignment="Left" VerticalAlignment="Top"
  BorderBrush="Black" BorderThickness="1" >
  <StackPanel Orientation="Vertical">
    <Button Content="A Button" Opacity="1" />
    <Button Content="Rotated Button">
      <Button.RenderTransform>
        <RotateTransform Angle="45" />
      </Button.RenderTransform>
    </Button>
    <Button Content="A Button" Opacity="1" />
  </StackPanel>
</Border>

Další příklad také používá RotateTransform k otočení tlačítka o 45 stupňů ve směru hodinových ručiček, ale také nastaví RenderTransformOrigin tlačítko na (0,5, 0,5). Hodnota RenderTransformOrigin vlastnosti je relativní vzhledem k velikosti tlačítka. V důsledku toho se otočení použije na střed tlačítka místo jeho levého horního rohu. Následující obrázek znázorňuje výsledek transformace.

A button transformed about its center
Otočení po směru hodinových ručiček kolem středu

<Border Margin="30"   
  HorizontalAlignment="Left" VerticalAlignment="Top"
  BorderBrush="Black" BorderThickness="1">
  <StackPanel Orientation="Vertical">
    <Button Content="A Button" Opacity="1" />
    <Button Content="Rotated Button"
      RenderTransformOrigin="0.5,0.5">
      <Button.RenderTransform>
        <RotateTransform Angle="45" />
      </Button.RenderTransform>
    </Button>
    <Button Content="A Button" Opacity="1" />
  </StackPanel>
</Border>

Následující příklad používá LayoutTransform vlastnost místo RenderTransform vlastnosti k otočení tlačítka. To způsobí, že transformace ovlivní rozložení tlačítka, které aktivuje úplné předání systémem rozložení. V důsledku toho se tlačítko otočí a pak přemístí, protože se změnila jeho velikost. Následující obrázek znázorňuje výsledek transformace.

A button transformed using LayoutTransform
LayoutTransform použitý k otočení tlačítka

<Border Margin="30"   
 HorizontalAlignment="Left" VerticalAlignment="Top"
 BorderBrush="Black" BorderThickness="1">
  <StackPanel Orientation="Vertical">

    <Button Content="A Button" Opacity="1" />   
    <Button Content="Rotated Button">
      <Button.LayoutTransform>
        <RotateTransform Angle="45"  />
      </Button.LayoutTransform>
    </Button>   
    <Button Content="A Button" Opacity="1" />
  </StackPanel>
</Border>

Animace transformací

Vzhledem k tomu, že dědí z Animatable třídy, Transform mohou být třídy animované. Pokud chcete animovat , použijte animaci Transformkompatibilního typu na vlastnost, kterou chcete animovat.

Následující příklad používá a Storyboard s DoubleAnimation a s RotateTransform k vytvoření Button rotace na místě při kliknutí.

<Page 
  xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
  xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
  Title="Button Animated RotateTransform Example"
  Background="White" Margin="50">
  <StackPanel>
    
    

    <Button Content="A Button"
      RenderTransformOrigin="0.5,0.5">
      <Button.RenderTransform>
        <RotateTransform x:Name="AnimatedRotateTransform" Angle="0" />
      </Button.RenderTransform>
      <Button.Triggers>
        <EventTrigger RoutedEvent="Button.Click">
          <BeginStoryboard>
            <Storyboard>
              <DoubleAnimation 
                Storyboard.TargetName="AnimatedRotateTransform"
                Storyboard.TargetProperty="Angle" 
                To="360" Duration="0:0:1" FillBehavior="Stop" />
            </Storyboard>
          </BeginStoryboard>
        </EventTrigger>
      </Button.Triggers>
    </Button>

  </StackPanel>
</Page>

Kompletní ukázku najdete v části Ukázka 2D transformací. Další informace o animacích najdete v přehledu animací.

Zamrznutelné funkce

Vzhledem k tomu, že dědí z Freezable třídy, Transform třída poskytuje několik speciálních funkcí: Transform objekty lze deklarovat jako prostředky sdílené mezi více objekty, aby se zlepšil výkon, klonovaný a vytvořený přístup z více vláken. Další informace o různých funkcích, které jsou poskytovány Freezable objekty, naleznete v přehledu Zamrznutelné objekty.

Viz také