Visão geral da transformação de pincel

A classe Brush fornece duas propriedades de transformação: Transform e RelativeTransform. As propriedades permitem que você gire, ajuste a escala, distorça e traduza o conteúdo do pincel. Este tópico descreve as diferenças entre essas duas propriedades e fornece exemplos de uso.

Pré-requisitos

Para entender esse tópico, você deve compreender os recursos do pincel que está transformando. Para LinearGradientBrush e , consulte a Visão geral de pintura com cores sólidas e RadialGradientBrushgradientes. Para ImageBrush, ou VisualBrush, DrawingBrushconsulte Pintura com imagens, desenhos e elementos visuais. Você também deve estar familiarizado com transformações 2D descritas em Transforms Overview (Visão geral de transformações).

Diferenças entre as propriedades Transformação e RelativeTransform

Ao aplicar uma transformação à propriedade de Transform um pincel, você precisa saber o tamanho da área pintada se quiser transformar o conteúdo do pincel em seu centro. Suponha que a área pintada tenha 200 pixels independentes de dispositivo de largura e 150 de altura. Se você usasse um para girar a saída do pincel 45 graus em torno de seu centro, você daria o RotateTransform a CenterX de 100 e um CenterYRotateTransform de 75.

Quando você aplica uma transformação à propriedade de RelativeTransform um pincel, essa transformação é aplicada ao pincel antes que sua saída seja mapeada para a área pintada. A lista a seguir descreve a ordem em que os conteúdos de um pincel são processados e transformados.

1. Processar o conteúdo do pincel. Para um GradientBrush, isso significa determinar a área do gradiente. Para um TileBrush, o é mapeado para o ViewboxViewport. Ele se torna a saída do pincel.

2. Projete a saída do pincel para o retângulo de transformação 1 x 1.

3. Aplique o pincel, RelativeTransformse tiver.

4. Projete a saída transformada na área pintada.

5. Aplique o pincel, Transformse tiver.

Como o RelativeTransform é aplicado enquanto a saída do pincel é mapeada para um retângulo 1 x 1, os valores de transformação do centro e deslocamento parecem ser relativos. Por exemplo, se você usasse um para girar a saída do pincel 45 graus em torno de seu centro, você daria o RotateTransform a CenterX de 0,5 e um CenterYRotateTransform de 0,5.

A ilustração a seguir mostra a saída de vários pincéis que foram girados em 45 graus usando as RelativeTransform propriedades e Transform .

Utilizando RelativeTransform com um TileBrush

Como os pincéis de mosaico são mais complexos do que outros pincéis, a aplicação de um a um RelativeTransform pode produzir resultados inesperados. Por exemplo, considere a seguinte imagem.

O exemplo a seguir usa um ImageBrush para pintar uma área retangular com a imagem anterior. Ele aplica a à ImageBrush propriedade do RelativeTransform objeto e define sua Stretch propriedade como UniformToFill, que deve preservar a RotateTransform proporção da imagem quando ela é esticada para preencher completamente o retângulo.

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

Esse exemplo gera a saída a seguir:

Observe que a imagem está distorcida, mesmo que o pincel tenha Stretch sido definido como UniformToFill. Isso porque a transformação relativa é aplicada depois que o pincel é mapeado Viewbox para o seu Viewport. A lista a seguir descreve cada etapa do processo:

1. Projete o conteúdo do pincel () em seu bloco base (ViewboxViewport) usando a configuração do Stretch pincel.

   

2. Projete a saída do bloco base para o retângulo de transformação 1 x 1.

   

3. Aplique o RotateTransformarquivo .

   

4. Projete o bloco base transformado na área pintada.

   

Exemplo: gire um ImageBrush em 45 graus

O exemplo a seguir aplica a RotateTransform à RelativeTransform propriedade de um ImageBrusharquivo . As RotateTransform propriedades e o CenterXCenterY objeto são definidos como 0,5, as coordenadas relativas do ponto central do conteúdo. Como resultado, o conteúdo do pincel é girado em torno de seu centro.

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

O próximo exemplo também se aplica a um ImageBrush, mas usa a TransformRotateTransform propriedade em vez da RelativeTransform propriedade. Para girar o pincel em torno de CenterX seu centro, o RotateTransform objeto deve CenterY ser definido como coordenadas absolutas. Como o retângulo que está sendo pintado pelo pincel tem 175 x 90 pixels, seu ponto central é (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>

A ilustração a seguir mostra o pincel sem uma transformação, com a transformação aplicada à propriedade e com a transformação aplicada à RelativeTransformTransform propriedade.

Este exemplo é parte de um exemplo maior. Para obter o exemplo completo, consulte Exemplo de pincéis. Para obter mais informações sobre pincéis, consulte WPF Brushes Overview (Visão geral de pincéis do WPF).

Confira também

• Transform
• RelativeTransform
• Transform
• Brush
• Visão geral da pintura com cores sólidas e gradientes
• Pintando com imagens, desenhos e visuais
• Visão geral de transformações