Как сделать график в паинте
Формируем интерфейс
Чтобы область под график pictureBox изменяла свои размеры с изменением размеров формы, установим ей свойство Anchor как на картинке:
теперь если менять размеры формы, и область под график будет меняться соответственно:
Добавляем обработчик события Paint
Всю отрисовку на PictureBox, полагается выполнять внутри функции привязанного к событию Paint
Выбираем на форме pictureBox переходим в список событий, и кликаем дважды на свойство Paint
оказываемся в новосозданной функции
Рисуем график
Попробуем нарисовать график, пока без учета коэффициентов.
Чтобы нарисовать график нам надо сформировать список точек, подготовим его
и так, точки у нас есть, теперь их надо нарисовать. Прежде чем вызвать функцию для отрисовки, надо указать как будет выглядеть линия, Для этого надо создать объект типа Pen (то бишь перо, ручка), у которого есть два основных параметра: цвет и ширина линии, создадим такой объект:
ну а теперь можно нарисовать график, для этого воспользуемся функций DrawLines, объекта Graphics (так называемый графический контекст устройства) который привязан к аргументу PaintEventArgs e
Увидим что-то несуразное:
Если попытаться угадать в этом параболу, то увидим сразу несколько проблем:
Сдвигаем график в центр области
Решить все перечисленные выше проблемы можно используя матрицы перехода https://ru.wikipedia.org/wiki/Матрица_перехода
Матрицы перехода являются одним из основополагающих математических инструментов в создании 3D графики, который в упрощённом виде работает и в 2D графике (с чем мы собственно сейчас и работаем).
Ко всякому объекту типа Graphics привязана матрица переходов (доступная через свойство Transform). По умолчанию она представляет собой единичную матрицу. Мы можем изменять матрицу используя методы объекта типа Graphics
Применяя эти методы в разных порядках можно перемещать, масштабировать и крутить объекты и даже группы объектов малой кровью.
Мы конечно особо ничего крутить ничего не планируем. Но давайте перенесем центр координат в центр pictureBox, добавим строчку:
Переворачиваем график
Очевидно, что у параболы с коэффициентом 1, ветви параболы должны быть направлены вверх. И хотя мы абсолютно верно формируем список точек:
ошибка возникает из-за того, что центр координат, у большинства системных объектов, находится в левом верхнем углу:
чтобы перевернуть график воспользуемся функцией ScaleTransform
Масштабируем график
И вот вроде все отлично, но график рисуется в пиксельной системе координат. Что на небольших мониторах выглядит еще куда ни шло, но на современных Ultra HD и 4K придется использовать лупу. Мы конечно не хотим заставлять пользователя доставать лупу, но зато мы можем увеличить масштаб графика, снова воспользовавшись функций ScaleTransform. Добавим строчку:
неплохо, но линия какая-та толстая. Она масштабируется вместе со всем остальным, что не есть хорошо. Чтобы избавится от масштабирования линии придется модифицировать ее матрицу перехода. Да-да, у объекта типа Pen тоже есть своя матрица перехода, также доступная через свойство Transform.
Какую же матрицу перехода применять к линии? Очевидно, обратную к матрице основного Graphics. Сделаем это:
вот теперь другое дело
Рисуем сетку
Чтобы лучше ориентироваться где какая точка находится нарисуем сетку с размером ячейки в одну единицу
кстати можно сделать чтобы единица на экране соответствовала одному сантиметру в реальной жизни и получить своего рода экранную линейку. Для этого надо воспользоваться свойством DpiX и DpiY объекта Graphics, пробуем. Dpi определяет количество точек на дюйм. В одном дюйме примерно 2.54 сантиметра, следовательно, нам надо отредактировать вызов функции скалирования следующим образом:
достаем линейку, прикладываем к экрану:
так себе точность, конечно, получается, но результат все-таки радует.
Решаем проблему перерисовки при изменении размеров формы
Возможны вы уже пробовали менять размеры формы, и заметили, что получаемый результат далек от ожидаемого.
связано такое поведение с особенностью перерисовки объектов на форме. Перерисовывается только изменённая часть. А так как при разных размерах формы положение графика и сетки разное получается наложение десятка разных изображений, что приводит к таким ужасным артефактам.
Чтобы при изменении размера формы изображение перерисовывалось всегда целиком, добавьте обработчик событию Resize, объекта pictureBox
и в обработчике вставьте строчку:
Сглаживаем график
Сейчас у нас графи рисуется по целым координатам, из-за чего выглядит слегка уродливо и сильно угловато. Давайте увеличим количество точек. В этот раз, при формировании списка точек, я, вместо цикла, воспользуюсь Linq функциями, которые позволят мне сформировать список точек в функциональной манере с использованием лямбда-выражений.
запускаем, получаем гладенький график:
Подключаем учет коэффициентов
Играясь с графиками совсем забыли про коэффициенты. Посчитаем их значения и добавим в учет при формировании точек:
хм, чего-то не работает…
А ну да, нам же надо чтобы при изменении значения, вызывался метод pictureBox.Invalidate(), тот самый которые отправляет запрос на перерисовку всего pictureBox. Переключаемся на форму, и кликаем два разу на txtK, а затем на txtN, добавляем код в соответствующие обработчики:
Итоговый код
Если вы в какой-то момент запутались, то вот вам итоговый код функции отрисовки:
Рисуем в программе Paint стандартными фигурами и инструментами.
Вначале мы выберем курсором и белая стрелка простую фигуру или быстрее всего это часть геометрической фигуры с именем «Линия» и
просто кликаем левую кнопку мыши, когда курсор стоит на значке инструмента или фигуры с именем «Линия».
Рисуем всегда одной командой для компьютера-нажать и не отпускать левую кнопку мыши и перемещать курсор по экрану, а чтобы курсор двигался по экрану надо двигать мышку компьютерную по коврику или по другой подходящей поверхности.
Не все компьютерные коврики для компьютерной мыши бывают хороши для работы художника или для рисования, Надо искать тот коврик, который позволяет точно рисовать на экране монитора.
Строго белый коврик или строго чёрный не всегда хороши и часто даже вредны для работы художника.
Мы нажали левую кнопку мыши, ДЕРЖИМ и перемещаем мышь и начинаем рисовать прямые линии.
Курсор перемещаем вправо и несколько вниз. Всё прямую линию мы нарисовали и закончили её рисовать, но палец с левой кнопки мыши мы ещё не убрали.
Что наш палец на левой кнопку нам сообщает компьютер таким способом- наш курсор в виде «перекрестия».
Это означает, что мы завершили рисовать нашу прямую линию.
Если вы взглянете на Панель инструментов, то увидите, что инструмент с именем «Линия» ешё работает, так как кнопка инструмента ещё нажата и выделена цветом.
Вы уже должны знать когда компьютер выделяет значок инструмента он превращает значок в кнопку.
А это значит, что кнопка с именем «Линия» сейчас нажата и мы можем продолжать рисовать прямые линии на экране.
Продолжаем рисовать прямыми линиями.
Нарисовали вторую прямую линию. Нарисовали её в перекрест первой линии.
Мы переместили курсор влево и чуть ниже, а потом нажав и удерживая левую кнопку мыши начали рисовать прямую линию вверх и вправо и наша прямая линия закончилась вверху.
Где конец нашей линии, там где белый курсор сейчас на экране.
Продолжим наши рисунки прямой линией.
На экране уже три прямые линии. И две линии соединены уже вместе.
Инструмент «Линия» не отключается и позволяет нам рисовать дальше.
Все линии соединили вместе. Уже у нас есть простейший рисунок созданный только прямыми линиями.
Теперь мы перемещаем курсор белая стрелка на значок-кнопку с именем
» Ластик» и немного задержав курсор точно на значке команды с именем «Ластик» вы можете видеть на экране «всплывающую» подсказку.
В подсказке вы можете почитать назначение инструмента «Ластик» и принять решение будете вы его применять для рисования или нет.
По идее программистов инструмент Ластик не может рисовать и только может, как школьная резинка стирать или удалять нарисованное.
Если вы нарисовали и хотите чтобы вашего рисунка не было на экране или на этом белом листе бумаги, вы выбираете инструмент Ластик и всё стираете и у вас снова белый лист бумаги.
Здесь мы инструментом Ластик выполняем операцию именно редактирования рисунка или объекта.
ВЫ должны запомнить Ластик не может рисовать.
Ластик может только стереть нарисованное вами и поэтому вы
должны хорошо подумать что вы сейчас сотрёте на рисунке.
Вы в своей голове должны подумать и понять, что вы сотрёте или удалите и что вы оставите на экране.
В нашем рисунке мы стёрли два фрагмента на двух прямых линиях и значит мы не рисовали, а редактировали наш рисунок.
Поэтому программу Paint называют графическим редактором, потому как она позволяет редактировать нарисованное вами.
Как вы видите прямые линии не твёрдые, если так можно сказать объекты, а их можно стирать и стирать в любом месте.
Сразу скажем, что в некоторых программах вот таким образом стереть линии просто нельзя. Унас наш Ластик может стирать и часть рисунка и может стереть весь рисунок, создав тем самым пустой белый экран без всех рисунков.
Продолжаем редактировать наш рисунок или уже можно сказать объект.
Надеюсь вы поняли как работает инструмент Ластик, нажимаем и удерживаем левую кнопку мыши, не отпускать, и перемещаем курсор туда где хотим стереть фрагмент рисунка и в этой области перемещаем курсор несколько раз туда-сюда.
Если вам нравиться, то вы можете себе представить, что вы не стираете фрагмент рисунка, а просто закрашиваете его белой краской.
ВНИМАНИЕ! Стирать и выполнять такие действия с объектом может только инструмент Ластик.
Теперь мы Ластиком редактировали уже несколько фрагментов рисунка и как видите наш рисунок стал совсем другим.
Я является ли это рисунком, то что мы создали на экране уже как бы назвать рисунком это трудно, а вот объектом или заготовкой всегда можно.
Видимо мы собираемся создать или нарисовать рисунок, но пока и сами не знаем, что же мы нарисуем и поэтому это называется заготовкой для будущего рисунка.
Часто опытные художники уже в голове знают, что они нарисуют и что хотят нарисовать, но начинать надо всё равно вот с таких заготовок.
Вот мы снова выбрали инструмент с именем «Линия» и дорисовали наш рисунок. Теперь тех мест которые были пусты нет их заполнили линии.
Вы можете сказать, а где же линии, ведь они длинные, а вот в нашем случае они очень короткие и здесь мы нарисовали восемь.
Восемь коротких линии и восемь раз мы применили инструмент Линия и восемь раз мы перемещали мышку по коврику и восемь раз компьютер выполнял команду нарисовать прямую Линию.
И здесь вы убедились и надеюсь поняли, что компьютер может нарисовать любые линии:длинные и очень короткие и может стереть часть линии и снова их соединить в рисунке.
У нас получилась заготовка к рисунку, а что здесь хочет нарисовать художник мы ещё не знаем.
Художник выбрал инструмент с именем «Карандаш» и нарисовал глаза и стала ясно, что это будут две птицы. Одна на земле сидит раскинув крылья и стоит на ножках, а другая летит над ней раскинув крылья.
А дале художник уже будет проводить летальную точную прорисовку всех деталей. Нарисует птицам красивые глаза крылья и клювы и перья будут у птиц.
Но в заготовке даже можно уже видеть, что это птицы.