Udostępnij za pośrednictwem

Przegląd Przekształcenia

  • Artykuł

W tym temacie opisano sposób używania klas 2D Transform do obracania, skalowania, przenoszenia (tłumaczenia) i niesymetryczności FrameworkElement obiektów.

Co to jest transformacja?

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

Uwaga

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

W poniższej tabeli przedstawiono strukturę macierzy WPF.

Macierz transformacji 2D

Osi Osi y Przekształcenie affiny
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ć, niesymetrycznie i przenosić (tłumaczyć) obiekt. Jeśli na przykład zmienisz wartość w pierwszej kolumnie trzeciego wiersza ( OffsetX wartości) 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 Transform klas, które umożliwiają przekształcanie obiektu bez znajomości konfiguracji podstawowej struktury macierzy. Na przykład ScaleTransform klasa umożliwia skalowanie obiektu przez ustawienie jego ScaleX właściwości i ScaleY zamiast manipulowania macierzą przekształceń. Podobnie RotateTransform klasa umożliwia obracanie obiektu przez ustawienie jego Angle właściwości.

Klasy przekształcania

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

Klasa opis Przykład Ilustracja
RotateTransform Obraca element według określonego Angleelementu . Obracanie obiektu Rotate illustration
ScaleTransform Skaluje element według określonych ScaleX wartości i ScaleY . Skalowanie elementu Scale illustration
SkewTransform Niesymetrycznie elementu według określonej AngleX wartości i AngleY . Pochylanie elementu Skew illustration
TranslateTransform Przenosi (tłumaczy) element według określonej X wartości i Y . Przesuwanie elementu Translate illustration

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 TransformGroup obiektów 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 Transform klasy. Gdy używasz elementu MatrixTransform, bezpośrednio manipulujesz macierzą. Tworzenie niestandardowych przekształceń przy użyciu elementu MatrixTransform

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 Transform typu i zastosowanie go do właściwości transformowania 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.

Type Właściwości przekształcenia
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 środka do ustawienia, ponieważ efekt tłumaczenia jest taki sam, niezależnie od tego, gdzie jest wyśrodkowany.

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

A FrameworkElement rotated 45 degrees about (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ż elementu RotateTransform , aby obrócić Rectangle element o 45 stopni, jednak tym razem CenterX właściwości i CenterY są ustawione tak, aby obiekt RotateTransform miał środek (25, 25). Na poniższej ilustracji przedstawiono efekt rotacji.

A Geometry rotated 45 degrees about (25, 25)
Element prostokąta obrócony o 45 stopni o punkcie (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 klasy FrameworkElement, utwórz Transform element i zastosuj go do jednej z dwóch właściwości zapewnianych przez klasę FrameworkElement :

  • LayoutTransform — przekształcenie stosowane przed przekazaniem układu. 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 przekazywania układu. Korzystając z RenderTransform właściwości zamiast LayoutTransform właściwości, 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ć RenderTransform właściwości zawsze, gdy jest to możliwe, zwłaszcza w przypadku korzystania z animowanych Transform obiektów. LayoutTransform Użyj właściwości podczas skalowania, obracania lub niesymetryczności, a element nadrzędny elementu jest potrzebny do dostosowania 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 Omówienie układu .

Przykład: obracanie elementu FrameworkElement 45 stopni

W poniższym przykładzie użyto obiektu , RotateTransform aby obrócić przycisk zgodnie z ruchem wskazówek zegara o 45 stopni. Przycisk znajduje się w obiekcie StackPanel , który ma 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 RenderTransform właściwości . Poniższa ilustracja przedstawia wynik przekształcenia.

A button transformed using 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 użyto również elementu , RotateTransform aby obrócić przycisk 45 stopni zgodnie z ruchem wskazówek zegara, ale również ustawia RenderTransformOrigin przycisk na (0,5, 0,5). Wartość RenderTransformOrigin właściwości jest względna względem rozmiaru przycisku. W rezultacie rotacja jest stosowana do środka przycisku zamiast lewego górnego rogu. Poniższa ilustracja przedstawia wynik przekształcenia.

A button transformed about its center
Obrót zgodnie z ruchem wskazówek zegara 45 stopni wokół środka

<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 LayoutTransform właściwości zamiast RenderTransform właściwości , 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.

A button transformed using 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ń

Ponieważ dziedziczą z Animatable klasy, Transform klasy mogą być animowane. Aby animować obiekt Transform, zastosuj animację zgodnego typu do właściwości, którą chcesz animować.

W poniższym przykładzie użyto obiektu Storyboard i z elementem , DoubleAnimationRotateTransform aby utworzyć Button spin 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 zapoznać się z kompletnym przykładem, zobacz Przykład przekształcenia 2D. Aby uzyskać więcej informacji na temat animacji, zobacz Omówienie animacji.

Funkcje zamrażalne

Ponieważ dziedziczy ona z Freezable klasy, Transform klasa zapewnia kilka specjalnych funkcji: Transform obiekty można zadeklarować jako zasoby, współdzielone między wieloma obiektami, wykonane tylko do odczytu w celu zwiększenia wydajności, sklonowania i zapewnienia bezpieczeństwa wątków. Aby uzyskać więcej informacji na temat różnych funkcji udostępnianych przez Freezable obiekty, zobacz Omówienie obiektów z możliwością zamrażania.

Zobacz też