Создание визуально привлекательных фигур

Пост написан на основе статьи Джима Сана, первоначально опубликованной здесь.

В предыдущем посте мы продемонстрировали несколько применимых к фигурам эффектов форматирования, которые теперь доступы и в новом Visio. Эти эффекты не только делают фигуры более визуально привлекательными и динамичными, но и позволяют по-новому и интересно представить данные фигур.

Новый выпуск Visio обеспечивает полную поддержку эффектов фигур в ShapeSheet для разработчиков. В этой статье блога мы продемонстрируем пример использования некоторых из этих эффектов в разработке фигур. Статья не претендует на полноту в описании всех эффектов и соответствующих параметров; полный список новых ячеек ShapeSheet см. в статье «Что нового для разработчиков ShapeSheet в Visio 2013» на MSDN.

Что мы строим

В этом примере мы добавим эффекты фигур для оформления уже созданной вешалки для одежды.

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

В следующих разделах мы оформим эту фигуру, добавив несколько эффектов, которые не только добавят в фигуру новые визуальные элементы, но и позволят визуально представить данные фигуры.

Градиенты

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

Чтобы добавить визуальной привлекательности фигуре, заполним центральный круг этой фигуры радиальной градиентной заливкой вместо использовавшейся ранее сплошной заливки.

В ShapeSheet в разделе «Точки градиента заполнения» представлены три точки градиента для данной заливки.

Для каждой точки градиента указаны цвет, прозрачность и положение (ячейки с одинаковым именем). Градиент перетекает от одной точки градиента к другой последовательно, от более низкого к более высокому процентному значению положения. Кроме того, в разделе «Свойства градиента» представлена дополнительная информация о градиентной заливке, включая тип и направление.

Направление течения градиента определяется угловым значением ячейки FillGradientAngle только для градиентов линейного типа (определяется значением перечисления ячейки FillGradientDir, равным 0). В противном случае параметр определяется исключительно значением в ячейке FillGradientDir. Поскольку в данном примере речь идет о радиальном градиенте, значение перечисления в ячейке FillGradientDir определяет направление градиента. В данном случае градиент расходится от центра фигуры к краям.

Обратите внимание, что логическое значение в ячейке FillGradientEnabled должно быть равно TRUE. Только в этом случае градиент отображается правильно. В противном случае заливка определяется в разделе «Формат заливки», в котором указаны другие типы заливки (сплошная, узорная или без заливки).

Тени

В новом Visio представлено несколько эффектов затенения.

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

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

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

В приложении ShapeSheet эффект затенения регулируется в ячейках раздела «Формат заливки».

Значение перечисления ячейки ShapeShdwType определяет тип тени (внешняя — 1, перспективная — 2, внутренняя — 3). Значение ячейки ShapeShdwBlur в точках или дюймах определяет степень размытия, при этом значение 0 означает нулевое размытие, как и в предыдущих версиях Visio. Цвет, прозрачность и смещение тени относительно фигуры определяются в ячейках ShdwForegnd, ShdwForegndTrans и ShapeShdwOffsetX и ShapeShdwOffsetY соответственно. Наконец, значение ячейки ShdwPattern определяет, отображается ли эффект тени на фигуре: 1 означает, что тень отображается, 0 — нет.

Свечения

В новом Visio обеспечивается поддержка совершенно нового эффекта фигур — свечения. Эффект свечения позволяет создавать цветные размытые границы вокруг фигур.

Поскольку и цвет, и размер этого эффекта можно настроить в ShapeSheet, свечение — это отличный способ визуальной передачи данных о фигуре (так же, как с помощью функции Visio «Цвет по значению»).

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

В приложении ShapeSheet эффект свечения регулируется в ячейках раздела «Свойства дополнительных эффектов».

Значения в ячейках GlowColor и GlowColorTrans определяют цвет и прозрачность свечения. Значение ячейки GlowSize в точках или дюймах определяет размер размытия, расходящегося от границы фигуры во внешнем направлении.

Форматирование и поворот 3D

Новое Visio поддерживает ряд трехмерных эффектов. Основным преимуществом является возможность поворачивать фигуры по всем трем осям. Другие связанные эффекты дополняют визуальный образ:

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

Чтобы фигура вешалки для одежды отображалась в уникальной трехмерной перспективе, добавим трехмерный эффект поворота.

В приложении ShapeSheet эффект трехмерного поворота регулируется в разделе «Свойства трехмерного поворота».

Значения ячее RotationXAngle, RotationYAngle и RotationZAngle определяют градус поворота по каждой из осей. Значение перечисления RotationType определяет тип поворота:

• 1: параллельный поворот (фигура поворачивается без учета линейной перспективы).
• 2: перспективный поворот (фигура поворачивается с учетом линейной перспективы).
• От 3 до 6: преднастройки наклонного поворота (фигура поворачивается с наклонной проекцией).

Чтобы завершить преобразование вешалки для одежды из формата 2D в формат 3D, добавим эффект глубины. Этот эффект придает фигуре «толщины», добавляя геометрию по оси Z (нижняя поверхность фигуры).

В приложении ShapeSheet эффект глубины регулируется в разделе «Свойства рельефа».

Ячейка BevelDepthColor определяет цвет толщины, создаваемой эффектом глубины. Значение ячейки BevelDepthSize в точках или дюймах определяет размер толщины.

Заключение Эффекты форматирования фигур в новом приложении Visio позволяют создавать самые различные фигуры.

Вероятно, чтобы лучше изучить новые эффекты с точки зрения разработчика, имеет смысл поэкспериментировать с разными вариантами на панели задач «Формат фигур». Просто создайте новый визуальный элемент и посмотрите, как меняются его значения в ShapeSheet. Нам важны отзывы разработчиков!