Главная » Разработка для Windows Phone 7 » Векторная графика Windows Phone 7

0

Мир двухмерной компьютерной графики объединяет в себе векторную и растровую графику – графику линий и графику пикселов, графику приложений для рисования и приложений машинной графики, графику рисованных изображений и графику фотографий.

Векторная графика – это визуальная реализация аналитической геометрии. Координаты в двухмерной системе координат, представленные в форме (x, y), определяют прямые линии и кривые. В Silverlight эти кривые могут быть частями контура эллипса или кривыми Безье, как в обычной кубической форме, так и в упрощенной квадратичной. Эти линии могут быть обведены с применением определенной кисти и стиля. Последовательности соединенных линий и кривых могут определять замкнутую область, которая может быть закрашена с помощью кисти.

Растровая графика (которая будет обсуждаться в следующей главе) работает с растровыми изображениями. В Silverlight очень просто организовать отображение файла в формате PNG или JPEG с помощью элемента Image, как было продемонстрировано ранее в главе 4 данной книги. Но как будет показано в следующей главе, растровые изображения также могут формироваться алгоритмически в коде с использованием класса WriteableBitmap (Растровое изображение с возможностью записи). Миры растровой и векторной графики пересекаются, когда ImageBrush используется для заполнения области, или когда векторная графика используется для формирования изображения в WriteableBitmap.

Библиотека Shapes

Для работы с векторной графикой приложение на Silverlight использует классы пространства имен System.Windows.Shapes, которое обычно называют библиотекой Shapes. Это пространство включает абстрактный класс и шесть запечатанных классов, производных от Shape:

Object

DependencyObject (абстрактный)

FrameworkElement (абстрактный) Shape (абстрактный)

Rectangle (запечатанный) Ellipse (запечатанный) Line (запечатанный) Polyline (запечатанный) Polygon (запечатанный) Path (запечатанный)

Класс Shape наследуется от FrameworkElement, т.е. этот класс может принимать сенсорный ввод, участвовать в компоновке, и к нему могут применяться трансформации. В Silverlight этих сведений не достаточно, чтобы позволить наследование от самого Shape.

Мы уже рассматривали Rectangle и Ellipse, но это два класса стоят особником в царстве векторной графики, поскольку они не включают никаких упоминаний о координатах. Ellipse можно просто вставить в UserControl, и он заполнит собой весь элемент управления. Мы можем менять размер этого элемента, но чтобы поместить его в определенную точку,

необходимо привлекать свойства Margin или Padding либо применять RenderTransform, либо поместить его в Canvas и использовать присоединенные свойства Left и Top.

Остальные четыре класса библиотеки Shape сильно отличаются от этих двух. Они позволяют позиционировать элементы посредством задания координат. Мы будем рассматривать класс Path последним, но он настолько универсален, что его одного может быть достаточно для выполнения всех задач, связанных с векторной графикой. Требуется ли нарисовать дугу или сплайн Безье – во всех этих случаях будет использоваться класс Path.

Shape определяет 11 задаваемых свойств, которые наследуются всеми производными от него классами:

•                                  Fill типа Brush

•                                  Stroke типа Brush

•                                  StrokeThickness (Толщина обводки) типа double

•         StrokeStartLineCap (Наконечник начала линии обводки) и StrokeEndLineCap (Наконечник конца линии обводки) типа PenLineCap (Наконечник линий)

•                                  StrokeLineJoin (Соединение линий обводки) типа PenLineJoin (Соединение линий)

•                                  StrokeMiterLimit (Предельная длина конуса) типа double

•         StrokeDashArray (Массив длин элементов обводки пунктиром) типа DoubleCollection (Коллекция элементов типа double)

•                                  StrokeDashCap (Наконечник элементов обводки пунктиром) типа PenLineCap

•                                  StrokeDashOffset (Смещение обводки пунктиром) типа double

•                                  Stretch типа Stretch

Первые три свойства мы рассматривали, когда обсуждали классы Rectangle и Ellipse. Свойство Fill определяет кисть Brush, используемую для заполнения внутреннего пространства фигуры. Свойство Stroke – это Brush, который используется для закрашивания обводки фигуры. StrokeThickness определяет толщину этой обводки.

Все остальные свойства тоже могут использоваться с Rectangle и Ellipse. Как мы видим, здесь имеется два перечисления (PenLineCap и PenLineJoin), которые ссылаются на Pen (Перо), но в Silverlight нет класса Pen. Концептуально все свойства, начинающиеся со слова Stroke, составляют объект, традиционно расцениваемый как перо.

Canvas и Grid

Класс Line (Линия) определяет четыре свойства типа double: X1, Y1, X2 и Y2. Линия проводится из точки с координатами (X1, Y1) в точку с координатами (X2, Y2) относительно ее родительского элемента:

<Canvas Background="LightCyan"> <Line X1="50" Y1="10 0" X2="2 0 0" Y2="150" Stroke="Blue" />

</Canvas>

Многие примеры данного приложения будут представлены здесь как фрагмент XAML и соответствующее изображение, выведенное в квадратной области со стороной 480 пикселов. В конце главы мы рассмотрим приложение, создающее эти изображения. Для печатного варианта я задал разрешение этих изображений в 240 точек на дюйм, так что их размер примерно соответствует тому, который мы видим на экране телефона.

Линия начинается в точке с координатами (50, 100) и заканчивается в точке (200, 150). Все координаты отсчитываются относительно верхнего левого угла родительского элемента; значения X увеличиваются слева направо; значения Y увеличиваются сверху вниз.

Все свойства X1, Y1, X2 и Y2 дублируются свойствами-зависимостями, т.е. могут использоваться как цели стилей, привязок данных и анимаций.

Хотя применение панели Canvas кажется более естественным для векторной графики, в Grid с одной ячейкой мы получим абсолютно аналогичное изображение:

<Grid Background="LightCyan"> <Line X1="50" Y1="10 0" X2="2 0 0" Y2="150" Stroke="Blue" />

</Grid>

Как правило, для позиционирования элементов в рамках Canvas используются присоединенные свойства Canvas.Left и Canvas.Top. Эти свойства не нужны для Line, потому что Line имеет собственные координаты. Присоединенные свойства могут использоваться с Line, но их значения будут объединяться с координатами:

<Canvas Background="LightCyan"> <Line X1="50" Y1="10 0" X2="2 0 0" Y2="150" Canvas.Left="150" Canvas.Top="10 0" Stroke="Blue" />

</Canvas>

Обычно при работе с элементами, имеющими точные координаты, присоединенные свойства Canvas.Left и Canvas.Top используются только для особых целей, например, перемещения объекта относительно Canvas.

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

Поэтому я предпочитаю использовать для векторной графики не Canvas, а Grid с одной ячейкой.

Если в Grid располагается один или более элементов Line (или любые другие элементы, строящиеся по координатам), Grid возвращает размер, соответствующий максимальной неотрицательной координате X и максимальной неотрицательной координате Y среди всех его дочерних элементов. Иногда это может выглядеть немного странным. Если в Grid располагается Line, начинающийся в точке (200, 300) и заканчивающийся в точке (210, 310), свойство ActualWidth объекта Line возвращает значение 210, и свойство ActualHeight возвращает значение 310, а Grid будет 210 пикселов шириной и 310 пикселов высотой даже несмотря на то, что Line занимает лишь небольшую часть этого пространства. (На самом деле Line и Grid будут на несколько пикселов больше, учитывая StrokeThickness отображаемого Line.)

Координаты могут иметь отрицательные значения, но Grid не учитывает отрицательные координаты. Элементы с отрицательными координатами будут отображаться слева или над Grid. Я много размышлял над таким поведением и убедился в его правильности.

Источник: Чарльз Петзольд, Программируем Windows Phone 7, Microsoft Press, © 2011.

По теме:

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