Главная » Silverlight » Объекты преобразований

0

Многие задачи рисования можно существенно упростить с помощью объектов преоб­разований, которые изменяют внешний вид фигур и элементов путем изменения исполь­зуемой системы координат. В Silverlight объекты преобразований представлены класса­ми, производными от абстрактного класса System. Windows .Media. Trans form (табл. 9.3).

Таблица 9.3. Классы преобразований

Имя класса

Описание

Важные свойства

TranslateTransform

Смещение системы координат; этот объект полезен, когда нужно нарисовать одну и ту же фигуру в разных местах

X, Y

RotateTransform

Поворот системы координат; существующая фигура поворачивается вокруг заданной центральной точки

Angle, CenterX, CenterY

ScaleTransform

Масштабирование системы координат; фигуры становятся больше или меньше; по осям X и Y можно задать разные коэффициенты масштабирования, искажая таким образом пропорции фигуры; при изменении размеров фигуры пропорционально изменяются также размеры внутренней области и рамки; чем больше становится фигура, тем толще рамка после преобразования; объект ScaleTransform довольно похож на объект viewbox (см. главу 8)

ScaleX, ScaleY, CenterX, CenterY

SkewTransform

Наклон системы координат; например, в результате наклона прямоугольник превращается в параллелограмм

AngleX, AngleY, CenterX,CenterY

MatrixTransform

Изменение системы координат путем умножения на заданную матрицу; это довольно сложное преобразование, требующее знания математики

Матрица

TransformGroup

Объединение многих преобразований для их выполнения за один раз; важна последовательность преобразований, потому что она влияет на результат; например, если сначала повернуть (RotateTransform), а затем переместить (TranslateTransform) фигуру, она будет перемещена в некотором направлении, однако если выполнить эти операции в обратной последовательности, фигура будет перемещена в совершенно другом направлении

Нет

Технически во всех преобразованиях для изменения координат фигуры использу­ется матричная математика. Однако использование встроенных объектов преобра­зований TranslateTransform, RotateTransform, ScaleTransform и SkewTransform по­зволяет изменять фигуры без явного применения сложных формул. Они остаются "за кадром". Желающие применить свои знания математики могут использовать объект MatrixTransform. Кроме того, при задании ряда преобразований с помощью объекта TransformGroup надстройка Silverlight автоматически создает результирующую формулу и оптимизирует ее реализацию.

Примечание. Все преобразования поддерживают автоматическое извещение об изменениях. Это означает, что при программном изменении объекта преобразований, используемого в фигуре, она автоматически обновляется..

полезны при решении многих задач, включая следующие.

•       Создание повернутых фигур. С помощью объекта RotateTransform легко созда­вать повернутые фигуры.

•       Копирование фигур. На некоторых рисунках одинаковые фигуры размещаются в разных местах. Используя объекты преобразований, можно создать одну фигу­ру, а затем разместить на странице ее копии, причем в другом виде, например повернутые, с измененными размерами и т.д.

Совет. Существует три способа использования одной и той же фигуры в разных местах: дублирование определения фигуры в разметке (не идеальный вариант), программное копирование фигуры в коде и копирование фигуры с помощью объекта Path (см. главу 8). Элемент Path принимает объект Geometry, поэтому геометрический объект можно сохранить как ресурс и применять его в разных местах разметки..

• Динамические эффекты и анимация. С помощью объектов преобразований можно создавать довольно изощренные эффекты, такие как плавный поворот или перемещение фигуры.

В главе 10 рассматривается использование преобразований в анимации. Однако пока рассмотрим применение преобразований к обычным фигурам.

Преобразование фигур

Для преобразования фигуры нужно включить соответствующий объект преобразо­вания в свойство RenderTransform фигуры. В зависимости от используемого объекта преобразования, для его конфигурирования нужно заполнить свойства, описанные выше в табл. 9.3.

Рассмотрим поворот прямоугольника с помощью объекта RotateTransform. Естест­венно, нужно задать угол поворота. Приведенная ниже разметка создает прямоуголь­ник, повернутый на угол 25°.

<Rectangle Width="80" Height="10" Stroke="Blue" Fill="Yellow" Canvas.Left="100" Canvas.Top="100"> <Rectangle.RenderTransform>

<RotateTransform Angle="25" /> </Rectangle.RenderTransform>

</Rectangle>

По умолчанию фигура поворачивается вокруг своего начала координат, т.е. вокрут верхнего левого угла занимаемой области. На рис. 9.9 показан прямоугольник, повер­нутый на углы 29, 50, 75 и 100°.

Рис. 9.9. Поворот прямоугольника

Иногда фигуру нужно повернуть вокруг точки, не совпадающей с началом координат. Для этого объект RotateTransform, как и другие классы преобразований, предоставляет свойства CenterX и CenterY, используемые для задания центра поворота. В приведен­ной ниже разметке прямоугольник поворачивается на 25° вокруг точки, расположенной рядом с его центром.

<Rectangle Width="80" Height="10" Stroke="Blue" Fill="Yellow" Canvas.Left="100" Canvas.Top="100"> <Rectangle.RenderTransform>

<RotateTransform Angle="25" CenterX="45" CenterY="5" /> </Rectangle.RenderTrans form>

</Rectangle>

Результат показан на рис. 9.10 (наряду с поворотами на другие углы).

Рис. 9.10. Поворот прямоу­гольника вокруг заданной точки

Значения свойств CenterX и CenterY задаются в абсолютных координатах. Это озна­чает, что для задания центра поворота нужно знать начало координат содержимого. Однако если выводится динамическое содержимое (например, элементы или рисунки с изменяемыми размерами), возникают проблемы. Для их решения можно воспользо­ваться удобным свойством RenderTransformOrigin, поддерживаемым всеми фигурами. Оно устанавливает центральную точку на основе пропорциональной системы коорди­нат в диапазоне от О до 1 в обоих измерениях. Точка 0, 0 находится в левом верхнем углу области содержимого, а точка 1,1 — в правом нижнем углу. Если область содержимого не квадратная, система координат растягивается соответствующим образом.

Приведенная ниже разметка с помощью свойства RenderTransformOrigin поворачи­вает прямоугольник вокруг его центральной точки на угол 25°.

<Rectangle Width="80" Height="10" Stroke="Blue" Fill="Yellow" Canvas.Left="100" Canvas.Top="100" RenderTransform0rigin="0.5,0.5">

<Rectangle.RenderTransform>

<RotateTransform Angle="25" /> </Rectangle.RenderTransform>

</Rectangle>

Точка 0.5,0.5 обозначает центр фигуры независимо от ее размеров. На практике свойство RenderTransformOrigin полезнее и применяется чаще, чем свойства CenterX и CenterY, однако в каждой конкретной ситуации нужно выбрать оптимальное свойство на основе специфики решаемой задачи.

Совет. В свойстве RenderTransformOrigin можно использовать значения больше 1 и меньше 0. Тогда центр преобразования будет установлен за пределами области содержимого фигуры. Таким способом можно повернуть фигуру по большой дуге, задав точку, удаленную на большое расстояние, например 5, 5.

Преобразования и контейнеры

Свойства RenderTransform и RenderTransformOrigin поддерживаются не только фи­гурами, производными от класса Shape. Эти свойства наследуются от класса UlElement, поэтому их можно использовать в любых элементах Silverlight, включая кнопки, тексто­вые блоки, контейнеры и т.д. Поворачивать, наклонять и масштабировать можно лю­бые компоненты пользовательского интерфейса Silverlight (хотя в большинстве случаев делать этого не нужно).

Важно учитывать, что преобразование элементов, на­ходящихся в контейнере, выполняется контейнером после их размещения. В простом контейнере Canvas, в котором элементы размещаются на основе заданных координат, последовательность операций (сначала размещение, а по­том преобразование или наоборот) не играет роли. Однако в других контейнерах, в которых размещение выполняет­ся относительно соседних элементов и зависит от их раз­меров, последовательность операций важна. Рассмотрим пример, показанный на рис. 9.11. Контейнер StackPanel содержит повернутую кнопку. Кнопки сначала размещают­ся, а потом поворачиваются. Поэтому вторая и четвертая кнопки размещены таким образом, будто третья кнопка не поворачивалась. В результате кнопки перекрываются. Если бы размещение выполнялось после поворота, кнопки не перекрывались бы.

В WPF можно задать размещение после преобразования. При этом результат преоб­разования учитывается при позиционировании соседних элементов. Однако в Silverlight такая возможность не предусмотрена.

Совет. можно использовать в любых компонентах Silverlight, например в кистях, объектах Geometry, областях отсечения и т.д.

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

По теме:

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