Разработка средств для работы с векторной графикой

Размещено на http://www.allbest.ru/

Федеральное агентство связи

Федеральное государственное бюджетное образовательное учреждение высшего образования

«Поволжский государственный университет телекоммуникаций и информатики»

Факультет Информационных систем и технологий

Направление Программная инженерия (специальность)

Кафедра Информационных систем и технологий

ВЫПУСКНАЯ КВАЛИФИКАЦИОННАЯ РАБОТА

(БАКАЛАВРСКАЯ РАБОТА)

Разработка средств для работы с векторной графикой

Руководитель

ст преп А С Тучкова

Разработал РПИС-31

Д О Степаненко

Самара 2017



Федеральное агентство связи

Федеральное государственное бюджетное образовательное учреждение высшего образования«Поволжский государственный университет телекоммуникаций и информатики»

ЗАДАНИЕ

по подготовке выпускной квалификационной работы

Студента Степаненко Дмитрия Олеговича

1 Тема ВКР

Разработка средств для работы с векторной графикой

Утверждена приказом по университету от №

2 Срок сдачи студентом законченной ВКР

3 Исходные данные и постановка задачи

1) Документация и источники по векторным форматам

2) Требования к приложению

3) Разработать библиотеку для работы с векторной графикой

4 Перечень подлежащих разработке в ВКР вопросов или краткое содержание ВКР Сроки исполнения

1) Анализ предметной области

2) Обзор средств и инструментов для решения задачи

3) Проектирование и разработка решения

4) Оценка результатов работы

5 Перечень графического материала Сроки исполнения

1) Презентационный материал в виде слайдов

6 Дата выдачи задания « » 2017 г.

Кафедра Информатики и вычислительной техники

Утверждаю зав.кафедрой д.т.н., проф Н.И Лиманоа

Руководитель стпреп. А С Тучкова

Задание принял к исполнению РПИС-31 Д О Степаненко



Введение

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

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

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

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

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

Целью дипломной работы является разработка библиотеки на Java, которая реализует работу с векторными изображениями: генерацию, преобразование в векторный формат, и т.д.

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

Объектом исследования выступают векторные изображения и их применение векторный растровый рисунок программный

Предмет исследования: применение программного обеспечения в этой отрасли.

Основными источниками для написания работы послужили книги по разработке на Java Б Эккеля, К Хорстмана, Г Шилдта, статьи по работе с навигационными системами.

Цель и задачи написания работы определили ее структуру, которая состоит из введения, трех глав и заключения Во введении обосновывается актуальность работы, цель и задачи.

Первая глава содержит описание предметной области и постановку задачи.

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

Третья глава раскрывает процесс проектирования, разработки ПО, и пуско-наладку рабочего окружения.

В заключении сделаны основные выводы и результаты по проделанной работе.



1 Предметная область

Все графические файлы можно разделить на две большие группы: растровые и векторные Изображения, которые образуются при помощи различных линий (векторов: прямых и изогнутых), называются векторными Такое строение элементов позволяет изменять любые параметры: размер, вариант окрашивания, форму Главное достоинство векторной графики - возможность изменения размеров изображения без потери качества картинки Это значительно упрощает работу с графикой и повышает качество конечного результата.

1.1 Особенности векторных изображений

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

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

Недостатки векторных рисунков:

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

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

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

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

Есть несколько основных инструментов, которые присутствуют практически во всех программах, работающих с векторной графикой:

? кривая Безье - инструмент, позволяющий изменять форму линий, создавать фигуры любой формы, за счет работы с узловыми точками и проходящими через них касательными линиями;

? заливка - позволяет заполнять цветом замкнутые объекты любой формы, так же дает возможность создавать произвольные градиенты, которые делают работу с цветом более интересной;

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

? в программе существует набор простейших фигур, который значительно облегчает создание рисунка;

? сохраняется возможность «рисования» -- инструмент-карандаш повторяет движение руки, полученный таким образом рисунок можно редактировать при помощи кривой Безье.

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

Самые популярные «векторные» программы -- AdobeIllustrator, CorelDraw, AdobeFreeHand.

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

1.2 Постановка задачи

Целью данной дипломной работы является разработка библиотеки на Java, которая реализует работу с векторными изображениями: генерацию, преобразование в векторный формат, и т.д.

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

? Спроектировать архитектуру библиотеки;

? Выбрать инструменты и методы реализации на языке Java;

? Генерация векторных элементов при построении изображения

? Векторизация растрового формата в векторный

? Экспорт векторного формата в растровый

? Сохранение дизайна графического интерфейса приложений наJavaв растровый или векторный формат для использования в процессе описания ПО или разработке дизайна приложений

? Обеспечить встраиваемость библиотеки в приложения на Java, предназначенные для выполнения на мобильных устройствах

? Не использовать платформозависимые механизмы Java

? Иные возможности на усмотрение разработчика;

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



2 Особенности векторых форматов и применяемых технологий

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

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

2.1 Растровая и векторная графика

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

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

Важными характеристиками изображения являются:

количество пикселей - разрешение Может указываться отдельно количество пикселей по ширине и высоте (1024*768, 640*480,...) или же, редко, общее количество пикселей (часто измеряется в мегапикселях);

количество используемых цветов или глубина цвета (эти характеристики имеют следующую зависимость: N = 2^I, где N - количество цветов,аI - глубина цвета);

цветовое пространство (цветовая модель) RGB, CMYK, XYZ, YCbCr и др.

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

Объем растрового изображения классически определяется как V = K*I, где V - объем изображения, K - количество пикселей, I - глубина цвета

Соотношение глубины цвета и количества цветов: N = 2^I, где N - количество цветов, I - глубина цвета.

Достоинства:

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

Распространённость -- растровая графика используется сейчас практически везде: от маленьких значков до плакатов.

Высокая скорость обработки сложных изображений, если не нужно масштабирование.

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

Недостатки:

Большой размер файлов с простыми изображениями.

Невозможностьидеальногомасштабирования.

Невозможность вывода на печать на плоттер.

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

Векторная модель - список параметров, математически определяющих объекты, из которых состоит синтезированное изображение

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

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

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

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

Термин «векторная графика» используется в основном в контексте двухмерной компьютерной графики.

Способ хранения изображения:

Рассмотрим, к примеру, такой графический примитив, как окружность радиуса r Для её построения необходимо и достаточно следующих исходных данных:

координатыцентраокружности;

значениерадиуса r;

цвет заполнения (если окружность не прозрачная);

цвет и толщина контура (в случае наличия контура);

Преимущества векторного способа описания графики над растровой графикой:

Размер, занимаемой описательной частью, не зависит от реальной величины объекта, что позволяет, используя минимальное количество информации, описать сколько угодно раз большой объект файлом минимального размера (компактность).

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

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

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

Фундаментальные недостатки векторной графики.

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

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

Типичные примитивные объекты

Линии и ломаныелинии.

Многоугольники.

Окружности и эллипсы.

КривыеБезье.

Безигоны.

Текст (в компьютерных шрифтах, таких как TrueType, каждая буква создаётся из кривых Безье).

Этот список неполон Есть разные типы кривых (Catmull-Rom сплайны, NURBS и т д.), которые используются в различных приложениях.

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

Векторные операции:

Векторные графические редакторы, типично, позволяют вращать, перемещать, отражать, растягивать, скашивать, выполнять основные аффинные преобразования над объектами, изменять z-order и комбинировать примитивы в более сложные объекты.

Более изощрённые преобразования включают булевы операции на замкнутых фигурах: объединение, дополнение, пересечение и т д.

Векторная графика идеальна для простых или составных рисунков, которые должны быть аппаратно-независимыми или не нуждаются в фотореализме К примеру, PostScript и PDF используют модель векторной графики.

2.2 Описание формата SVG

Масштабируемая векторная графика (ScalableVectorGraphics - SVG) - это XML формат для описания масштабно-независимой графики, который поддерживается многими бесплатными и коммерческими приложениями Рассмотрим приемы написания SVG скриптов и их использования для анимированных приложений и касается манипуляций с SVG при помощи DOM Так как SVG файлы представляют собой XML, то мы можем преобразовывать или создавать их с помощью любых средств и библиотек, которые применимы для XML в общем.

До того, как в 2001 году впервые был придуман SVG, были доступны несколько достаточно мощных форматов векторной графики Postscript и его родственник PDF широко используются во многих приложениях Множество форматов, специфичных для конкретных приложений, включает Postscript-basedAdobeIllustrator(.ai), CorelDRAW (.cdr), ComputerGrapherMetafile (.cgm), Windows Metafile (.wmf), Autocad (.dxf), Hewlett-PackardGraphicsLanguage (.hpgl), WordPerfect (.wpg), и множество других Для векторного рисования (которое даже может включать анимацию, звук и интерактивные свойства) общепринятым средством для информации, распространяемой через интернет, является Macromedia's SWF/Flash.

Основное отличие SVG от всех этих форматов состоит в том, что SVG - это частный случай XML Это означает не только то, что одинаковые изображения, возможно, будут описываться в SVG намного универсальнее, чем в остальных графических форматах, но и то, что SVG более универсален при программном управлении графикой В частности, мы можем управлять SVG при помощи интернет - браузеров (или других приложений), используя ECMAScript и DocumentObjectModel (DOM) Важно, что мы можем преобразовывать и создавать SVG с помощью привычных XML-технологий, таких как XSLT, или с помощью библиотек, поддерживающих работу с XML Можно комбинировать SVG с другими форматами XML, используя пространства имен Более того, мы можем даже стилизовать SVG с помощью CascadingStyleSheets (CSS) В целом SVG - это дружественный игрок в XML и интернет-пространстве.

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

Файл SVG изображения имеет расширение .svg или .svgz, описывается по всем синтаксическим правилам XML, а именно:

Начинается с заголовка (объявления XML) и указания DOCTYPE (не обязательно), например:

<?xml version="1.0" encoding="UTF-8"?>

<!DOCTYPEsvg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">

Продолжается объявлением корневого элемента (в данном случае - <svg>) Этот элемент является непосредственным холстом рисунка, в параметрах задается пространство имен, ширина, высота документа

<?xml version="1.0" encoding="utf-8" standalone="yes"?>

<svgxmlns="http://www.w3.org/2000/svg" version="1.1" height = "400px" width = "400px">

</svg>

Внутри корневого элемента вставляются элементы (теги), описывающие само изображение Пример:



<?xml version="1.0" encoding="utf-8" standalone="yes"?>

<svgxmlns="http://www.w3.org/2000/svg" version="1.1" height = "400px" width = "400px">

<circle cx="100px" cy="100px" r="100px" fill="red" />

<circle cx="150px" cy="150px" r="100px" fill="blue" />

<circle cx="200px" cy="200px" r="100px" fill="green" />

</svg>

В примере заданы 3 разноцветные круга диаметром 100 пикселей каждый

Каждому тегу могут быть присвоены атрибуты В зависимости от атрибутов тега, фигура, описываемая этим тегом, будет иметь те или иные свойства (положение по оси X и Y, цвет фона, рамки и т.д.)

<circle cx="100px" cy="100px" r="100px" fill="red" style="fill-opacity: 0.5" />

Тег circle имеет 4 параметра: - cx, cy - координаты по оси X и Y Координаты отчисляются с верхнего левого угла (это 0-0) -r - радиус - fill - цвет заливки - style - стиль элемента (в данном случае - прозрачность 0.5) У каждого тега могут быть свои уникальные атрибуты и общие для всех

Пример SVG изображения (3 разноцветных круга и квадрат)

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

<?xml version="1.0" encoding="utf-8" standalone="yes"?>

<svgxmlns="http://www.w3.org/2000/svg" version="1.1" height = "400px" width = "400px">

<circle cx="100px" cy="100px" r="100px" fill="red" style="fill-opacity: 0.5" />

<circle cx="150px" cy="150px" r="100px" fill="blue" style="fill-opacity: 0.5" />

<circle cx="200px" cy="200px" r="100px" fill="green" style="fill-opacity: 0.5" />

<rect x="0" y="0" width="100" height="100" fill="black" stroke="black" stroke-width="5px" />

</svg>

Рис 2.1 - Пример векторного рисунка

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

Синтаксис SVG ничем не выделяется на фоне давно знакомого языка разметки веб-страницы А в HTML5 была внедрена inline поддержка SVG, таким образом, рисунок может быть вставлен на странице как обычный тег (<svg>...</svg>).

Элементы (теги)SVG:

Элемент title

Элементdesc

Элемент path

Элементrect

Элемент circle

Элемент ellipse

Элемент line

Элемент polyline

Элемент polygon

Элемент text

Элемент image

Тег g

Элемент title

Описывает заголовок документа, пример:

<title>Вы видите эту надпись в шапке окна</title>

Элемент desc:

Описание документа, пример:

<desc>Изображение создано с помощью graphing.ru!</desc>

Рис 2.2 - Пример векторного треугольника

Самым мощным тегом SVG является <path> Он позволяет описывать сложные геометрические фигуры в виде компактной строки, пример:

<path d="M 100 100 L 300 100 L 200 300 z" fill="red" stroke="blue" stroke-width="3" />



Нарисует красный треугольник с синей рамкой шириной 3 пикселя Внутри атрибута d описывается условный сценарий, где буквы означают действие, а цифры между некоторыми буквами указывают на координату (X и Y) в данном случае строку "M 100 100 L 300 100 L 200 300 z" можно понимать как "переместиться (M) на 100-100, провести линию (L) к 300-100, провести линию (L) к 200-300, замкнуть фигуру (z)" Список всех буквенных команд параметра d тега path:

M - переместить "указатель" (x,y)

L - провести линию от текущй точки до указанной (x,y)

H - провести горизонтальную линию от текущей точки до указанной (x)

V - провести вертикальную линию от текущей точки до указанной (y)

z - замкнуть фигуру.

Все команды, кроме z, могут быть в верхнем и нижнем регистре Верхний регистр указывает на то, что последующая координата абсолютная, а нижний - относительная

Элемент rect рисует прямоугольник.

<rectx="100" y="100" width="80" height="120"></rect>

Прямоугольник шириной 80, высотой 120, находящийся в координате 100-100 Помимо общих, могут быть присвоены дополнительные атрибуты:

rx - скругление по оси x

ry - скругление по оси

Пример (желтый прямоугольник с черной рамкой):

<?xml version="1.0" standalone="no"?>

<svg width="12cm" height="4cm" viewBox="0 0 1200 400" xmlns="http://www.w3.org/2000/svg" version="1.1">

<rect x="400" y="100" width="400" height="200" fill="yellow" stroke="navy" stroke-width="10" />

</svg>

Рис 2.3 - Пример векторного прямоугольника

Элемент circleрисует круг.

<circlecx="150px" cy="100px" r="100px" />

Круг радиусом 150 пикселей, находящийся в координате 100-100

Пример (красный круг с синей рамкой):

<?xml version="1.0" standalone="no"?>

<svg width="12cm" height="4cm" viewBox="0 0 1200 400 xmlns="http://www.w3.org/2000/svg" version="1.1">

<circle cx="600" cy="200" r="100 fill="red" stroke="blue" stroke-width="10" />

</svg>

Рис 2.4 - Пример векторного круга



Элемент ellipse рисует эллипс.

<ellipsecx="100" cy="100" rx="70" ry="40"></ellipse>

Эллипс шириной 70, высотой 40 в координате 100-100.

Пример (2 эллипса, один наклонен ( rotate(-30) )):

<?xml version="1.0" standalone="no"?>

<svg width="12cm" height="4cm" viewBox="0 0 1200 400" xmlns="http://www.w3.org/2000/svg" version="1.1">

<g transform="translate(300 200)">

<ellipse rx="250" ry="100" fill="red" />

</g>

<ellipse transform="translate(900 200) rotate(-30)" rx="250" ry="100" fill="none" stroke="blue" stroke-width="20" />

</svg>

Рис 2.5 - Пример векторного эллипса

Элемент line рисует линию.

<line x1="100" y1="300" x2="300" y2="100" stroke="red" stroke-width="5" />



Линия, берущая начало в 100-300 и заканчивающаяся в 300-100, красный цвет, шириной 5.

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

Дополнительный атрибут: points, в качестве аргумента передаются точки через запятую Все точки разбиваются на чередующиеся пары (x,y,x,y,x,y...) Элемент является упрощенным аналогом <path>, где нет необходимости описывать буквенные команды (M и L).

Пример (синиезубья):

<?xml version="1.0" standalone="no"?>

<svg width="12cm" height="4cm" viewBox="0 0 1200 400" xmlns="http://www.w3.org/2000/svg" version="1.1"

<polyline fill="none" stroke="blue" stroke-width="10"

points="50,375

150,375 150,325 250,325 250,375

350,375 350,250 450,250 450,375

550,375 550,175 650,175 650,375

750,375 750,100 850,100 850,375

950,375 950,25 1050,25 1050,375

1150,375" />

</svg>

Рис 2.6 - Пример векторного рисунка в виде зубьев



Элемент polygon является аналогом <polyline>, однако конечная фигура автоматически замкнется:

Пример (звезда и многоугольник):

<?xmlversion="1.0" standalone="no"?>

<svg width="12cm" height="4cm" viewBox="0 0 1200 400" xmlns="http://www.w3.org/2000/svg" version="1.1">

<polygon fill="red" stroke="blue" stroke-width="10"

points="350,75 379,161 469,161 397,215

423,301 350,250 277,301 303,215

231,161 321,161" />

<polygon fill="lime" stroke="blue" stroke-width="10"

points="850,75 958,137.5 958,262.5

850,325 742,262.6 742,137.5" />

</svg>

Рис 2.7 - Пример векторных рисунков

Элемент text вставляет текстовые данные в рисунок.

<textx="100" y="100" stroke="none" fill="#000000" font-weight="bolder" font-family="Arial" font-size="16px"><tspan>Привет</tspan></text>

Строка "Привет" в координате 100-100, цвет черный, стиль "жирный", шрифт "Arial" 16 пикселей.

<tspan> внутри <text> позволяет разделять строку на отдельные элементы и присваивать каждому элементу свои стили оформления.

Элемент image вставляет растровое изображение из отдельного файла в векторный SVG рисунок.

<image xlink:href="123.jpg" width="678" height="435"/>

Чтобы работало, нобходимо указать пространство имен xmlns:xlink="http://www.w3.org/1999/xlink" в качестве атрибута к тегу <svg Значением xlink:href может быть как путь до растровой картинки, так и сама картинка, зашифрованная в base64 (data:image/gif;base64,[тут base64 строка]).

Тегом <g> можно группировать элементы SVG в один контейнер, при этом все элементы созданного контейнера будут перенимать атрибуты, заданные в открывающем теге <g>.

Пример (5 разных линий перенимают свойтво зеленой рамки

(stroke="green") от тега <g>):

<?xml version="1.0" standalone="no"?>

<svg width="12cm" height="4cm" viewBox="0 0 1200 400" xmlns="http://www.w3.org/2000/svg" version="1.1">

<g stroke="green" >

<line x1="100" y1="300" x2="300" y2="100"

stroke-width="5" />

<line x1="300" y1="300" x2="500" y2="100"

stroke-width="10" />

<line x1="500" y1="300" x2="700" y2="100"

stroke-width="15" />

<line x1="700" y1="300" x2="900" y2="100"

stroke-width="20" />

<line x1="900" y1="300" x2="1100" y2="100"

stroke-width="25" />

</g>

</svg>

Рис 2.8 - Пример векторных линий

Атрибуты тегов svg

Каждому элементу SVG можно передать ряд атрибутов Некоторые атрибуты для каждого тега описаны выше.

Динамика и трансформация в svg

Любому элементу могут быть присовены фильтры:

translate - перенести

rotate - повернуть

scale - масштабировать

scewX, scewY - исказить

matrix - смешаннаятрансформация

Все эти фильтры описываются в атрибуте transform.

Пример (овал, повернутый на 30 градусов, перемещенный на 100-200 и уменьшенный в 2 раза):

<?xml version="1.0" standalone="no"?>

<svg width="12cm" height="4cm" viewBox="0 0 1200 400" xmlns="http://www.w3.org/2000/svg" version="1.1">

<ellipse cx="100" cy="200" transform="rotate(-30) translate(100 200) scale(0.5)" rx="250" ry="100" fill="none" stroke="blue" stroke-width="20" />

</svg>

Динамика SVG картинок, вставленных в XHTML страницу, может быть обеспечена с помощью JavaScript На каждый элемент можно повешать событие, например - onclick, доступ к каждому элементу осуществляется через .setAttribute() и .appendChild() Таким образом, пользователь может управлять рисунком.

SVG в совокупности с другими технологиями HTML5 представляет разработчику очень большие возможности.

Стоит заметить, что SVG документы не представляют собой XML документы в полном смысле этого слова С точки зрения синтаксиса, SVG - это, несомненно, XML, но важная часть информационного наполнения SVG рисунка содержится внутри данных, разделенных запятыми или пробелами внутри SVG-атрибутов Это разумный компромисс, так как использование дочерних элементов для каждой точки или дескриптора, который определяет отдельную кривую сделало бы SVG еще более многословным Таким образом, такие методы обработки XML-уровня, как XSLT, не могут работать с path данными Например, приведем path элемент квадратичной кривой Безье:

<pathd="M200,300 Q400,50 600,300 T1000,300" fill="none" stroke="red" stroke-width="5" />

А это многоугольник, описывающий пентаграмму:

<polygon fill="red" stroke="blue" stroke-width="10"

points="350,75 379,161 469,161 397,215

423,301 350,250 277,301 303,215

231,161 321,161" />



Для добавления стиля мы сожем использовать CSS селекторы и синтаксис, чтобы модифицировать вид SVG-рисунков Как с HTML, так и с форматами, поддерживающими CSS, можно или определить CSS информацию внутри документа, или задать ссылку на внешнюю таблицу стилей Очень простой пример встроенного CSS:

<?xmlversion="1.0" standalone="no"?>

<!--By ref:

<?xml-stylesheethref="mystyle.css" type="text/css"?>

-->

<!DOCTYPEsvg PUBLIC "-//W3C//DTD SVG 1.1//EN"

"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">

<svg width="10cm" height="5cm" viewBox="0 0 1000 500"

xmlns="http://www.w3.org/2000/svg" version="1.1">

<defs>

<style type="text/css"><![CDATA[

rect {

fill: red;

stroke: blue;

stroke-width: 3

} ]]>

</style>

</defs>

<rect x="200" y="100" width="600" height="300"/>

</svg>

Если мы можем преобразовать любой целый тег с помощью CSS, то мы, возможно, обнаружим, что использование селекторов класса - это наилучшее применение CSS и SVG Например, мы могли бы определить множество типов прямоугольников в таблице стилей, а затем присоединить XML атрибут class для каждого из них в своем рисунке, вместо того, чтобы повторять полный список цветов, заливок, штриховки, и других атрибутов, которые мы определяем для класса Простым изменением таблицы стилей, можно изменять общий вид диаграммы для того, чтобы сделать ее более подходящей в различных ситуациях.



3. Проектирование и разработка библиотеки

3.1 Среда разработки и средство проектирования

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

Так, непосредственно для создания кода было решено выбрать среду IntelligIDEA IDEA -- интегрированная среда разработки программного обеспечения на многих языках программирования, в частности Java, JavaScript, Python, разработанная компанией JetBrains Первая версия IntelliJ IDEA появилась в январе 2001 года и быстро приобрела популярность, как первая Java IDE с широким набором интегрированных инструментов для рефакторинга, которые позволяли программистам быстро реорганизовывать исходные тексты программ Дизайн среды ориентирован на продуктивность работы программистов, позволяя им сконцентрироваться на разработке функциональности, в то время как IntelliJ IDEA берёт на себя выполнение рутинных операций

Рис 3.1 - Скриншот рабочего окна IntelligIDEA



Системой управления версиями выбран Git, как отвечающий требованиям процесса разработки и, что упрощает работу, интегрированный в среду разработки IntellijIDEA при помощи специального плагина.

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

Комментарии документации применяют для документирования классов, интерфейсов, полей (переменных), конструкторов и методов

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

Использование UML не ограничивается моделированием программного обеспечения Его также используют для моделирования бизнес-процессов, системного проектирования организационных структур и баз данных.

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

Преимущества UML:

UML объектно-ориентирован;

UML позволяет описать систему практически со всех возможных точек зрения и разные аспекты поведения системы;

Диаграммы UML сравнительно просты для чтения после достаточно быстрого ознакомления с его синтаксисом;

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

UML получил широкое распространение и динамично развивается.

3.2 ПакетыSwingи AWT для построения GUI

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

В Java есть три библиотеки визуальных компонентов для создания графического интерфейса пользователя Самая ранняя из них называется AWT Считается, что при ее проектировании был допущен ряд недочетов, вследствие которых с ней довольно сложно работать Библиотека Swing разработана на базе AWT и заменяет большинство ее компонентов своими, спроектированными более тщательно и удобно Третья, самая новая библиотека, называется SWT.

Первой попыткой Sun создать графический интерфейс для Java была библиотека AWT (AbstractWindowToolkit) -- инструментарий для работы с различными оконными средами Sun сделал прослойку на Java, которая вызывает методы из библиотек, написанных на С Библиотечные методы AWT создают и используют графические компоненты операционной среды С одной стороны, это хорошо, так как программа на Java похожа на остальные программы в рамках одной ОС Но при запуске ее на другой платформе могут возникнуть различия в размерах компонентов и шрифтов, которые будут портить внешний вид программы.

Чтобы обеспечить мультиплатформенность AWT интерфейсы вызовов компонентов были унифицированы, вследствии чего их функциональность получилась немного урезанной Да и набор компонентов получился довольно небольшой Так например, в AWT нет таблиц, а в кнопках не поддерживается отображение иконок Тем не менее пакет java.awt входит в Java с самого первого выпуска и его можно использовать для создания графических интерфейсов.

Таким образом, компоненты AWT не выполняют никакой "работы" Это просто «Java-оболочка» для элементов управления той операционной системы, на которой они работают Все запросы к этим компонентам перенаправляются к операционной системе, которая и выполняет всю работу.

Использованные ресурсы AWT старается освобождать автоматически Это немного усложняет архитектуру и влияет на производительность Написать что-то серьезное с использованием AWT будет несколько затруднительно.

Каждая библиотека предоставляет набор классов для работы с кнопками, списками, окнами, меню и т.д., но эти классы спроектированы по-разному: они имеют различный набор методов с разными параметрами, поэтому «перевести» программу с одной библиотеки на другую (например, с целью увеличения быстродействия) не так-то просто Это почти как перейти с одного языка программирования на другой: все языки умеют делать одно и то же, но у каждого из них свой синтаксис, своя программная структура и свои многочисленные хитрости.

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

Каждая GUI-программа запускается в окне и по ходу работы может открывать несколько дополнительных окон.

В библиотеке Swing описан класс JFrame, представляющий собой окно с рамкой и строкой заголовка (с кнопками «Свернуть», «Во весь экран» и «Закрыть») Оно может изменять размеры и перемещаться по экрану.

Конструктор JFrame() без параметров создает пустое окно Конструктор JFrame(Stringtitle) создает пустое окно с заголовком title.

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

setSize(intwidth, intheight) -- устанавливает размеры окна Если не задать размеры, окно будет иметь нулевую высоту независимо от того, что в нем находится и пользователю после запуска придется растягивать окно вручную Размеры окна включают не только «рабочую» область, но и границы и строку заголовка.

setDefaultCloseOperation(intoperation) -- позволяет указать действие, которое необходимо выполнить, когда пользователь закрывает окно нажатием на крестик Обычно в программе есть одно или несколько окон при закрытии которых программа прекращает работу Для того, чтобы запрограммировать это поведение, следует в качестве параметра operation передать константу EXIT_ON_CLOSE, описанную в классе JFrame.

setVisible(booleanvisible) -- когда окно создается, оно по умолчанию невидимо Чтобы отобразить окно на экране, вызывается данный метод с параметром true Если вызвать его с параметром false, окно снова станет невидимым.

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

import javax.swing.*;

public class MyClass {

public static void main (String [] args) {

JFramemyWindow = new JFrame("Пробноеокно");

myWindow.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);

myWindow.setSize(400, 300);

myWindow.setVisible(true);}}

Обратим внимание, для работы с большинством классов библиотеки Swing понадобится импортировать пакет java.swing.*

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

publicclass SimpleWindow extends JFrame {

SimpleWindow(){super("Пробноеокно");

setDefaultCloseOperation(EXIT_ON_CLOSE);

setSize(250, 100);}}

public class Program {

public static void main (String [] args) {

JFramemyWindow = new SimpleWindow();

myWindow.setVisible(true);}}

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

Обратим внимание, что метод setVisible() не вызывается в классе SimpleWindow, что вполне логично: за тем, где какая кнопка расположена и какие размеры оно должно иметь, следит само окно, а вот принимать решение о том, какое окно в какой момент выводится на экран -- прерогатива управляющего класса программы.

Напрямую в окне элементы управления не размещаются Для этого служит панель содержимого, занимающая все пространство окна* Обратиться к этой панели можно методом getContentPane() класса JFrame С помощью метода add(Componentcomponent) можно добавить на нее любой элемент управления.

В примерах удем использовать только один элемент управления -- кнопку (не вдаваясь в подробности ее устройства) Кнопка описывается классом JButton и создается конструктором с параметром типа String -- надписью.Добавим кнопку в панель содержимого нашего окна командами:

JButtonnewButton = new JButton();getContentPane().add(newButton);

Рис 3.2 - Окно с кнопкой

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

Элементы, которые содержат другие элементы, называются контейнерами Все они являются потомками класса Container и наследуют от него ряд полезных методов:

add(Component component) -- добавляет в контейнерэлемент component;

remove(Component component) -- удаляетизконтейнераэлемент component;

removeAll() -- удаляет все элементы контейнера;

getComponentCount() -- возвращает число элементов контейнера.

Кроме перечисленных в классе Container определено около двух десятков методов для управления набором компонентов, содержащихся в контейнере Как видно, они похожи на методы класса-коллекции Это неудивительно, ведь по сути контейнер и является коллекцией, но коллекцией особого рода -- визуальной Кроме хранения элементов контейнер занимается их пространственным расположением и прорисовкой В частности, он имеет метод getComponentAt(int x, int y), возвращающий компонент, в который попадает точка с заданными координатами (координаты отсчитываются от левого верхнего угла компонента) и ряд других Мы не будем подробно рассматривать абстрактный контейнер, а сразу перейдем к его наиболее часто используемому потомку -- классу JPanel.

Панель JPanel -- это элемент управления, представляющий собой прямоугольное пространство, на котором можно размещать другие элементы Элементы добавляются и удаляются методами, унаследованными от класса Container.

В примере с кнопкой мы наблюдали, как добавленная на панель содержимого кнопка заняла все ее пространство Это происходит не всегда На самом деле у каждой панели есть так называемый менеджер размещения, который определяет стратегию взаимного расположения элементов, добавляемых на панель Его можно изменить методом setLayout(LayoutManagermanager) Но чтобы передать в этот метод нужный параметр, необходимо знать, какими бывают менеджеры.

Самый простой менеджер размещения -- FlowLayout Он размещает добавляемые на панель компоненты строго по очереди, строка за строкой, в зависимости от размеров панели Как только очередной элемент не помещается в текущей строке, он переносится на следующую Лучше всего пронаблюдать это на примере Изменим конструктор класса SimpleWindow следующим образом:

SimpleWindow(){super("Пробноеокно");

setDefaultCloseOperation(EXIT_ON_CLOSE);

JPanel panel = new JPanel();

panel.setLayout(new FlowLayout());

panel.add(new JButton("Кнопка"));

panel.add(new JButton("+"));

panel.add(new JButton("-"));

panel.add(new JButton("Кнопка с длинной надписью"));

setContentPane(panel);

setSize(250, 100);}

Рис 3.3 - Окно после добавления элементов

Менеджеры расположения описаны в пакете java.awt Нужно импортировать нужные классы.

Проанализируем текст примера Новый менеджер расположения FlowLayout создается конструктором без параметров Следует обратить внимание, в программе не используется промежуточная переменная Тоестьвместодвухкоманд:

FlowLayoutnewLayout = new FlowLayout();

panel.setLayout(newLayout);

Мыиспользуемодну:

panel.setLayout(new FlowLayout());

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

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

Метод setContentPane(JPanelpanel) позволяет заменить панель содержимого окна.

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

При добавлении элемента на панель с менеджером размещения BorderLayout, необходимо дополнительно указывать в методе add(), какая из областей имеется в виду Для этого служат строки с названиями сторон света: "North", "South", "East", "West" и "Center" Но вместо них рекомендуется использовать константы, определенные в классе BorderLayout: NORTH, SOUTH, EAST, WEST и CENTER (поскольку в строке можно допустить ошибку и не заметить этого, а при попытке написать неправильно имя константы компилятор выдаст предупреждение) Если же использовать метод add() как обычно, с одним параметром, элемент будет добавлен в центр.

Панель содержимого имеет именно такое расположение, именно поэтому кнопка и занимала все окно целиком (она была добавлена в центральную область) Чтобы пронаблюдать эффект BorderLayout, добавим кнопки во все пять областей:

SimpleWindow(){

super("Пробноеокно");

setDefaultCloseOperation(EXIT_ON_CLOSE);getContentPane().add(new JButton("Кнопка"), BorderLayout.NORTH);

getContentPane().add(new JButton("+"), BorderLayout.EAST);

getContentPane().add(new JButton("-"), BorderLayout.WEST);

getContentPane().add(new JButton("Кнопка с длиннойнадписью"), BorderLayout.SOUTH);

getContentPane().add(new JButton("В ЦЕНТР!"));

setSize(250, 100);}

Эффект будет хорошо наблюдаться, если изменять размеры окна.

Рис 3.4 - Окно с применением эффектов



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

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

Этот менеджер, в отличие от рассмотренных ранее, создается конструктором с параметрами (четыре целых числа) Необходимо указать количество столбцов, строк и расстояние между ячейками по горизонтали и по вертикали.