Графика в Java. Graphics
Графику в Java обслуживают классы Graphics и Graphics2D.
Работа с графикой осуществляется в графическом контексте элементов, унаследованных от класса Component. Понимать это можно так: на элементах управления, например, JFrame, JPanel, JButton и других, есть возможность рисовать. Такие элементы обладают графическим контекстом, в этом контескте мы и рисуем. Всё, что нарисуем в контексте будет показано на элементе. Классы Graphics и Graphics2D нужны для работы с графическим контекстом. Мы должны получить экземпляр такого класса и, используя его методы, рисовать. Получить экземпляр контекста можно в методе paint:
этот метод наследуется из класса Component. Аргумент Graphics g создаётся системой, а мы берём его в готовом виде и используем для рисования. При создании элемента метод paint будет вызван автоматически.
Начнём изучать работу с графикой в Java с класса Graphics.
Graphics
Рассмотрим простой пример использования методов класса Graphics в Java:
Получаем: 
Ниже разбираются все методы, использованные в примере.
Как начертить прямую линию?
Метод drawLine класса Graphics начертит прямую линию:
здесь 20, 30 — это координаты x, y начала линии,
360, 30 — координаты конца линии.
Как задать цвет?
Метод setColor класса Graphics сделает текущим новый цвет:
Аргументы конструктора new Color(0, 0, 255) — это красный, зелёный и синий цвета соответственно (rgb).
Как задать rgb цвета? В примере задан чисто синий цвет, т.к. значения других составляющих равны нулю. Вот чисто красный цвет:
А это чисто зеленый цвет:
Значения составляющих цвета изменяются от 0 до 255.
Светло-синий цвет, который мы использовали для заливки прямоугольника:
Как задать цвет фона?
Задать цвет фона можно методом setBackground:
Как нарисовать прямоугольник?
Методом drawRect класса Graphics:
20, 40 — это координаты верхнего левого угла прямоугольника;
340 — длина;
20 — высота прямоугольника.
Как залить прямоугольник цветом?
Методом fillRect класса Graphics:
Как нарисовать прямоугольник с закругленными углами?
Методом drawRoundRect класса Graphics.
Сопряжение, т.е. закругление на углах, делается с помощью частей овала.
первые 4 аргумента как у обычного прямоугольника. Пятый аргумент — 20 — это ширина прямоугольника, в который вписана часть овала сопряжения. Шестой аргумент — 15 — это высота прямоугольника, в который вписана часть овала сопряжения.
Как нарисовать овал?
Методом drawOval класса Graphics:
Аргументы определяют прямоугольник, в который вписан овал.
Как нарисовать окружность?
Методом drawOval класса Graphics:
Аргументы определяют прямоугольник, в который вписана окружность. Здесь рисуем овал, но длина и высота описанного прямоугольника равны, что и даёт окружность.
Как нарисовать дугу?
Методом drawArc класса Graphics:
первые 4 аргумента как у обычного прямоугольника. Пятый аргумент — 0 — это угол, от которого отсчитывается угол самой дуги. 180 — это угол дуги. Углы отсчитывают от горизонтальной оси: по часовой стрелке отрицательное направление, протв — положительное. В примере 180 градусов (величина дуги) отсчитываем от горизонтальной линии.
Как нарисовать многоугольник?
Методом drawPolygon класса Graphics:
Здесь создаём объект класса Polygon. arrayX — это х-координаты вершин многоугольника, arrayY — это y-координаты вершин многоугольника, 8 — число вершин многоугольника.
Как создать объект точки?
Для этого используем класс Point:
аргументы — это x, y координаты.
Как определить, что точка принадлежит многоугольнику?
Используем метод класса Polygon contains для определения лежит ли точка в многоугольнике.
Как вывести строку?
Методом drawString класса Graphics:
строка «Yes» будет выведена от точки с координатами 50, 190.
Как задать шрифт?
Для этого используем класс Font:
где «Tahoma» — название шрифта,
Font.BOLD|Font.ITALIC — жирный шрифт с наклоном,
40 — высота шрифта.
После задания шрифта мы делаем его текущим и выводим строку этим шрифтом:
Как задать цвет текста?
Чтоб задать цвет текста создадим и установим в графический контекст новый цвет:
Здесь мы создали чисто синий цвет. А теперь выводим строку синим цветом:
Как начертить график?
Как график функции начертить? Сначала начертим координатные оси:
А теперь построить график функции можно просто. Для этого используем метод drawPolyline класса Graphics:
График строим по точкам, xArray – это x-координаты точек, yArray – y-координаты точек графика, nPoint — это число точек.
Наш график являет собой кривую намагничивания. Но почему график такой угловатый (см. картинку выше)? Если взять больше точек, то график будет более плавным.
Урок 142. Рисование. Простые фигуры, текст
На прошлом уроке разобрались, как достучаться до канвы. Теперь попробуем поработать с ней, рассмотрим методы рисования точки, линии, круга, дуги, овала, прямоугольника и текста.
Для рисования используются методы draw*. Если посмотреть их в хелпе можно обратить внимание, что одним из их параметров является объект Paint. В этом объекте задаются графические характеристики рисования. Т.е. можно считать, что это кисть, которой будут рисоваться ваши фигуры. Через него вы сообщаете канве цвет и толщину линии для рисования.
Project name: P1421_DrawingFigure
Build Target: Android 2.3.3
Application name: DrawingFigure
Package name: ru.startandroid.develop.p1421drawingfigure
Create Activity: MainActivity
Пишем MainActivity.java:
Смотрим класс DrawView. В конструкторе создаем объект Paint, которым будем рисовать фигуры, и объект Rect, который нам понадобится для рисования прямоугольника. Тут сразу обращу внимание, что создавать объекты крайне желательно за пределами метода onDraw, т.к. при частой прорисовке у вас постоянно будут создаваться новые объекты, а это является лишней нагрузкой на сборщик мусора и может замедлить работу приложения. Поэтому создаем мы объекты всего один раз, в конструкторе.
В методе onDraw мы сначала закрашиваем всю канву цветом. Есть различные реализации метода закраски:
drawRGB – на вход требует три компонента RGB (red, green, blue: смешением этих трех цветов можно получать другие цвета и их оттенки).
drawARGB – аналогичен drawRGB, но добавляет использование прозрачности (alpha). alpha + RGB = ARGB.
drawColor – на вход требует ARGB-значение в десятичной системе. Для удобства в классе Color есть несколько констант-цветов. Одну из них (Color.GREEN) мы использовали с этим методом на прошлом уроке.
Если хотите посмотреть, как выглядят различные RGB комбинации, просто загуглите фразу: «таблица цветов».
Мы в нашем приложении используем метод drawARGB и передаем ему значения: прозрачность (80), уровень красного (102), уровень зеленого (204), уровень синего (255). В итоге получаем канву, закрашенную вполне себе приятным для глаз цветом.
Далее настраиваем нашу кисть, она же Paint. Напомню, что эти настройки будут применены к рисованию фигур.
Метод setColor позволяет указать цвет (аналогично методу drawColor у канвы). Кроме этого, у Paint есть метод для указания ARGB – setARGB.
Метод setStrokeWidth позволяет указать толщину линий при рисовании. Мы укажем 10.
Начинаем рисовать объекты.
drawPoint – нарисует точку с координатами (50,50)
drawLine – нарисует линию из точки (100,100) в точку (500,50)
drawCircle – нарисует круг в точке (100,200) с радиусом 50
drawRect – нарисует прямоугольник с левым верхним углом в точке (200,150) и нижним правым углом в точке (400,200)
Далее идет другая реализация метода drawRect. Он принимает на вход объект Rect, в котором ранее были указаны координаты прямоугольника методом set. В итоге метод нарисует нам прямоугольник с верхним левым углом в точке (250,300) и нижним правым в точке (350,500).
Также есть реализация drawRect, которая на вход требует объект RectF – это аналог Rect, но значения используются не int, а float.
И, как вы наверно заметили, все эти draw* методы требуют на вход объект Paint. Это логично, т.к. канва должна знать толщину и цвет линий, которыми мы собрались рисовать.
Все сохраняем и запускаем приложение.
Видим такую картину:
Нулевая точка координат расположена в левом верхнем углу экрана и от нее идет отсчет вправо по оси X и вниз по оси Y. Видим нарисованные нами точку, линию, круг и два прямоугольника.
С этим все понятно. Давайте посмотрим другие методы рисования и будем менять некоторые используемые объекты в процессе.
Перепишем класс DrawView:
Предлагаю вам сразу запустить приложение и посмотреть результат, так мои пояснения будут проще восприниматься.
Смотрим метод onDraw. Первые три строки не менялись, повторяться не буду.
drawPoints – рисует множество точек. Их координаты заданы в виде float массива следующим образом
Есть также следующая реализация этого метода: drawPoints (float[] pts, int offset, int count, Paint paint). Она позволяет указать с какого (offset) по порядку значения в массиве начинать формировать точки и сколько (count) значений брать. Тут не запутайтесь, идет выборка именно значений массива, а не получившихся точек.
drawLines – рисует множество линий. Их координаты заданы в виде float массива следующим образом
Аналогично точкам, у этого метода также есть реализация с отступом и количеством: drawLines (float[] pts, int offset, int count, Paint paint), где offset – это отступ, указывающий с какого значения массива брать значения для формирования точек, а count – количество значений, которое необходимо взять.
Методом setColor сменим для разнообразия цвет кисти на зеленый. Тут важно понимать, что все ранее нарисованные объекты останутся красными. А вот последующие будут нарисованы уже зеленым цветом.
drawRoundRect рисует обычный прямоугольник, но со скругленными углами. В объекте rectf мы передаем данные по расположению прямоугольника. Далее два числовых параметра позволяют нам задать радиус скругления по оси X и Y. Тут не смогу объяснить словами про эти радиусы, просто позадавайте различные значения и посмотрите на результат. Чем выше значения, тем более закруглены углы.
Далее методом offset выполняем смещение в объекте rectf. На вход передаем смещение по оси X (0) и по оси Y (150). Т.е. был RectF со значениями (700,100,800,150), а стал (700 + 0, 100 + 150, 800 + 0, 150 + 150). Т.е. просто опускаем прямоугольник вниз на 150.
Эта процедура никак не влияет на фигуры, которые уже были нарисованы с использованием этого RectF объекта. Они где были, там и остаются.
drawOval рисует овал, который занимает все пространство в переданном ему прямоугольнике (rectf).
Далее снова меняем координаты объекта rectf, только на этот раз методом offsetTo. Он не добавляет координаты к имеющимся, а устанавливает новую верхнюю левую точку прямоугольника. И прямоугольник смещается к ней, сохраняя при этом свои размеры.
Далее меняем размер прямоугольника rectf методом inset. На вход метод принимает две дельты, на которые он уменьшит прямоугольник по горизонтали (0) и вертикали (-25). Уменьшит на -25 означает, увеличение на 25.
Причем, изменения размера происходят с обоих сторон. Т.е. если меняем размер горизонтально (первый параметр метода): левая и правая сторона приближаются к центру на указанное значение дельты, если дельта положительная и отдаляются от центра, если дельта отрицательная. По вертикали (второй параметр метода) – аналогично относительно центра ведут себя верхняя и нижняя стороны.
Выполнив rectf.inset(0, -25) я увеличиваю размер прямоугольника rectf по вертикали на 25 и вверх и вниз. Итого, размер по вертикали увеличивается на 50. Горизонтальный не меняется.
drawArc – рисует дугу (или можно еще сказать — часть круга), которая занимает предоставленный ей прямоугольник rectf. Далее идут два угловых параметра: начало и длина, в нашем случае это 90 и 270 градусов.
Начало – угол, с которого дуга начинает рисоваться. Отсчет ведется по часовой стрелке от точки «3 часа», если рассматривать часовой циферблат. Т.е. если от трех часов отложить угол 90 градусов, получится шесть часов. С этой точки и начнется рисоваться дуга.
Длина – это угол рисуемой дуги. Т.е. полный круг – это 360 градусов. Соответственно 270 – три четверти круга. Если мы отложим три четверти круга от 6 часов, то получим 3 часа. Такая дуга и должна получится: от шести до трех часов по часовой стрелке.
Следующий boolean параметр определяет, как будут соединены две крайние точки дуги. Т.е. если рассматривать наш пример, то это точки 6 и 3 часа. Между ними по часовой проходит дуга, но чтобы получилась замкнутая фигура, необходимо соединить между собой эти точки. Тут два варианта: от каждой точки будет проведена прямая к центру круга и в итоге через центр дуга замкнется, либо просто проводится прямая между этими точками. Соответственно если параметр true – то точки соединяются через центр, если false – то между собой. В нашем случае – это true.
Далее опускаем прямоугольник на 150 вниз. И снова рисуем такую же дугу, но теперь с параметром false. Концы дуги будут соединены между собой напрямую.
Далее устанавливаем ширину линии в 3 px. И рисуем вертикальную линию с X = 150. Она понадобится, чтобы показать выравнивание текста, который сейчас будем выводить.
Меняем цвет кисти на синий.
Методом setTextSize устанавливаем размер шрифта в 30. Т.е. данные шрифта для текста задаются в той же самой кисти, которой мы только что фигуры рисовали.
drawText рисует текст: «text left». С параметрами все просто: сам текст и координаты X и Y. Также существует несколько аналогов drawText, которые позволяют выводить не весь текст, а его часть.
Метод setTextAlign настраивает горизонтальное выравнивание текста. По умолчанию оно равно Paint.Align.LEFT. И с ним у нас вывелся первый текст. Причем текст вывелся справа. Т.е. в данном случае LEFT означает не «текст будет слева от точки», а «точка будет слева от текста». Вполне можно и запутаться.
Меняем выравнивание на Paint.Align.CENTER. Теперь выравнивание по центру. Рисуем текст «text center».
Далее снова меняем выравнивание на Paint.Align.RIGHT и рисуем текст «text right».
Мы нарисовали три текста указывая одну X-координату = 150. Но разное горизонтальное выравнивание раскидало их по разные стороны. Ранее нарисованная зеленая линия с X = 150 позволяет это четко увидеть.
И напоследок рассмотрим еще пару моментов.
Перепишем класс DrawView:
Методы getWidth и getHeight позволяют получить ширину и высоту канвы. Мы выводим эту инфу на экран методом darwText.
Далее выводим три прямоугольника с разными стилями рисования, которые указываем методом setStyle:
Paint.Style.FILL – прямоугольник закрашивается изнутри, а его грани не рисуются
Paint.Style.STROKE – рисуются только грани прямоугольника, внутри закраски нет
Paint.Style.FILL_AND_STROKE – есть и закраска внутри и грани
По умолчанию используется стиль Paint.Style.FILL.
Чтобы лучше понять все вышеизложенные аспекты, советую вам самостоятельно поэкспериментировать с ними.
На следующем уроке:
— работаем с Path
Присоединяйтесь к нам в Telegram:
— в канале StartAndroid публикуются ссылки на новые статьи с сайта startandroid.ru и интересные материалы с хабра, medium.com и т.п.
— в чатах решаем возникающие вопросы и проблемы по различным темам: Android, Kotlin, RxJava, Dagger, Тестирование
— ну и если просто хочется поговорить с коллегами по разработке, то есть чат Флудильня
— новый чат Performance для обсуждения проблем производительности и для ваших пожеланий по содержанию курса по этой теме
Java-апплет | Нарисуйте линию, используя метод drawLine ()
В этой статье будет объяснен код для рисования линии с использованием рисования в Java. Это использует метод drawLine ().
Параметры: Метод drawLine принимает четыре аргумента:
- x1 — принимает координату x первой точки.
- y1 — принимает координату y первой точки.
- x2 — Требуется координата x второй точки.
- y2 — принимает координату y второй точки
Результат: этот метод нарисует линию, начинающуюся с (x1, y1) координат до (x2, y2) координат.