ImageBrush

WPF --- Графика и анимация WPF --- ImageBrush

Кисть ImageBrush позволяет заполнить область растровым изображением. Возможна работа с наиболее распространенными типами файлов, включая BMP, PNG, GIF и JPEG. Используемое изображение идентифицируется свойством ImageSource. Например, ниже показана кисть, которая рисует фон для Grid с применением изображения по имени logo.png, включенного в сборку в виде ресурса:

<Grid>
     <Grid.Background>
        <ImageBrush ImageSource="logo.png"></ImageBrush>
     </Grid.Background>
</Grid>

Свойство ImageSource работает таким же образом, как свойство Source элемента Image, а это означает, что его можно также устанавливать с помощью URI, указывающего на ресурс, внешний файл или местоположение в Интернете. Кроме того, можно создать кисть ImageBrush, использующую определенное в XAML-разметке векторное содержимое, за счет указания объекта DrawingImage в свойстве ImageSource.

Этот подход позволяет сократить накладные расходы (избегая наиболее дорогостоящих классов-наследников Shape) и он также применяется, когда с помощью векторного изображения создается повторяющийся шаблон.

Среда WPF учитывает любую информацию о прозрачности, которую находит в графическом изображении. Например, WPF поддерживает прозрачные области в файле GIF, а также прозрачные и полупрозрачные области в файле PNG.

В этом примере кисть ImageBrush применяется для рисования фона ячейки. В результате изображение растягивается для того, чтобы заполнить область. Если размеры Grid больше размеров исходного изображения, в нем могут появиться артефакты измененного размера (вроде общей размытости). Если форма Grid не соответствует пропорциям изображения, последнее будет деформировано, чтобы заполнить отведенную область.

Данным поведением можно управлять с помощью свойства ImageBrush.Stretch, присваивая ему одно из значений, перечисленных здесь. Например, значение Uniform позволяет масштабировать графическое изображение для заполнения контейнера с сохранением его пропорций, a None — рисовать изображение с натуральным размером (в этом случае часть изображения может быть усечена).

Если изображение меньше заполняемой области, то оно выравнивается согласно значениям свойств AlignmentX и AlignmentY. Незаполненная область остается прозрачной. Это происходит в случае применения масштабирования Uniform к заполняемой области, которая имеет другую форму (в этом случае будут получены белые полосы сверху, снизу и по сторонам). Это также имеет место, когда используется None, а область заполнения больше изображения.

С помощью свойства Viewbox можно вырезать небольшую часть изображения, которая интересует. Для этого понадобится указать четыре числа, описывающие прямоугольник, который нужно вырезать из исходного изображения. Первые два идентифицируют верхний левый угол вырезаемого прямоугольника, а оставшиеся два — его высоту и ширину. Единственная ловушка заключается в том, что Viewbox использует относительную координатную систему — подобно градиентным кистям. Эта система назначает левому верхнему углу изображения координаты (0,0), а нижнему правому — (1.1).

Чтобы понять, как работает Viewbox, взгляните на следующую разметку:

<ImageBrush ImageSource="logo.jpg" Stretch="Uniform"
   Viewbox="0.4,0.5 0.2,0.2"></ImageBrush></pre>

Здесь Viewbox начинается в точке (0.4, 0.5), которая находится почти в середине изображения. (Формально координата X равна произведению 0.4 на ширину, a Y — произведению 0.5 на высоту.) Затем прямоугольник простирается в ширину на 20% оставшейся ширины и высоты изображения (прямоугольник имеет размеры 0.2, умноженное на ширину, и 0.2, умноженное на высоту изображения). Вырезанная часть затем растягивается или центрируется, в зависимости от свойств Stretch, AlignmentX и AlignmentY.

Свойство Viewbox иногда полезно при повторном использовании частей одного и того же изображения для создания некоторых эффектов. Однако если заранее известно, что понадобится только часть изображения, очевидно, имеет смысл вырезать его в каком-нибудь графическом редакторе.