Visão geral da transformação Brush

A classe Brush fornece duas propriedades de transformação: Transform e RelativeTransform. As propriedades permitem girar, dimensionar, distorcer e traduzir o conteúdo de um pincel. Este tópico descreve as diferenças entre essas duas propriedades e fornece exemplos de seu uso.

Pré-requisitos

Para entender este tópico, você deve compreender as características do pincel que está transformando. Para LinearGradientBrush e RadialGradientBrush, consulte a Visão Geral da Pintura com Cores Sólidas e Gradientes. Para ImageBrush, DrawingBrushou VisualBrush, consulte Pintura com Imagens, Desenhos e Visuais. Você também deve estar familiarizado com as transformações 2D descritas na Visão Geral das Transformações.

Diferenças entre as propriedades Transform e RelativeTransform

Ao aplicar uma transformação à propriedade de Transform de um pincel, você precisará saber o tamanho da área pintada se quiser transformar o conteúdo do pincel em relação ao seu centro. Suponha que a área pintada tenha 200 pixels independentes de dispositivo de largura e 150 pixels de altura. Se você usou um RotateTransform para girar a saída do pincel 45 graus sobre seu centro, você daria um RotateTransformCenterX de 100 e um CenterY 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 na qual o conteúdo de um pincel é processado e transformado.

1. Processe o conteúdo do pincel. Para um GradientBrush, isso significa determinar a área de gradiente. Para um TileBrush, o Viewbox é mapeado para o Viewport. Isso se torna o resultado do pincel.

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

3. Aplique o pincel RelativeTransform, se ele tiver um.

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

5. Aplique o pincel Transform, se ele tiver um.

Como o RelativeTransform é aplicado enquanto a saída do pincel é mapeada para um retângulo de 1 x 1, os valores de centro da transformação e de deslocamento parecem ser relativos. Por exemplo, se você usou um RotateTransform para girar a saída do pincel 45 graus sobre seu centro, você atribuiria um valor de 0,5 ao RotateTransformCenterX e ao CenterY.

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

Usando RelativeTransform com um TileBrush

Como pincéis de azulejo são mais complexos do que outros pincéis, aplicar um RelativeTransform a um pode produzir resultados inesperados. Por exemplo, veja a imagem a seguir.

O exemplo a seguir usa um ImageBrush para pintar uma área retangular com a imagem anterior. Aplica um RotateTransform à propriedade ImageBrush do objeto RelativeTransform e define sua propriedade Stretch para UniformToFill, o que deve preservar a proporção da imagem quando ela é estendida 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>

Este exemplo produz a seguinte saída:

O de

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

1. Aplique o conteúdo do pincel (Viewbox) no bloco base (Viewport) usando a configuração do pincel Stretch.

   

2. Projete o bloco base no retângulo de transformação 1 x 1.

   

3. Aplique o RotateTransform.

   

4. Projete o azulejo base transformado na área que será pintada.

   

Exemplo: Girar um ImageBrush 45 graus

O exemplo a seguir aplica um RotateTransform à propriedade RelativeTransform de um ImageBrush. As propriedades RotateTransform e CenterX do objeto CenterY são ambas definidas como 0,5, que são 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 RotateTransformImageBrush, mas usa a propriedade Transform em vez da propriedade RelativeTransform. Para girar o pincel sobre seu centro, as coordenadas RotateTransform e CenterX do objeto CenterY devem ser definidas como absolutas. Como o retângulo que está sendo pintado pelo pincel é de 175 por 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 RelativeTransform e com a transformação aplicada à propriedade Transform.

configurações de

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

Consulte também

• Transform
• RelativeTransform
• Transform
• Brush
• Visão Geral da Pintura com Cores Sólidas e Gradientes
• Pintura com Imagens, Desenhos e Elementos Visuais
• Visão geral de transformações