Omówienie transformacji pędzla

Klasa Brush udostępnia dwie właściwości przekształcania: Transform i RelativeTransform. Właściwości umożliwiają obracanie, skalowanie, pochylanie i przenoszenie zawartości pędzla. W tym temacie opisano różnice między tymi dwiema właściwościami i przedstawiono przykłady ich użycia.

Warunki wstępne

Aby zrozumieć ten temat, powinieneś zrozumieć cechy pędzla, który przekształcasz. Dla LinearGradientBrush i RadialGradientBrush, zobacz Przegląd malowania kolorami stałymi i gradientami. Aby uzyskać informacje o ImageBrush, DrawingBrushlub VisualBrush, zobacz Malowanie z obrazami, rysunkami i wizualizacjami. Należy również zapoznać się z transformacjami 2D opisanymi w Transforms Overview.

Różnice między właściwościami Transform i RelativeTransform

Kiedy zastosujesz przekształcenie do właściwości Transform pędzla, musisz znać rozmiar malowanego obszaru, jeśli chcesz przekształcić zawartość pędzla wokół jego środka. Załóżmy, że obszar ma 200 pikseli niezależnych od urządzenia szerokości i 150 wysokości. Jeśli użyto RotateTransform do obrócenia wyjściowej szczotki o 45 stopni wokół jego środka, ustawiasz RotateTransform na CenterX 100 i CenterY na 75.

Po zastosowaniu przekształcenia do właściwości RelativeTransform pędzla ta transformacja jest stosowana do pędzla, zanim jego dane wyjściowe zostaną zamapowane na malowany obszar. Na poniższej liście opisano kolejność przetwarzania i przekształcania zawartości pędzla.

1. Przetwórz zawartość pędzla. W przypadku GradientBrushoznacza to określenie obszaru gradientu. W przypadku TileBrushViewbox jest mapowany na Viewport. To staje się wynikiem działania pędzla.

2. Przenieś wynik działania pędzla na prostokąt o wymiarach 1 x 1.

3. Nałóż RelativeTransformszczotki, jeśli szczotka posiada taką.

4. Przeprojektuj przekształcone dane wyjściowe na obszar do malowania.

5. Zastosuj element Transformszczotki, jeśli go posiada.

Ponieważ RelativeTransform jest stosowany, gdy dane wyjściowe pędzla są mapowane na prostokąt 1 x 1, wartości środka przekształcenia i przesunięcia wydają się być względne. Na przykład, jeśli użyłeś RotateTransform do obrócenia wyjścia pędzla o 45 stopni wokół jego środka, powinieneś nadać RotateTransform wartość CenterX 0,5 i CenterY 0,5.

Na poniższej ilustracji przedstawiono dane wyjściowe kilku pędzli, które zostały obrócone o 45 stopni przy użyciu właściwości RelativeTransform i Transform.

Używanie funkcji RelativeTransform z TileBrush

Ponieważ pędzle do kafelków są bardziej złożone niż inne pędzle, użycie RelativeTransform na jednym z nich może spowodować nieoczekiwane wyniki. Na przykład wykonaj poniższą ilustrację.

obrazu źródłowego

W poniższym przykładzie użyto ImageBrush do malowania prostokątnego obszaru z powyższym obrazem. Stosuje RotateTransform do właściwości RelativeTransform obiektu ImageBrush i ustawia właściwość Stretch na UniformToFill, która powinna zachować współczynnik proporcji obrazu, gdy jest on rozciągany w celu całkowitego wypełnienia prostokąta.

<Rectangle Width="200" Height="100" Stroke="Black" StrokeThickness="1">
  <Rectangle.Fill>
    <ImageBrush Stretch="UniformToFill">
      <ImageBrush.ImageSource>
        <BitmapImage UriSource="sampleImages\square.jpg" />
      </ImageBrush.ImageSource>
      <ImageBrush.RelativeTransform>
        <RotateTransform CenterX="0.5" CenterY="0.5" Angle="90" />
      </ImageBrush.RelativeTransform>
    </ImageBrush>
  </Rectangle.Fill>
</Rectangle>

W tym przykładzie są generowane następujące dane wyjściowe:

Zwróć uwagę, że obraz jest zniekształcony, mimo że Stretch pędzla została ustawiona na UniformToFill. Wynika to z faktu, że transformacja względna jest stosowana po tym, jak Viewbox pędzla jest mapowane na jego Viewport. Poniższa lista zawiera opis każdego kroku procesu:

1. Rzutuj zawartość pędzla (Viewbox) na kafelek bazowy (Viewport) przy użyciu ustawienia Stretch pędzla.

   

2. Rzutuj płytkę podstawową na prostokąt przekształcenia 1 x 1.

   

3. Zastosuj RotateTransform.

   

4. Rzutuj przekształcony kafelek bazowy na obszar do malowania.

   

Przykład: Obróć ImageBrush o 45 stopni

Poniższy przykład stosuje RotateTransform do właściwości RelativeTransform obiektu ImageBrush. Obie właściwości CenterX i CenterY obiektu RotateTransform są ustawione na 0,5, co są współrzędnymi względnymi punktu środkowego zawartości. W rezultacie zawartość pędzla jest obracana wokół środka.

//
// Create an ImageBrush with a relative transform and
// use it to paint a rectangle.
//
ImageBrush relativeTransformImageBrush = new ImageBrush();
relativeTransformImageBrush.ImageSource =
    new BitmapImage(new Uri(@"sampleImages\pinkcherries.jpg", UriKind.Relative));

// Create a 45 rotate transform about the brush's center
// and apply it to the brush's RelativeTransform property.
RotateTransform aRotateTransform = new RotateTransform();
aRotateTransform.CenterX = 0.5;
aRotateTransform.CenterY = 0.5;
aRotateTransform.Angle = 45;
relativeTransformImageBrush.RelativeTransform = aRotateTransform;

// Use the brush to paint a rectangle.
Rectangle relativeTransformImageBrushRectangle = new Rectangle();
relativeTransformImageBrushRectangle.Width = 175;
relativeTransformImageBrushRectangle.Height = 90;
relativeTransformImageBrushRectangle.Stroke = Brushes.Black;
relativeTransformImageBrushRectangle.Fill = relativeTransformImageBrush;

'
' Create an ImageBrush with a relative transform and
' use it to paint a rectangle.
'
Dim relativeTransformImageBrush As New ImageBrush()
relativeTransformImageBrush.ImageSource = New BitmapImage(New Uri("sampleImages\pinkcherries.jpg", UriKind.Relative))

' Create a 45 rotate transform about the brush's center
' and apply it to the brush's RelativeTransform property.
Dim aRotateTransform As New RotateTransform()
aRotateTransform.CenterX = 0.5
aRotateTransform.CenterY = 0.5
aRotateTransform.Angle = 45
relativeTransformImageBrush.RelativeTransform = aRotateTransform

' Use the brush to paint a rectangle.
Dim relativeTransformImageBrushRectangle As New Rectangle()
relativeTransformImageBrushRectangle.Width = 175
relativeTransformImageBrushRectangle.Height = 90
relativeTransformImageBrushRectangle.Stroke = Brushes.Black
relativeTransformImageBrushRectangle.Fill = relativeTransformImageBrush

<Rectangle Width="175" Height="90" Stroke="Black">
  <Rectangle.Fill>
    <ImageBrush ImageSource="sampleImages\pinkcherries.jpg">
      <ImageBrush.RelativeTransform>
        <RotateTransform CenterX="0.5" CenterY="0.5" Angle="45" />
      </ImageBrush.RelativeTransform>
    </ImageBrush>
  </Rectangle.Fill>
</Rectangle>

W następnym przykładzie zastosowano również RotateTransform do ImageBrush, ale używa właściwości Transform zamiast właściwości RelativeTransform. Aby obrócić szczotkę wokół swojego środka, obiekt RotateTransform musi mieć ustawione CenterX i CenterY na współrzędne bezwzględne. Ponieważ prostokąt malowany pędzlem wynosi 175 o 90 pikseli, jego punkt środkowy wynosi (87,5, 45).

//
// Create an ImageBrush with a transform and
// use it to paint a rectangle.
//
ImageBrush transformImageBrush = new ImageBrush();
transformImageBrush.ImageSource =
    new BitmapImage(new Uri(@"sampleImages\pinkcherries.jpg", UriKind.Relative));

// Create a 45 rotate transform about the brush's center
// and apply it to the brush's Transform property.
RotateTransform anotherRotateTransform = new RotateTransform();
anotherRotateTransform.CenterX = 87.5;
anotherRotateTransform.CenterY = 45;
anotherRotateTransform.Angle = 45;
transformImageBrush.Transform = anotherRotateTransform;

// Use the brush to paint a rectangle.
Rectangle transformImageBrushRectangle = new Rectangle();
transformImageBrushRectangle.Width = 175;
transformImageBrushRectangle.Height = 90;
transformImageBrushRectangle.Stroke = Brushes.Black;
transformImageBrushRectangle.Fill = transformImageBrush;

'
' Create an ImageBrush with a transform and
' use it to paint a rectangle.
'
Dim transformImageBrush As New ImageBrush()
transformImageBrush.ImageSource = New BitmapImage(New Uri("sampleImages\pinkcherries.jpg", UriKind.Relative))

' Create a 45 rotate transform about the brush's center
' and apply it to the brush's Transform property.
Dim anotherRotateTransform As New RotateTransform()
anotherRotateTransform.CenterX = 87.5
anotherRotateTransform.CenterY = 45
anotherRotateTransform.Angle = 45
transformImageBrush.Transform = anotherRotateTransform

' Use the brush to paint a rectangle.
Dim transformImageBrushRectangle As New Rectangle()
transformImageBrushRectangle.Width = 175
transformImageBrushRectangle.Height = 90
transformImageBrushRectangle.Stroke = Brushes.Black
transformImageBrushRectangle.Fill = transformImageBrush

<Rectangle Width="175" Height="90" Stroke="Black">
  <Rectangle.Fill>
    <ImageBrush ImageSource="sampleImages\pinkcherries.jpg">
      <ImageBrush.Transform>
        <RotateTransform CenterX="87.5" CenterY="45" Angle="45" />
      </ImageBrush.Transform>
    </ImageBrush>
  </Rectangle.Fill>
</Rectangle>

Na poniższej ilustracji przedstawiono pędzel bez przekształcenia, z przekształceniem dla właściwości RelativeTransform i z przekształceniem dla właściwości Transform.

ustawienia

Ten przykład jest częścią większej próbki. Aby zapoznać się z kompletnym przykładem, zobacz przykład Przykład pędzli. Aby uzyskać więcej informacji na temat pędzli, zobacz WPF Brushes Overview.

Zobacz też

• Transform
• RelativeTransform
• Transform
• Brush
• Malowanie za pomocą kolorów stałych i gradientów — omówienie
• Malowanie za pomocą obrazów, rysunków i wizualizacji
• przekształcenia — omówienie