Udostępnij za pośrednictwem

Instrukcje: skalowanie elementu

  • Artykuł

W tym przykładzie pokazano, jak za pomocą ScaleTransform skalować element.

Użyj właściwości ScaleX i ScaleY, aby zmienić rozmiar elementu według określonego czynnika. Na przykład wartość ScaleX równa 1,5 rozciąga element do 150 procent jego oryginalnej szerokości. Wartość ScaleY 0,5 zmniejsza wysokość elementu o 50%.

Użyj właściwości CenterX i CenterY, aby określić punkt, który jest środkiem operacji skalowania. Domyślnie ScaleTransform jest wyśrodkowany w punkcie (0,0), który odpowiada lewemu górnemu rogu prostokąta. Ma to efekt przesunięcia elementu oraz sprawienia, że wydaje się on większy, ponieważ po zastosowaniu Transformzmienia się przestrzeń współrzędnych, w której znajduje się obiekt.

W poniższym przykładzie użyto ScaleTransform, aby podwoić rozmiar 50 na 50 Rectangle. ScaleTransform ma wartość 0 (wartość domyślną) dla CenterX i CenterY.

Przykład

<!-- Scales a rectangle by 200% from a center of (0,0).-->
<Rectangle Height="50" Width="50" Fill="#CCCCCCFF" 
  Stroke="Blue" StrokeThickness="2"
  Canvas.Left="100" Canvas.Top="100">
  <Rectangle.RenderTransform>
    <ScaleTransform CenterX="0" CenterY="0" ScaleX="2" ScaleY="2" />
  </Rectangle.RenderTransform>
</Rectangle>

Zazwyczaj ustawia się CenterX i CenterY na środek obiektu, który jest skalowany: (Width/2, Height/2).

W poniższym przykładzie pokazano kolejną Rectangle, która jest dwukrotnie większa; jednak ta ScaleTransform ma wartość 25 zarówno dla CenterX, jak i CenterY, która odpowiada środek prostokąta.

<!-- Scales a rectangle by 200% from a center of (25,25).-->
<Rectangle Height="50" Width="50" Fill="#CCCCCCFF"
  Canvas.Left="100" Canvas.Top="100" Stroke="Blue" StrokeThickness="2">
  <Rectangle.RenderTransform>
    <ScaleTransform CenterX="25" CenterY="25" ScaleX="2" ScaleY="2" />
  </Rectangle.RenderTransform>
</Rectangle>

Na poniższej ilustracji przedstawiono różnicę między dwoma operacjami ScaleTransform. Linia kropkowana pokazuje rozmiar i położenie prostokąta przed skalowaniem.

2x skaluje się z różnymi punktami środkowymi
Dwie operacje ScaleTransform z identycznymi wartościami ScaleX i ScaleY, ale różnymi centrami

Aby uzyskać kompletny przykład, zobacz Przykład przekształceń 2D.

Zobacz też