Visão Geral de Transformação de Brush (Pincel)

Artigo
08/25/2010

A classe pincel fornece duas propriedades de transformação: Transform e RelativeTransform. As propriedades permitem que você rotacione, redimensione, envieze e translade os conteúdos de um pincel. Este tópico descreve as diferenças entre essas duas propriedades e fornece exemplos do seu uso.

Pré-requisitos

Para entender este tópico, você deve entender as características do pincel que você está transformando. Para LinearGradientBrush e RadialGradientBrush, veja Painting with Solid Colors and Gradients Overview. Para ImageBrush, DrawingBrush ou VisualBrush, veja Pintura com Imagens, Desenhos e Visuais. Você também deve estar familiarizado com transformações 2D descritas em Visão Geral sobre Transformações.

Diferenças entre as Propriedades Transform e RelativeTransform

Quando você aplica uma transformação à propriedade Transform de um pincel, você precisa saber o tamanho da área de pintura se covê quer transformar os conteúdos do pincel em torno do seu centro. Suponha que a área de pintura tenha 200 pixels independentes de dispositivo de largura e 150 de altura. Se voce utilizou um RotateTransform para rotacionar a saída do pincel em 45 graus em torno do seu centro, você daria à RotateTransform um CenterX de 100 e um CenterY de 75.

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

Processa os conteúdos do pincel. Para um GradientBrush, isso significa determinar a área do gradiente. Para um TileBrush, a Viewbox é mapeada no Viewport. Isso se torna a saída do pincel.
Projeta a saída do pincel no retângulo de transformação 1 x 1.
Aplica o RelativeTransform do pincel, se houver.
Projeta a saída transformada na área de pintura.
Aplica o Transform do pincel, se houver.

Porque o RelativeTransform é aplicado enquanto a saída do pincel é mapeada a um retângulo 1 x 1, os valores de centro de deslocamento da transformação parecem ser relativos. Por exemplo, se você utilizou um RotateTransform para rotacionar a saída do pincel em 45 graus em torno do seu centro, você daria à RotateTransform um CenterX de 0.5 e um CenterY de 0.5.

A ilustração a seguir mostra a saída de diversos pincéis que foram rotacionados em 45 graus utilizando as propriedades RelativeTransform e Transform.

Propriedades RelativeTransform e Transform

Utilizando RelativeTransform com um TileBrush

Porque pincéis de ladrilho (tile brushes) são mais complexos que outros pincéis, aplicar um RelativeTransform a um pode produzir resultados inesperados. Por exemplo, pegue a seguinte imagem.

A imagem de origem

O exemplo a seguir utiliza um ImageBrush para pintar uma área retangular com a imagem anterior. Aplica uma RotateTransform à propriedade RelativeTransform do objeto ImageBrush, e define a propriedade Stretch como UniformToFill, o que deveria preservar a razão de aspecto da imagem quando redimensionado 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 produz a seguinte saída.

A saída transformada

Observe que a imagem é distorcida, apesar de o Stretch do pincel ter sido definido como UniformToFill. Isso ocorre porque a transformação relativa é aplicada após o Viewbox do pincel ser mapeado para seu Viewport. A lista a seguir descreve cada passo do processo:

Projeta o conteúdo do pincel (Viewbox) no seu ladrilho base (Viewport) utilizando a configuração Stretch do pincel.
Projeta o ladrilho base no retângulo de transformação 1 x 1.
Aplica o RotateTransform.
Projeta o ladrilho base transformado na área de pintura.

Exemplo: Girar um ImageBrush 45 graus

O exemplo a seguir aplica um RotateTransform à propriedade RelativeTransform de um ImageBrush. As propriedades CenterX e CenterY do objeto RotateTransform são ambas definidas como 0.5, as coordenadas relativas do ponto central do conteúdo. Como resultado, os conteúdos do pincel são rotacionados em torno do 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;

<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 aplica umRotateTransform a um ImageBrush, mas utiliza a propriedade Transform em vez da propriedade RelativeTransform. Para rotacionar o pincel em torno do seu centro, o CenterX e CenterY do objeto RotateTransform devem ser definidos em coordenadas absolutas. Porque o retângulo 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;

<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 RelativeTransform, e com a transformação aplicada à propriedade Transform.

Configurações RelativeTransform e Transform de pincel

Este exemplo é parte de um exemplo maior. Para o exemplo completo, veja Exemplo de pincéis. Para mais informações sobre pincéis, consulteWPF Brushes Overview.