Что такое графический примитив? определение, применение и особенности

Введение

На этом занятии вы будете рисовать графические объекты на языке Python.

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

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

Чтобы импортировать возможности библиотеки в вашей программе нужно вставить:

import graphics as gr

Теперь все объекты этой библиотеки будут вызываться через точку: .

Графическое окно — это место, где будут размещаться графические примитивы:

# подключение библиотеки под синонимом gr
import graphics as gr

# Инициализация окна с названием "Russian game" и размером 100х100 пикселей
window = gr.GraphWin("Russian game", 100, 100)

# Закрытие окна после завершения работы с графикой
window.close()

Создание графических примитивов:

# Создание круга с радиусом 10 и координатами центра (50, 50)
my_circle = gr.Circle(gr.Point(50, 50), 10)

# Создание отрезка с концами в точках (2, 4) и (4, 8)
my_line = gr.Line(gr.Point(2, 4), gr.Point(4, 8))

# Создание прямоугольника у которого диагональ — отрезок с концами в точках (2, 4) и (4, 8)
my_rectangle = gr.Rectangle(gr.Point(2, 4), gr.Point(4, 8))

Отрисовка примитива в графическом окне производится отдельной командой:

# Отрисовка примитивов в окне window
my_circle.draw(window)
my_line.draw(window)
my_rectangle.draw(window)

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

#  Ожидание нажатия кнопки мыши по окну.
window.getMouse()

#  После того как мы выполнили все нужные операции, окно следует закрыть.
window.close()

Законченный пример:

import graphics as gr

window = gr.GraphWin("Jenkslex and Ganzz project", 400, 400)

face = gr.Circle(gr.Point(200, 200), 100)
face.setFill('yellow')

eye1 = gr.Circle(gr.Point(150, 180), 20)
eye2 = gr.Circle(gr.Point(250, 180), 15)
eye1_center = gr.Circle(gr.Point(150, 180), 8)
eye2_center = gr.Circle(gr.Point(250, 180), 7)
eye1.setFill('red')
eye2.setFill('red')
eye1_center.setFill('black')
eye2_center.setFill('black')

eyebrow1 = gr.Line(gr.Point(100, 120), gr.Point(180, 170))
eyebrow2 = gr.Line(gr.Point(220, 170), gr.Point(300, 140))
eyebrow1.setWidth(10)
eyebrow2.setWidth(10)
eyebrow1.setOutline('black')
eyebrow2.setOutline('black')

mouth = gr.Line(gr.Point(150, 260), gr.Point(250, 260))
mouth.setWidth(20)
mouth.setOutline('black')

face.draw(window)
eye1.draw(window)
eye2.draw(window)
eye1_center.draw(window)
eye2_center.draw(window)
eyebrow1.draw(window)
eyebrow2.draw(window)
mouth.draw(window)

window.getMouse()

window.close()

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

Работа в графическом редакторе. Основные операции с графическими объектами

Последовательность работы с графическим редактором напоминает другие алгоритмы, с которыми вы были ознакомлены в курсе «Информатики». Процесс создания картинки можно описать и сформулировать формально:

Этап 1. Запускаем редактор paint c новым или уже редактированным документом (картинкой). Если просто запустить редактор, то перед вами предстанет пустая рабочая область. А значит,редактирование рисунка начинается сначала. Если вы хотите доработать уже имеющуюся картинку, запустите Paint и откройте ее через меню программы.

Этап 2. Работа с примитивами. С помощью примитивов мы создаем отдельные фрагменты изображения. Но понятие фрагмента шире. Фрагмент – это любая область рисунка, которую можно выделить при помощи инструмента с рамкой (операция «выделение фрагмента»):

Преобразование фрагментов – важнейшая операция при работе с Paint. Рисование примитивов слишком просто, чтобы на нем долго задерживаться. Выбрал примитив (например, прямоугольник на панели – и рисуй себе мышкой). А о манипуляции с фрагментам стоит поговорить всерьез. Выделение графических фрагментов напоминает способы выделения фрагментов текста. Вставка фрагмента в буфер обмена и извлечение фрагмента из буфера также ничем не отличается от таких же точно операций в редакторе Word. Инструменты графического редактора позволяют делать это в два счета. Просто используйте горячие клавиши «Ctrl-C» (копирование), «Ctrl-X» (вырезать фрагмент) и «Ctrl-V» (вставка обратно в рабочую область рисунка).

Как удалить фрагмент, не вырезая его в буфер? Точно так же как и в текстовом редакторе – выделяем и жмем на клавишу DEL на клавиатуре. Как переместить фрагмент? Элементарно: выделяем и тащим фрагмент мышкой. На следующем рисунке мы изобразили примитив в виде окружности, залили его «Ведерком» оранжевой краской, затем выделили внутри круга прямоугольник и перетащили его мышью. Посмотрите на результат:

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

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

Ввод графической информации в персональный компьютер

Графический редактор можно считать программным средством для помещения изображений в память ПК, Помимо софта этой цели служат и аппаратные ресурсы компьютера – обычные и не совсем устройства ввода информации. Устройства ввода графической информации прошли длинный путь эволюции от простейших приборов вроде графического пера и мониторов со специальной разметкой, до суперсовременных сканеров и видеокамер. К устройствам ввода графической информации относится также и мышь. Но непосредственно использовать ее с этой целью нельзя, а только в симбиозе с программами наподобие Paint. На стареньких 8-битных компьютерах 80-х с этой же целью применялась и клавиатура. По экрану бегало изображение мышки, но управлялась такая виртуальная мышь клавишами-стрелками клавиатуры. То есть на вопрос: «позволяет ли мышь ввод информации» можно ответить и «да» и «нет» одновременно.

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

Редакторы компьютерной графики. Классический редактор Paint

Пора переходить от слов к делу. Мы обещали показать вам какой-нибудь редактор графических изображений и рассказать о принципах его работы. Сдержим свое обещание – посмотрите на рисунок ниже:

Перед вами входящий в поставку Windows растровый графический редактор Paint. Одного взгляда на картинку достаточно, чтобы глаз выделил в ней следующие элементы окна программы:

1. Рабочую область программы;
2. Панель инструментов (наподобие той, что имеется в Ворде);
3. Всевозможные кнопки панели инструментов;
4. Стандартное меню панели инструментов.

Как видите ничего нового. Дело в том, что компания Microsoft уже довольно давно ввела единый стандарт на внешний вид окон и органов управления в приложениях Windows. Так что ничего особенно необычного ожидать не приходится. Остается только разобраться в назначении меню и кнопок. Меню представлено закладками, щелкая по которым можно открыть доступ к той или иной панели. В ранних версиях Windows все было немного не так. Стандартная панель инструментов и меню были жестко разделены визуально, хотя и обладали сходной функциональностью. Нынче данный подход уже не популярен, хотя в вашей версии операционной системы Paint может выглядеть немного иначе.

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

На панели можно выбрать атрибуты примитивов: толщину границы, цвет границы и цвет заливки внутренней обрасти изображаемой в данный момент фигуры. Также можно задействовать «Ластик» — для стирания части картинки, «Карандаш» — для проведения произвольных линий разной толщины, «Ведерко» — для заливки цветом, «Лупу» — для увеличения части изображения, а также «Пипетку» — для того чтобы сохранить в памяти цвет данной конкретной точки картинки. Потом сохраненный цвет можно использовать повторно, так как он появляется в виде отдельного квадратика в зоне выбора цвета.

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

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

Графические редакторы

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

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

Векторная графика использует геометрические примитивы. Что такое графический примитив в векторной графике, уже говорилось выше. Это точки, линии, кривые и многоугольники (или полигоны) или векторные изображения. Такие фигуры основаны на математических выражениях, для представления изображений в компьютерной графике. Конвертировать векторную графику в растровую довольно просто, но из растровой в векторную гораздо сложнее. Некоторые программы пытаются это сделать. В дополнение к статической графике, есть анимация и программное обеспечение для редактирования видео. Компьютерная графика также может использоваться другим программным обеспечением для редактирования, таким как Adobe Photoshop, Pizap, Microsoft Publisher, Picasa и т. д. Еще один вариант — это программы для анимации, и видеоредакторы, такое как Windows Movie Maker.

Что такое графические объекты и примеры их применения в жизни

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

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

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

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

Комбинацией графических примитивов в редакторе достигается создание графических объектов любой сложности.

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

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

Далее мы рассмотрим примеры графических редакторов и решение графических примеров с их помощью.

Компьютерная графика и ее инструменты

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

1. Программы для манипуляции трехмерными (объемными) примитивами – 3D-редакторы.
2. Средства компьютерной графики для создания чертежей (CAD-системы).
3. Специализированные технические средства компьютерной графики. Например, для разработки новых шрифтов.
4. Программные средства компьютерной графики для создания презентаций.

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

Положение начала координат

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

Это делается с
помощью метода:

DC.SetDeviceOrigin(self, x, y)

где x, y – новое
положение начала системы координат. Давайте в качестве примера расположим ее в
центре клиентской области окна и нарисуем линии, исходящие из этого центра по
кругу:

    def OnPaint(self, e):
        dc = wx.PaintDC(self)
 
        size_x, size_y = self.GetClientSize()
        dc.SetDeviceOrigin(size_x // 2, size_y // 2)
 
        radius = math.hypot(size_x / 2, size_y / 2)
        angle = 
 
        while (angle < 2 * math.pi):
            x = round(radius * math.cos(angle))
            y = round(radius * math.sin(angle))
            dc.DrawLine((, ), (x, y))
            angle = angle + 2 * math.pi / 360

В результате,
получим такое изображение:

Видите, все
линии теперь исходят из центра окна, с начальной координатой всех линий (0, 0).
Это как раз и показывает, что начало координат находится в центре.

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

Графическим примитивом является также программное обеспечение, при помощи которого на экран выводится определенное изображение. Один из них — дисплейный файл. Он является массивом некоррелированных данных или набором команд, которые необходимы для правильной отрисовки изображения на экране. Массивы заполняются из данных списка, хранящегося в памяти. В результате их обработки на ЭЛТ-мониторе создается картинка, состоящая из пикселей разного цвета. Кадровым буфером называют устройство для хранения и вывода видео на экран. Обычно это устройство или вид памяти, которое хранит несколько кадров видеоизображения. Изображение находится в памяти в виде массива данных, где записаны последовательные цветовые значения каждого пикселя.

Единицы измерения координат

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

• HD
  – 1280 x 720 точек;

• Full
  HD – 1920 x 1080 точек.

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

DC. SetMapMode(mode)

и указать режим
отображения:

• wx.MM_TEXT
  – пикселы;

• wx.MM_METRIC
  – миллиметры;

• wx.MM_LOMETRIC
  – 1/10
  миллиметра;

• wx.MM_POINTS
  – пункт (1/72
  дюйма);

• wx.MM_TWIPS – 1/20 пункта
  (или 1/1440 дюйма).

Например,
изобразим линию в 10 см в нашем окне. Для этого воспользуемся режимом wx.MM_METRIC
и запишем обработчик OnPaint следующим
образом:

    def OnPaint(self, e):
        dc = wx.PaintDC(self)
        dc.SetMapMode(wx.MM_METRIC)
 
        dc.DrawLine(20, 10, 120, 10)
 
        dc.SetMapMode(wx.MM_TEXT)
        dc.DrawBitmap(wx.Bitmap("ruler.jpg"), 30, 40)

Смотрите, здесь
линия по горизонтали составляет 100 единиц, то есть, 100 мм, что равно 10 см.
Ниже отображается линейка в реальном масштабе и, т.к. это просто изображение,
то перед ее рисованием возвращаем режим в пикселы (wx.MM_TEXT). В итоге
получим следующую картину:

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

Вот так в wxPython выполняется
рисование графических примитивов.

Видео по теме

wxPython #1: обзор модулей для GUI и порядок установки wxPython

wxPython #2: общая структура интерфейса

wxPython #3: создание меню и подменю — MenuBar, Menu, MenuItem, Bind, Append, AppendSeparator

wxPython #4: контекстное меню и панель инструментов (toolbar)

wxPython #5: схемы (layout) размещения виджетов, BoxSizer

wxPython #6: сайзеры — GridSizer, FlexGridSizer, GridBagSizer

wxPython #7: механизм обработки событий — Bind, Unbind

wxPython #8: примеры событий, назначение id виджетам

wxPython #9: стандартные диалоговые окна

wxPython #10: пользовательские диалоговые окна, класс Dialog

wxPython #11: базовые виджеты — StaticText, TextCtrl, Button, ToggleButton, CheckBox и другие

wxPython #12: продвинутая работа с виджетами — ListBox, SplitterWindow, HtmlWindow, Notebook

wxPython #13: графика — контекст устройства, Pen, Brush и градиентная заливка

wxPython #14: графические примитивы, система координат, единицы измерений

wxPython #15: регионы (wx.Region) и операции с ними

wxPython #16: буферизация графических данных — MemoryDC, Blit

wxPython #17: демонстрация программы wxFormBuilder

Функции с параметрами

А теперь представьте, что в предыдущей самостоятельной работе вас попросили сделать не две копии, а сто?

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

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

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

Продемонстрируем, как этот код можно оптимизировать.

def draw_eye(x, y, size):
    eye = gr.Circle(gr.Point(x, y), size)
    pupil = gr.Circle(gr.Point(x, y), size2)

    eye.setFill('red')
    pupil.setFill('black')

    eye.draw(window)
    pupil.draw(window)

def draw_angry_lecturer():
    draw_face()
    draw_eye(150, 180, 20)
    draw_eye(250, 180, 14)
    draw_eyebrows()
    draw_mouth()

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

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

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

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

Основные примитивы исполнителя Рисователь

Ключевые слова:

• графический	примитив	
• линия	
• прямоугольник	
• окружность	
• ломаная
• контур
• перо
• заливка
• кисть

Графический примитив — это геометрическая фигура, которая добавляется на рисунок с помощью одной команды.

Основные примитивы исполнителя Рисователь:• пиксель;
• линия;
• прямоугольник;
• окружность.

Линии рисуются пером. Перо — это набор свойств линии: толщина и цвет. Для того чтобы нарисовать линию, нужно сначала выбрать её характеристики с помощью команды перо:

перо(1, синий)

Первый аргумент в скобках — это толщина линии, второй — её цвет

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

Теперь применим команду линия:

линия( 10, 20, 15, 20 )

Первые два аргумента — это координаты одного конца линии (точнее, отрезка), следующая пара — координаты второго конца. Здесь мы рисуем отрезок из точки с координатами (10, 20) в точку с координатами (15, 20).

Сравните рисование линии по пикселям и использование команды линия. Какой способ проще?

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

Координаты левого верхнего угла прямоугольника — (а, b), а координаты правого нижнего — (с, d). Определите координаты остальных углов прямоугольника и его размеры.

Как можно было бы нарисовать прямоугольник, если бы в СКИ Рисователя не было команды прямоугольник?

Эта программа рисует прямоугольник, противоположные углы которого находятся в точках с координатами (20, 10) и (40, 30) — рис. 6.47 (и цветной рисунок на форзаце).

Рис. 6.47

В первой строке мы определяем свойства контура — толщину и цвет. Прямоугольник — это замкнутая фигура, поэтому для него можно задать ещё и цвет заливки. Это делает команда кисть во второй строке. Если нужно нарисовать только рамку (не заливая внутреннюю часть фигур), устанавливается прозрачный цвет кисти:

кисть(прозрачный)

Команды перо и кисть ничего не рисуют, а только устанавливают режимы рисования для команды прямоугольник в последней строке.

Используя рис. 6.47 и программу к нему, выясните, сколько аргументов имеет команда прямоугольник. В каком порядке они перечисляются?

Команда окружность предназначена для рисования окружностей и кругов. Ей нужно передать три аргумента: координаты центра и радиус. Окружность — замкнутая фигура, поэтому для неё можно задавать свойства пера и цвет заливки внутренней части (круга).

Эта программа рисует круг с центром в точке (50, 30) радиуса 20 пикселей (рис. 6.48 и цветной рисунок на форзаце).

Рис. 6.48

Какие цвета будут иметь контур окружности и внутренняя часть круга после выполнения этой программы?

Как нужно вызвать команду окружность для того, чтобы нарисовать окружность радиуса R с центром в точке с координатами (х, y)?

Следующая страница Ломаные

Cкачать материалы урока