Главная » Silverlight » Кисти, преобразования и растровые изображения

0

В предыдущей главе мы начали рассмотрение встроенной в Silverlight двухмерной модели рисования. Было рассмотрено использование классов, производных от класса Shape, таких как Rectangle, Ellipse, Polygon, Polyline и Path, для создания фигур. Однако для создания двухмерных векторных рисунков для мощных приложе­ний Silverlight фигур недостаточно. В данной главе будут представлены дополнитель­ные средства рисования.

В первую очередь мы обсудим экзотические кисти Silverlight, позволяющие созда­вать градиенты, перекрывающиеся шаблоны и растровые изображения, которыми можно заполнять фигуры. Затем будет рассмотрено использование средств управления прозрачностью для объединения изображений и элементов. И наконец, мы представим объекты преобразований, изменяющие внешний вид любого элемента путем его мас­штабирования, поворота или наклона. С помощью перечисленных средств можно соз­давать разнообразные визуальные эффекты, включая отражение, сияние и тени.

Новые средства. В конце данной главы будут описаны три новых средства Silverlight. Наиболее впечатляющее — перспективные преобразования, позволяющие имитировать трехмерные эффекты. Затем рассматривается раскрашивание пикселей — технология наложения сложных визуальных эффектов на любой элемент. И наконец, будет представлен класс WriteableBitmap, предназначенный для изменения отдельных пикселей растрового изображения, даже когда оно уже отображено на экране..

Кисти

Кисть заполняет заданную область, в качестве которой может выступать фон, передний план, рамка элемента, штрих или фигура. Для элементов Silverlight кисти задаются с помощью свойств Foreground, Background и BorderBrush. Для фигур ки­сти задаются в свойствах Fill и Stroke.

В предыдущих главах кисти применялись неоднократно, однако в большинстве слу­чаев использовалась наиболее простая кисть SolidColorBrush. Без сомнения, она весь­ма полезна, однако существует ряд более мощных классов, производных от System. Windows .Media. Brush и позволяющих создавать экзотические эффекты. Классы кистей перечислены в табл. 9.1.

Таблица 9.1. Классы кистей

Имя кисти

Описание

SolidColorBrush

Заполнение области одним цветом

LinearGradientBrush

Заполнение области линейным градиентом; оттенок плавно

переходит от одного цвета к другому (затем, возможно, к третьему,

четвертому и т.д.)

RadialGradientBrush

Заполнение области радиальным градиентом; от линейного он

отличается тем, что цвет изменяется вдоль радиуса

ImageBrush

Заполнение области растровым изображением, которое может

растягиваться, масштабироваться, перекрываться и т.д.

VideoBrush

Заполнение области медийным элементом MediaElement,

воспроизводящим видеофайл; таким образом, видеофайл можно

воспроизводить в любой фигуре или любом элементе

В данной главе рассматривается использование кистей linearGradientBrush, RadialGradientBrush и ImageBrush. Кисть VideoBrush рассматривается в главе 11 при обсуждении медийных средств.

Кисть LinearGradientBrush

Эта кисть позволяет создавать заливку, цвет которой плавно изменяется по линей­ному закону.

Ниже приведена разметка прямоугольника, заполненного простейшим линейным градиентом. Цвет заливки изменяется от синего в левом верхнем углу до белого в пра­вом нижнем углу.

<Rectangle Width="150" Height="100"> <Rectangle.Fill> <LinearGradientBrush > <GradientStop Color="Blue" Offset="0"/> <GradientStop Color="White" Offset="l" /> </LinearGradientBrush> </Rectangle.Fill>

</Rectangle>

Результат показан в верхней части рис. 9.1.

Для создания первого градиента нужно добавить по одному элементу GradientStop для каждого цвета. Цвет размещается в градиенте с помощью свойства Offset (Смещение), которое может принимать значение от 0 до 1. В данном примере элемент GradientStop для синего цвета имеет смещение 0. Это означает, что синий цвет разме­щается в самом начале градиента. Для белого цвета смещение равно 1, следовательно, белый цвет размещается в самом конце градиента. Значения Offset определяют, как быстро цвет изменяется от одного к другому. Например, если для белого цвета устано­вить смещение 0.5, градиент начнется с синего цвета в левом верхнем углу и перейдет в белый цвет посредине пути (в точке между двумя противоположными углами прямоу­гольника). Правая нижняя часть прямоугольника будет полностью белой (второй сверху прямоугольник на рис. 9.1).

Приведенная выше разметка создает градиент с диагональным заполнением, изме­няющийся от одного угла прямоугольника до противоположного. С помощью свойств StartPoint и EndPoint кисти LinearGradientBrush можно создавать градиенты, из­меняющиеся в любом заданном направлении. Эти свойства задают точку, в которой

Рис. 9.1. Прямоугольники, заполненные разными линейными градиентами

начинает изменяться первый цвет, и точку, в которой заканчивает изменяться послед­ний цвет. Необходимо учитывать, что свойства StartPoint и EndPoint содержат не аб­солютные, а относительные координаты точек. Объект LinearGradientBrush присваи­вает координаты 0, 0 левому верхнему углу и координаты 1,1 — правому нижнему углу заполняемой области независимо от ее высоты или ширины.

Чтобы создать горизонтальный градиент (третий сверху на рис. 9.1), необходимо установить начальную точку в левый верхний угол 0, 0, а конечную точку — в левый нижний угол 0,1. Аналогично, чтобы создать вертикальный градиент, начальная точка должна иметь координаты 0, 0, а конечная — 1,0.

Начальная и конечная точки не обязательно должны совпадать с углами заполня­емой области. Например, если присвоить начальной точке координаты 0,0, а конеч­ной — 0,0.5, будет создан сжатый линейный градиент: первый цвет начинается на самом верху области, а второй заканчивается посредине области. Нижняя часть обла­сти заполняется вторым цветом. Изменить такое поведение градиента можно с помо­щью свойства LinearGradientBrush.SpreadMethod. При установленном по умолчанию значении Pad область за пределами градиента заполняется ближайшим цветом. При значении Reflect градиент "переворачивается", т.е. сначала первый цвет вытесняется вторым, а затем второй — первым (четвертый сверху градиент на рис. 9.1). При значе­нии Repeat заданная последовательность цветов повторяется.

Градиент может содержать более двух цветов. Для этого в кисть нужно добавить более двух объектов GradientStop.

<Rectangle Width="150" Height="100"> <Rectangle.Fill> CLinearGradientBrush StartPoint="0,0" EndPoint="l,1"> <GradientStop Color="Yellow" 0ffset="0.0" /> <GradientStop Color="Red" 0ffset="0.25" />

<GradientStop Color="Blue" 0ffset="0.75" /> <GradientStop Color="LimeGreen" 0ffset="1.0" /> </LinearGradientBrush> </Rectangle.Fill>

</Rectangle>

Для каждого объекта GradientStop нужно задать смещение Offset. Если смещение наращивается равномерно, полоски имеют одну и ту же ширину. Но можно задать, на­пример, быстрое изменение градиента в начале и медленное в конце, например, если установить ряд смещений 0, 0.1, 0.2, 0.4, 0.6 и 1.

Не забывайте, что кисти можно применять не только в фигурах. Кисть Linear­GradientBrush можно вставить в любом месте разметки, в котором разрешен объект SolidColorBrush, например в свойство Background для заполнения фона любого эле­мента; в свойство Foreground — для заполнения цветом текста (рис. 9.2); или в свойство BorderBrush — для заполнения рамки (не области, ограниченной рамкой, а самой рамки).

Рис. 9.2. Присвоение кисти LinearGradientBrush СВОЙСТВУ TextBlock. Foreground

Кисть RadialGradientBrush

Объект RadialGradientBrush работает аналогично объекту LinearGradientBrush. Он тоже принимает последовательность цветов с разными смещениями. Как и в Linear­GradientBrush, в нем можно задать произвольное количество цветов. Отличие состоит лишь в способе изменения цветов.

Для определения точки, в которой начинается первый цвет градиента, используется свойство GradientOrigin. По умолчанию оно равно 0.5,0.5, в результате чего первый цвет начинается в середине заполняемой области.

Примечание. Как и в LinearGradientBrush, в кисти RadialGradientBrush используется пропорциональная система координат. Верхний левый угол прямоугольной области заполнения имеет координаты О, 0, а нижний правый — координаты 1,1. Это означает, что если в качестве начальной точки градиента выбрать точку между 0, 0 и 1,1, заполнение начнется внутри прямоугольника. Можно также задать начальную точку за пределами этих границ, тогда заполнение начнется снаружи.

Цвет изменяется от начальной точки вдоль радиусов и заканчивает изменяться на внутренней окружности градиента. Центр внутренней окружности может не со­впадать с начальной точкой градиента. Область за пределами внутренней окруж­ности заполняется последним цветом, заданным в коллекции RadialGradientBrush. GradientStops (рис. 9.3). Градиент может содержать произвольное количество цветов. Каждый цвет определяется одним объектом GradientStop.

Внутренняя окружность градиента определяется свойствами Center, RadiusX и RadiusY. По умолчанию свойство Center равно 0.5,0.5, и внутренняя окружность помещается в середине заполняемой области, причем ее центр совпадает с начальной точкой градиента.

Значения RadiusX и RadiusY по умолчанию равны 0.5. Радиусы вычисляются отно­сительно половины диагонали заполняемой области. Это означает, что при значениях 0 .5 радиусы равны четверти диагонали. Если заполняемая область квадратная и значе­ния равны 0.5, то, согласно теореме Пифагора, диаметр внутренней окружности будет равен 0,7 ширины или высоты заполняемой области.

Примечание. Если радиусы не равны, внутренняя окружность фактически является эллипсом.. Объекты RadialGradient Brush обычно используются для заполнения круглых фигур и создания эффектов освещенности. Например, с их помощью можно создавать кнопки, которые выглядят так, будто они светятся. Эффект глубины создается путем смещения начальной точки с помощью свойства GradientOrigin. Ниже приведена разметка смещенного градиента.

<Ellipse Margin="5" Stroke-‘Black" StrokeThickness="1" Width="200" Height="200"> <Ellipse.Fill> <RadialGradientBrush RadiusX="1" RadiusY="1" Gradient0rigin="0.7,0.3"> <GradientStop Color="White" 0ffset="0" /> <GradientStop Color="Blue" 0ffset="1" /> </RadialGradientBrush> </Ellipse.Fill> </Ellipse>

Рис. 9.4. Смещение радиального градиента

Кисть ImageBrush

С помощью кисти ImageBrush область можно заполнять растровым изображени­ем, хранящимся в файле допустимого типа. Надстройка Silverlight поддерживает фай­лы BMP, PNG и JPEG. Файл идентифицируется свойством ImageSource. Например, приведенная ниже кисть заполняет фон контейнера Grid изображением logo.jpg, включенным в проект в качестве ресурса (и, следовательно, внедренным в файл при­ложения ХАР).

<Grid> <Grid.Background>

clmageBrush ImageSource="logo. jpg"></ImageBrush> </Grid.Background>

</Grid>

Свойство ImageSource объекта ImageBrush работает так же, как свойство Source эле­мента Image. Это означает, что хранящийся в нем адрес URI может указывать на файл, внедренный в проект или размещенный в Интернете.

Примечание. Надстройка Silverlight учитывает информацию об изображении, хранящуюся в файле вместе с изоб­ражением. Например, в Silverlight поддерживаются полупрозрачные области, определенные в файлах PNG.

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

Результат показан на рис. 9.4 наряду є несмещенным градиентом, в котором свой­ство GradientOrigin равно 0.5,0.5.

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

Таблица 9.2. Элементы перечисления stretch

Имя элемента

Описание

Fill

Изображение растягивается по ширине и высоте, пока не заполнит весь контейнер; пропорции не сохраняются; значение Fill установлено по умолчанию

None

Изображение не растягивается; устанавливаются размеры изображения, определенные в файле; не поместившаяся часть изображения отсекается; если изображение меньше контейнера, в контейнере остается пустое пространство

Uniform

Ширина и высота изображения увеличиваются пропорционально, пока не будет достигнута одна из границ контейнера; пропорции сохраняются, но может остаться пустое пространство

UniformToFill

Ширина и высота изображения увеличиваются пропорционально, пока не будет заполнено все доступное пространство; пропорции сохраняются; не поместившаяся часть изображения отсекается

Источник: Мак-Дональд, Мэтью. Silverlight 3 с примерами на С# для профессионалов. : Пер. с англ. —- М. : ООО «И.Д. Вильяме», 2010. — 656 с. : ил. — Парал. тит. англ.

По теме:

  • Комментарии