Udostępnij za pośrednictwem

Omówienie przekształceń

  • Artykuł

W tym temacie opisano sposób używania klas 2D Transform do obracania, skalowania, przesuwania i pochylania obiektów FrameworkElement.

Co to jest transformacja?

Transform definiuje sposób mapowania lub przekształcania punktów z jednej przestrzeni współrzędnych do innej przestrzeni współrzędnych. To mapowanie jest opisane przez przekształcenie Matrix, które jest macierzą trzech wierszy i trzech kolumn wartości Double.

Notatka

Program Windows Presentation Foundation (WPF) używa macierzy wierszowo-głównych. Wektory są wyrażane jako wektory wierszy, a nie wektory kolumn.

W poniższej tabeli przedstawiono strukturę macierzy WPF.

Macierz transformacji 2D

Oś X Oś y Przekształcenie afiniczne
M11

Ustawienie domyślne: 1.0		 M12

Wartość domyślna: 0.0		 0.0
M21

Wartość domyślna: 0.0		 M22

Ustawienie domyślne: 1.0		 0.0
OffsetX

Wartość domyślna: 0.0		 OffsetY

Wartość domyślna: 0.0		 1.0

Manipulując wartościami macierzy, można obracać, skalować, pochylać i przesuwać (dokonywać translacji) obiekt. Jeśli na przykład zmienisz wartość w pierwszej kolumnie trzeciego wiersza (wartość OffsetX) na 100, możesz użyć jej do przeniesienia obiektu 100 jednostek wzdłuż osi x. Jeśli zmienisz wartość w drugiej kolumnie drugiego wiersza na 3, możesz użyć jej do rozciągnięcia obiektu na trzy razy więcej niż bieżąca wysokość. Jeśli zmienisz obie wartości, przeniesiesz obiekt 100 jednostek wzdłuż osi x i rozciągniesz jego wysokość przez współczynnik 3. Ponieważ program Windows Presentation Foundation (WPF) obsługuje tylko przekształcenia affine, wartości w prawej kolumnie są zawsze równe 0, 0, 1.

Mimo że program Windows Presentation Foundation (WPF) umożliwia bezpośrednie manipulowanie wartościami macierzy, udostępnia również kilka klas Transform, które umożliwiają przekształcanie obiektu bez znajomości konfiguracji podstawowej struktury macierzy. Na przykład klasa ScaleTransform umożliwia skalowanie obiektu przez ustawienie jego właściwości ScaleX i ScaleY zamiast manipulowania macierzą przekształceń. Podobnie klasa RotateTransform umożliwia obracanie obiektu przez ustawienie jego właściwości Angle.

Klasy transformacji

Windows Presentation Foundation (WPF) udostępnia następujące klasy 2D Transform dla powszechnie stosowanych operacji przekształcania:

Klasa Opis Przykład Ilustracja
RotateTransform Obraca element według określonego Angle. Obrót obiektu Obróć ilustrację
ScaleTransform Skaluje element według określonych ScaleX i ScaleY kwot. Skalowanie elementu Skalowanie ilustracji
SkewTransform Przechyla element o określone wartości AngleX i AngleY. niesymetryczność elementu ilustracja skośna
TranslateTransform Przenosi (tłumaczy) element według określonych X i Y kwot. Przetłumacz Element Tłumacz ilustracji

W przypadku tworzenia bardziej złożonych przekształceń program Windows Presentation Foundation (WPF) udostępnia następujące dwie klasy:

Klasa Opis Przykład
TransformGroup Grupuje wiele obiektów TransformGroup w jeden Transform, który można następnie zastosować do przekształcania właściwości. stosowanie wielu przekształceń do obiektu
MatrixTransform Tworzy przekształcenia niestandardowe, które nie są udostępniane przez inne klasy Transform. Kiedy używasz MatrixTransform, manipulujesz macierzą bezpośrednio. Użyj elementu MatrixTransform do tworzenia niestandardowych przekształceń

Program Windows Presentation Foundation (WPF) udostępnia również przekształcenia 3D. Aby uzyskać więcej informacji, zobacz klasę Transform3D.

Typowe właściwości przekształcania

Jednym ze sposobów przekształcenia obiektu jest zadeklarowanie odpowiedniego typu Transform i zastosowanie go do właściwości przekształcenia obiektu. Różne typy obiektów mają różne typy właściwości przekształcania. W poniższej tabeli wymieniono kilka powszechnie używanych typów programu Windows Presentation Foundation (WPF) i ich właściwości przekształcania.

Typ Właściwości transformacji
Brush Transform, RelativeTransform
ContainerVisual Transform
DrawingGroup Transform
FrameworkElement RenderTransform, LayoutTransform
Geometry Transform
TextEffect Transform
UIElement RenderTransform

Przekształcenia i systemy współrzędnych

Podczas przekształcania obiektu nie tylko przekształcasz obiekt, przekształcasz przestrzeń współrzędnych, w której istnieje ten obiekt. Domyślnie przekształcenie jest wyśrodkowane na początku układu współrzędnych obiektu docelowego: (0,0). Jedynym wyjątkiem jest TranslateTransform; TranslateTransform nie ma właściwości centrum do ustawienia, ponieważ efekt translacji jest taki sam, niezależnie od tego, gdzie jest wyśrodkowany.

W poniższym przykładzie użyto RotateTransform, aby obrócić element Rectangle, typ FrameworkElement, o 45 stopni względem domyślnego środka (0, 0). Na poniższej ilustracji przedstawiono efekt rotacji.

FrameworkElement obrócony o 45 stopni wokół punktu (0,0)
Element prostokąta obrócony o 45 stopni o punkcie (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>

Domyślnie element obraca się wokół lewego górnego rogu (0, 0). Klasy RotateTransform, ScaleTransformi SkewTransform zapewniają właściwości CenterX i CenterY, które umożliwiają określenie punktu, w którym jest stosowana transformacja.

W następnym przykładzie użyto również RotateTransform do obracania elementu Rectangle o 45 stopni; Jednak tym razem właściwości CenterX i CenterY są ustawione tak, aby RotateTransform miał środek (25, 25). Na poniższej ilustracji przedstawiono efekt rotacji.

Geometria obrócona o 45 stopni około (25, 25)
Element prostokąta obrócony o 45 stopni wokół punktu (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>

Przekształcanie elementu FrameworkElement

Aby zastosować przekształcenia do FrameworkElement, utwórz Transform i zastosuj ją do jednej z dwóch właściwości zapewnianych przez klasę FrameworkElement:

  • LayoutTransform — przekształcenie stosowane przed operacją układania. Po zastosowaniu przekształcenia system układu przetwarza przekształcony rozmiar i położenie elementu.

  • RenderTransform — przekształcenie, które modyfikuje wygląd elementu, ale jest stosowane po zakończeniu przetwarzania układu. Korzystając z właściwości RenderTransform zamiast właściwości LayoutTransform, można uzyskać korzyści z wydajności.

Której właściwości należy użyć? Ze względu na korzyści z wydajności, które zapewnia, należy używać właściwości RenderTransform zawsze, gdy jest to możliwe, zwłaszcza w przypadku korzystania z animowanych obiektów Transform. Użyj właściwości LayoutTransform podczas skalowania, obracania lub pochylania, gdy konieczne jest, aby element nadrzędny dostosował się do przekształconego rozmiaru elementu. Należy pamiętać, że gdy są one używane z właściwością LayoutTransform, TranslateTransform obiekty wydają się nie mieć wpływu na elementy. Wynika to z faktu, że system układu zwraca przetłumaczony element do oryginalnej pozycji w ramach przetwarzania.

Aby uzyskać dodatkowe informacje o układzie w programie Windows Presentation Foundation (WPF), zobacz Layout overview (Omówienie układu ).

Przykład: Obróć FrameworkElement o 45 stopni

W poniższym przykładzie użyto RotateTransform, aby obrócić przycisk zgodnie z ruchem wskazówek zegara o 45 stopni. Przycisk znajduje się w elemencie StackPanel, który zawiera dwa inne przyciski.

Domyślnie RotateTransform obraca się o punkcie (0, 0). Ponieważ w przykładzie nie określono wartości środkowej, przycisk obraca się o punkcie (0, 0), który jest jego lewym górnym rogu. Właściwość RotateTransform jest stosowana do właściwości RenderTransform. Poniższa ilustracja przedstawia wynik przekształcenia.

przycisk przekształcony przy użyciu RenderTransform
Obrót zgodnie z ruchem wskazówek zegara 45 stopni od lewego górnego rogu

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

W następnym przykładzie również użyto RotateTransform, aby obrócić przycisk o 45 stopni zgodnie z ruchem wskazówek zegara, a jednocześnie ustawiono RenderTransformOrigin przycisku na (0.5, 0.5). Wartość właściwości RenderTransformOrigin jest względna względem rozmiaru przycisku. W rezultacie rotacja jest stosowana do centralnego punktu przycisku, zamiast jego lewego górnego rogu. Poniższa ilustracja przedstawia wynik przekształcenia.

przycisk przekształcony wokół jego środka
Obrót zgodnie z ruchem wskazówek zegara 45 stopni wokół punktu centralnego

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

W poniższym przykładzie użyto właściwości LayoutTransform zamiast właściwości RenderTransform, aby obrócić przycisk. Powoduje to, że transformacja ma wpływ na układ przycisku, który wyzwala pełne przekazywanie przez system układu. W związku z tym przycisk jest obracany, a następnie zmienia położenie, ponieważ jego rozmiar uległ zmianie. Poniższa ilustracja przedstawia wynik przekształcenia.

przycisk przekształcony za pomocą graphicsmm_LayoutTransform
LayoutTransform używany do obracania przycisku

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

Animowanie przekształceń

Klasy Transform można animować, ponieważ dziedziczą z klasy Animatable. Aby animować Transform, zastosuj animację zgodnego typu do właściwości, którą chcesz animować.

W poniższym przykładzie użyto Storyboard i DoubleAnimation z RotateTransform, aby Button obracać się w miejscu po kliknięciu.

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

Aby uzyskać kompletny przykład, zobacz Przykład Przekształceń 2D . Aby uzyskać więcej informacji na temat animacji, zobacz Omówienie animacji.

Funkcje zamrażalne

Ponieważ dziedziczy ona z klasy Freezable, klasa Transform udostępnia kilka specjalnych cech: obiekty Transform można zadeklarować jako zasoby typu, udostępniane między wieloma obiektami, ustawione jako tylko do odczytu w celu zwiększenia wydajności, klonowane oraz zabezpieczone wątkowo. Aby uzyskać więcej informacji na temat różnych funkcji udostępnianych przez obiekty Freezable, zobacz Mroźne obiekty — omówienie.

Zobacz też