Векторная графика
Предмет: Информатика, 5 класс
Автор: Волкова Алла Александровна

Ход урока

Постановка цели и задач урока. Мотивация учебная деятельность

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

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

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

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

Актуализация знаний

Для работы с векторными изображениями используют специальные программы – векторные графические редакторы, например, Adobe Illustrator, CorelDraw, Inkscape. В то же время, рисовать простые схемы и рисунки можно даже с помощью офисных пакетов: в редакторе Word есть небольшой встроенный векторный редактор, а в состав OpenOffice входит векторный редактор Draw.

Конструирование сложных графических изображений из простых геометрических фигур (примитивов) – основная идея векторных графических редакторов.

К примитивам относятся

· отрезок,

· прямоугольник,

· овал (эллипс),

· кривая и др.

На рисунке показаны некоторые часто используемые фигуры в редакторе Word.

Основные фигуры – отрезок, прямоугольник, овал (эллипс) – рисуются так же, как и в растровых редакторах, но после завершения рисования

они не превращаются в набор пикселей

, а

остаются отдельными объектами

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

Чтобы что-то сделать с объектом, его нужно выделить щелчком мыши.

Попробуйте щёлкать мышью на объектах при нажатой клавише Shift. Что получается?

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

Чтобы переместить сам объект, нужно схватить его за контур.

Что получится, если при перетаскивании удерживать нажатой клавишу Ctrl?

Нажатие на клавишу Delete удаляет выделенные объекты.

Для контура любой фигуры можно задать

- цвет,

- толщину,

- стиль линии (сплошная, штриховая, точечная и др.).

На концах отрезка могут быть стрелки различной формы и размеров. В редакторе Word для настройки контура используется меню Контур фигуры на вкладке Формат, а в OpenOffice Writer – панель Свойства.

С помощью меню Заливка фигуры (для Word – на вкладке Формат) можно выбрать цвет заливки (или отключить заливку вообще). Кроме того, возможны и другие типы заливки:

- градиент – плавный переход между двумя или несколькими цветами;

- рисунок (для заполнения области используется изображение из файла);

- текстура – рисунок, имитирующий материал (бумагу, холст, дерево и др.);

- узор – рисунок, составленный из двух цветов.

Новые фигуры добавляются на рисунок поверх существующих. Иногда нужно изменить порядок их расположения, например, переместить какую-то фигуру впереди (выше) всех остальных объектов. Для этого в Word служат команды вкладки Формат:

- На передний план (поверх всех остальных объектов);

- Переместить вперед – поменять местами выделенный объект с тем, который находится непосредственно над ним;

- На задний план (позади всех остальных объектов);

- Переместить назад – поменять местами выделенный объект с тем, который находится непосредственно под ним.

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

На рисунке показан результат применения команды «На передний план» к объекту с белой заливкой.

При работе с векторными рисунками часто возникают такие задачи:

- выровнять несколько объектов по какому-то краю (например, по верхней границе):

- распределить несколько объектов так, чтобы они оказались на равных расстояниях по горизонтали или по вертикали:

Конечно, всё можно сделать вручную, передвигая мышью отдельно каждую фигуру, но это очень долго и неточно. В текстовых процессорах эти операции автоматизированы. В программе Microsoft Word они выполняются с помощью команд группы Выровнять на вкладке Формат, а в OpenOffice Writer – с помощью раздела Выравнивание в контекстном меню.

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

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

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

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

Увеличьте сгруппированный рисунок так, чтобы он занял весь экран. Появились ли искажения, которые были при увеличении растровых рисунков?

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

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

На рисунке изображена кривая с опорными точками А, Б, В, Г и Д.

У каждой из этих точек есть «рычаги» (управляющие линии), перемещая концы этих рычагов можно менять кривизну всех участков кривой (сегментов). Если оба рычага находятся на одной прямой, получается гладкий узел (Б и Г), если нет – то угловой узел (В). Таким образом, форма кривой полностью задаётся координатами опорных точек и рычагов. Кривые, заданные таким образом, называют кривыми Безье в честь их изобретателя французского инженера Пьера Безье.

В редакторе Word кривую можно нарисовать с помощью инструментов Кривая и Полилиния . Для того, чтобы редактировать кривую, нужно щёлкнуть правой кнопкой мыши по кривой и выбрать команду Начать изменение узлов в контекстном меню. При этом появляется возможность

· перемещать, удалять и добавлять узлы;

· изменять тип узла (с гладкого на угловой и обратно);

· изменять положение рычагов, регулирующих кривизну.

В OpenOffice Writer для рисования кривых служит инструмент Объект кривых на панели Рисование. Кнопка Изменение геометрии на этой же панели включает режим редактирования кривой.

Контроль, оценка и рефлексия

Задание 1

Как вы думаете, в каких задачах лучше использовать растровую графику, а в каких – векторную:

Задание 2

Решите кроссворд:

По горизонтали:

1) Одна из элементарных фигур в векторном редакторе.

2) Инженер, по фамилии которого названы векторные кривые.

3) Устройство для ввода видео в компьютер.

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

5) Элементарная фигура в векторном редакторе.

6) Опорная точка векторной кривой, координаты которой хранятся в памяти.

7) Удаление лишних частей изображения.

8) Постепенный переход между двумя цветами.

Какое слово получилось в закрашенных клетках? ________________________

Дайте определение этому слову: ______________________________________

__________________________________________________________________

Практическая работа

1) Нарисуйте домик (вы можете выбрать уровень сложности):

2) Сгруппируйте все элементы рисунка и постройте его копию, уменьшенную в два раза.

3) Иллариону нужно составить план посадки картофеля на своём участке. Они хочет посадить 5 рядов по 10 кустов картошки в каждом. Помогите ему составить план поля:

4) Откройте файл butterfly.doc (или butterfly.rtf, или butterfly.odg). Половина бабочки нарисована в векторном редакторе как набор мелких элементов. Нужно построить полное изображение бабочки большого размера и разместить его по центру прямоугольника с фоном.

5) Нарисуйте сердце:

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

6) Нарисуйте надкушенное яблоко. Какая фирма выбрала такой фирменный знак (логотип)?

Темы сообщений:

а) «Векторная графика вокруг нас»

б) «Векторный редактор OpenOffice Draw»

в) «Векторный редактор Inkscape»

г) «Векторная графика в редакторе GIMP»

д) «Векторная графика на веб-страницах»

Интересные сайты:

а) www.inkscape.org – редактор Inkscape.

б) inkscape.paint-net.ru – уроки по редактору Inkscape.

в) wiki.linuxformat.ru/wiki/LXF74-75:Inkscape – уроки по редактору Inkscape.

г) corel.demiart.ru – уроки по редактору Corel Draw.

д) coreldrawgromov.ru – уроки по редактору Corel Draw.

е) svg-edit.googlecode.com/svn/branches/stable/editor/svg-editor.html – онлайн-редактор векторной графики.

Ссылки на ресурсы:

Файлы для практической работы

https://yadi.sk/d/pgrhG7SBqK4jJ

Рисунок «Изменение качества растровой графики»

http://www.urokpk.ru/grafiki/images/rastrovoj.jpg

Рисунок «Множество точек»

http://www.tamboff.ru/forum/files/thumbs/t_ue_202.png

Рисунок «3D модель автомобиля»

http://downloadanyfileshere.ru/img/58158-download-3d-studio-max-student.jpg

Рисунок «Трехмерное пространство»

http://clubgo.ru/wp-content/uploads/2016/06/3D_coordinate_system.png

Список используемой литературы:

- Поляков К.Ю., Еремина Е.А. Информатика. Учебник для 7 класс. Москва. БИНОМ. Лаборатория знаний

- Босова Л.Л., Босова А.Ю. Информатика. Учебник для 7 класса. Москва. БИНОМ. Лаборатория знаний

- Материалы с сайта http://kpolyakov.spb.ru