Dela via

Översikt över penselomvandling

Klassen Brush innehåller två transformeringsegenskaper: Transform och RelativeTransform. Med egenskaperna kan du rotera, skala, snedställa och översätta en pensels innehåll. Det här avsnittet beskriver skillnaderna mellan dessa två egenskaper och innehåller exempel på deras användning.

Förutsättningar

För att förstå det här avsnittet bör du förstå funktionerna i penseln som du transformerar. För LinearGradientBrush och RadialGradientBrush, se Painting with Solid Colors and Gradients Overview (Översikt över målning med solida färger och toningar). Information om ImageBrush, DrawingBrusheller VisualBrushfinns i Målning med bilder, ritningar och visuella objekt. Du bör också känna till de 2D-transformationer som beskrivs i översikten över transformationer.

Skillnader mellan transform- och RelativeTransform-egenskaperna

När du använder en transformation på en pensels egenskap Transform behöver du känna till storleken på det målade området för att kunna transformera penselinnehållet med dess mittpunkt som referens. Anta att det målade området är 200 enhetsoberoende bildpunkter breda och 150 höga. Om du använde en RotateTransform för att rotera penselns slutresultat 45 grader omkring dess centrum, skulle du ge RotateTransform en CenterX på 100 och en CenterY på 75.

När du tillämpar en transformering på en pensels egenskap RelativeTransform tillämpas den transformeringen på penseln innan dess utdata mappas till det målade området. I följande lista beskrivs i vilken ordning en pensels innehåll bearbetas och transformeras.

  1. Bearbeta penselns innehåll. För en GradientBrushinnebär det att bestämma gradientområdet. För en TileBrushmappas Viewbox till Viewport. Detta blir penselns utdata.

  2. Projicera borstens resultat på den 1 x 1-transformationsrektangeln.

  3. Använd penselns RelativeTransform, om den har en.

  4. Projicera de transformerade utdata på området som ska målas.

  5. Använd penselns Transform, om den har en.

Eftersom RelativeTransform används när penselns utdata mappas till en rektangel på 1 x 1 verkar transformeringscentret och förskjutningsvärdena vara relativa. Om du till exempel använde en RotateTransform för att rotera penselns resultat 45 grader kring dess mittpunkt, skulle du ge RotateTransform en CenterX på 0,5 och en CenterY på 0,5.

Följande bild visar utdata från flera penslar som har roterats med 45 grader med hjälp av egenskaperna RelativeTransform och Transform.

egenskaper för RelativeTransform och Transform

Använda RelativeTransform med en TileBrush

Eftersom panelpenslar är mer komplexa än andra penslar kan det ge oväntade resultat om du använder en RelativeTransform på en. Ta till exempel följande bild.

Källbilden

I följande exempel används en ImageBrush för att måla ett rektangulärt område med föregående bild. Den tillämpar en RotateTransform på ImageBrush-objektets egenskap RelativeTransform och anger dess egenskap Stretch till UniformToFill, vilket bör bevara bildens proportioner när den sträcks ut för att helt fylla rektangeln.

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

Det här exemplet genererar följande utdata:

Utdata som har transformerats

Observera att bilden är förvrängd, även om penselns Stretch har angetts till UniformToFill. Det beror på att den relativa transformeringen tillämpas efter att penselns Viewbox har mappats till dess Viewport. I följande lista beskrivs varje steg i processen:

  1. Projicera penselns innehåll (Viewbox) på dess baspanel (Viewport) med hjälp av penselns Stretch inställning.

    Sträck ut viewbox så att den passar i viewport

  2. Projicera basplattan på 1 x 1-transformationsrektangeln.

    Mappa visningsporten till transformeringsrektangeln

  3. Använd RotateTransform.

    Använd den relativa transformeringen

  4. Projicera den transformerade basplattan på det område som ska målas.

    Projicera den transformerade penseln på utdataområdet

Exempel: Rotera en ImageBrush 45 grader

I följande exempel tillämpas en RotateTransform på egenskapen RelativeTransform för en ImageBrush. RotateTransform-objektets egenskaper för CenterX och CenterY är båda inställda på 0,5, de relativa koordinaterna för innehållets mittpunkt. Därför roteras penselns innehåll ungefär i mitten.

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

I nästa exempel tillämpas även en RotateTransform på en ImageBrush, men använder egenskapen Transform i stället för egenskapen RelativeTransform. Om du vill rotera penseln i mitten måste RotateTransform-objektets CenterX och CenterY anges till absoluta koordinater. Eftersom rektangeln som målas av penseln är 175 x 90 bildpunkter är dess mittpunkt (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>

Följande bild visar penseln utan en transformation, med transformation tillämpad på egenskapen RelativeTransform och med transformation tillämpad på egenskapen Transform.

Brush RelativeTransform och Transform inställningar

Det här exemplet är en del av ett större exempel. För det fullständiga exemplet, se Brushes Sample . Mer information om penslar finns i översikten över WPF-penslar.

Se även