Общие сведения о преобразованиях объекта Brush

Статья
08/11/2011

Класс Brush предоставляет два свойства преобразования: Transform и RelativeTransform. Данные свойства позволяют выполнять поворот, масштабирование, наклон и преобразование содержимого кисти. В данном разделе описываются различия между этими двумя свойствами и приводятся примеры их использования.

Предварительные требования

Чтобы усвоить материал данного раздела, необходимо понимать возможности преобразуемой кисти. Дополнительные сведения о LinearGradientBrush и RadialGradientBrush см. в разделе Общие сведения о закраске сплошным цветом и градиентом. Дополнительные сведения о классах ImageBrush, DrawingBrush и VisualBrush см. в разделе Рисование с помощью объектов Image, Drawing и Visual. Кроме того, необходимо ознакомиться с двумерными преобразованиями, описанными в разделе Общие сведения о классах Transform.

Различия между свойствами Transform и RelativeTransform

При применении преобразования Transform к свойству кисти необходимо знать размер закрашиваемой области, если требуется выполнить преобразование содержимого кисти относительно ее центра. Предположим, что закрашиваемая область имеет ширину в 200 и высоту в 150 независимых от устройства точек. Если для поворота выходного значения кисти на 45 градусов вокруг его центра используется объект RotateTransform, то необходимо чтобы для RotateTransform значение свойства CenterX равнялось 100 и значение свойства CenterY равнялось 75.

Если выполняется преобразование свойства RelativeTransform кисти, то данное преобразование применяется к кисти перед сопоставлением ее выходного значения закрашиваемой области. В следующем списке представлен порядок, в соответствии с которым необходимо выполнять обработку и преобразование содержимого кисти:

Обработать содержимое кисти. Для GradientBrush это означает определение области градиента. Для TileBrush свойство Viewbox сопоставляется со свойством Viewport. Это становится выходным значением кисти.
Спроецировать выходное значение кисти на прямоугольник преобразования 1 x 1.
Применить преобразование RelativeTransform кисти, если таковое имеется.
Спроецировать преобразованное выходное значение на закрашиваемую область.
Применить преобразование Transform кисти, если таковое имеется.

Так как преобразование RelativeTransform применяется при сопоставлении выходного значения кисти прямоугольнику 1 x 1, центр преобразований и значения смещения считаются относительными. Например, если используется преобразование RotateTransform для поворота выходного значения кисти на 45 градусов вокруг его центра, то необходимо задать для данного преобразования RotateTransform для свойства CenterX значение 0.5 и для свойства CenterY значение 0.5.

На следующем рисунке показано выходное значение нескольких кистей, повернутых на 45 градусов с помощью свойств RelativeTransform и Transform.

Свойства RelativeTransform и Transform

Использование преобразования RelativeTransform с TileBrush

Так как мозаичные кисти являются более сложными, чем другие кисти, применение к ним преобразования RelativeTransform может привести к непредсказуемым результатам. Например, рассмотрим следующий рисунок.

Исходное изображение

В следующем примере объект ImageBrush используется для закраски прямоугольной области приведенным выше изображением. В нем преобразование RotateTransform применяется к свойству RelativeTransform объекта ImageBrush и для его свойства Stretch задано значение UniformToFill для сохранения пропорций рисунка при его растяжении для полного заполнения прямоугольника.

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

В данном примере получается следующий результат:

Преобразованный вывод

Обратите внимание, что изображение искажено, хотя для свойства Stretch кисти было задано значение UniformToFill. Это произошло, потому что относительное преобразование применяется после сопоставления свойства Viewbox кисти свойству Viewport. В следующем списке представлены все шаги процесса:

Спроецировать содержимое кисти (Viewbox) на базу ее мозаичного заполнения (Viewport) с помощью параметра Stretch кисти.
Спроецировать базу мозаичного заполнения на прямоугольник преобразования 1 x 1.
Применить преобразование RotateTransform.
Спроецировать преобразованную базу мозаичного заполнения на область закраски.

Пример. Поворот объекта ImageBrush на 45 градусов

В следующем примере преобразование RotateTransform применяется к свойству RelativeTransform объекта ImageBrush. Для объекта RotateTransform свойства CenterX и CenterY оба задаются равными 0,5 и данные значения являются относительными координатами точки центра содержимого. В результате содержимое кисти повернуто относительно его центра.

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

В следующем примере также применяется преобразование RotateTransform к объекту ImageBrush, но вместо свойства RelativeTransform используется свойство Transform. Чтобы повернуть кисть относительно ее центра, для объекта RotateTransform свойствам CenterX и CenterY должны быть присвоены абсолютные координаты. Поскольку закрашиваемый кистью прямоугольник имеет размеры 175 на 90 точек, его центральная точка будет иметь координаты (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>

На следующем изображении показана кисть без преобразования, с преобразованием, примененным к свойству RelativeTransform и с преобразованием, примененным к свойству Transform.

Параметры кисти RelativeTransform и Transform

Данный пример является частью большего примера. Полный код примера см. на веб-странице Пример Brushes. Дополнительные сведения о кистях см. в разделе Общие сведения о кистях WPF.