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

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

Необходимые компоненты

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

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

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

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

  1. Обработка содержимого кисти. Для GradientBrush , это означает определение области градиента. Для объект TileBrush сопоставлен с Viewbox Viewport . Это становится результатом работы кисти.

  2. Проекция результата работы кисти на прямоугольник преобразования 1 x 1.

  3. Примените кисть RelativeTransform , если она есть.

  4. Проекция преобразованного результата работы на закрашиваемую область.

  5. Примените кисть Transform , если она есть.

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

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

Свойства RelativeTransform и Transform

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

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

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

В следующем примере используется ImageBrush для рисования прямоугольной области с предыдущим изображением. Он применяет RotateTransform к ImageBrush RelativeTransform свойству объекта и устанавливает для его 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 . В следующем списке описан каждый шаг процесса:

  1. Project содержимое кисти () в Viewbox базовую плитку ( Viewport ) с помощью Stretch параметра кисти.

    Растянуть Viewbox для соответствия окну просмотра

  2. Проекция базового мозаичного элемента на прямоугольник преобразования 1 x 1.

    Сопоставление окна просмотра к преображение прямоугольника

  3. Примените RotateTransform .

    Применить относительное преображение

  4. Проекция преобразованного базового мозаичного элемента на закрашиваемую область.

    Спроецировать преобразованную кисть на закрашиваемую область

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

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

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

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

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

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

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

См. также