Información general sobre la transformación de pinceles

Artículo
08/10/2011

La clase Brush ofrece dos propiedades de transformación: Transform y RelativeTransform. Estas propiedades permiten girar, sesgar y convertir el contenido de un pincel, además de ajustar su escala. En este tema se describen las diferencias entre estas dos propiedades y se proporcionan ejemplos de su uso.

Requisitos previos

Para entender este tema, debe entender las características del pincel que vaya a transformar. Para LinearGradientBrush y RadialGradientBrush, consulte Información general sobre el dibujo con colores sólidos y degradados. Para ImageBrush, DrawingBrush o VisualBrush, consulte Pintar con imágenes, dibujos y elementos visuales. También debe estar familiarizado con las transformaciones 2D descritas en Información general sobre transformaciones.

Diferencias entre las propiedades Transform y RelativeTransform

Cuando se aplica una transformación a la propiedad Transform de un pincel, es preciso conocer el tamaño del área pintada si se desea transformar el contenido del pincel sobre su centro. Supongamos que el área pintada tiene 200 píxeles independientes del dispositivo de ancho y 150 de alto. Si utiliza RotateTransform para girar la salida del pincel 45 grados sobre su centro, se establece la propiedad CenterX en 100 y la propiedad CenterY en 75 para RotateTransform.

Cuando se aplica una transformación a la propiedad RelativeTransform de un pincel, esa transformación se aplica al pincel antes de asignar su salida al área pintada. En la lista siguiente se describe el orden en que se procesan y transforman los contenidos de un pincel.

Procese el contenido del pincel. Para GradientBrush, esto significa determinar el área de degradado. Para TileBrush, se asigna Viewbox a Viewport. Ésta se convierte en la salida del pincel.
Proyecte la salida del pincel sobre el rectángulo de transformación de 1 x 1.
Aplique la propiedad RelativeTransform del pincel, si la tiene.
Proyecte la salida transformada sobre el área que desea pintar.
Aplique la propiedad Transform del pincel, si la tiene.

Dado que RelativeTransform se aplica mientras la salida del pincel está asignada a un rectángulo de 1 x 1, el centro de la transformación y los valores de desplazamiento parecen ser relativos. Por ejemplo, si utilizó RotateTransform para girar la salida del pincel 45 grados sobre su centro, se establecerá la propiedad CenterX en 0,5 y la propiedad CenterY en 0,5 para RotateTransform.

En la ilustración siguiente se muestra la salida de varios pinceles que se han girado 45 grados mediante las propiedades RelativeTransform y Transform.

Propiedades RelativeTransform y Transform

Utilizar RelativeTransform con un objeto TileBrush

Debido a que los pinceles en mosaico son más complejos que los demás pinceles, aplicar RelativeTransform a uno de ellos puede dar lugar a resultados inesperados. Por ejemplo, tomemos la imagen siguiente.

Imagen de origen

En el ejemplo siguiente se utiliza ImageBrush para pintar una área rectangular con la imagen anterior. Se aplica RotateTransform a la propiedad RelativeTransform del objeto ImageBrush y se establece su propiedad Stretch en UniformToFill, lo que debería conservar la relación de aspecto de la imagen cuando se ajuste para rellenar completamente el rectá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 ejemplo produce el siguiente resultado.

Resultado transformado

Observe que la imagen se distorsiona, aunque la propiedad Stretch del pincel se estableció en UniformToFill. Esto se debe a que la transformación relativa se aplica después de asignar la propiedad Viewbox del pincel a su propiedad Viewport. En la lista siguiente se describen todos los pasos del proceso:

Proyectar el contenido del pincel (Viewbox) sobre su mosaico base (Viewport) utilizando el valor de Stretch del pincel.
Proyectar el mosaico base sobre el rectángulo de transformación de 1 x 1.
Aplicar RotateTransform.
Proyectar el mosaico base transformado sobre el área que se va a pintar.

Ejemplo: Girar un objeto ImageBrush 45 grados

En el ejemplo siguiente se aplica RotateTransform a la propiedad RelativeTransform de un objeto ImageBrush. Las propiedades CenterX y CenterY del objeto RotateTransform se establecen en 0,5, las coordenadas relativas del punto central del contenido. Como resultado, el contenido del pincel se gira sobre su centro.

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

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

En el ejemplo siguiente también se aplica RotateTransform a un objeto ImageBrush, pero se utiliza la propiedad Transform en lugar de la propiedad RelativeTransform. Para girar el pincel sobre su centro, las propiedades CenterX y CenterY del objeto RotateTransform deben establecerse en coordenadas absolutas. Dado que el pincel pinta un rectángulo que es de 175 por 90 píxeles, su punto central es (87,5, 45).

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

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

En la ilustración siguiente se muestra el pincel sin transformación, con la transformación aplicada a la propiedad RelativeTransform y con la transformación aplicada a la propiedad Transform.

Valores de Brush RelativeTransform y Transform

Este ejemplo forma parte de un ejemplo mayor. Para obtener el ejemplo completo, vea Brushes Sample. Para obtener más información sobre pinceles, consulte Información general sobre pinceles de WPF.