Графіка в Java

Графічний контекст компонентів

Графіку в Java обслуговують класи Graphics і Graphics2D.

Робота з графікою здійснюється в графічному контексті елементів, успадкованих від класу Component. Розуміти це можна так: на елементах управління, наприклад, JFrame, JPanel, JButton та інших, є можливість малювати. Такі елементи мають графічним контекстом, в цьому контескте ми і малюємо. Все, що намалюємо в контексті буде показано на елементі. Класи Graphics і Graphics2D потрібні для роботи з графічним контекстом. Ми повинні отримати примірник такого класу і, використовуючи її методи, малювати. Отримати примірник контексту можна в методі paint:

public void paint(Graphics g);

цей метод успадковується з класу компонента. Аргумент Graphics g створюється системою, а ми беремо його у готовому вигляді і використовуємо для малювання. При створенні елемента метод paint буде викликаний автоматично.

Почнемо вивчати роботу з графікою в Java з класу Graphics.

Graphics

Розглянемо простий приклад використання методів класу Graphics у Java:

Отримуємо:
Графіка в Java

Нижче розбираються всі методи, використані в прикладі.

Вгору

Як накреслити пряму лінію?

Метод drawLine класу Graphics накреслить пряму лінію:

g.drawLine(20, 30, 360, 30);

тут 20, 30 - це координати x, y початку лінії,
360, 30 - координати кінця лінії.

Як задати колір?

Метод setColor класу Graphics зробить поточним новий колір:

// Запам'ятовуємо вихідний колір;
Color oldColor = g.getColor();
// Створюємо синій колір;
Color newColor = new Color(0, 0, 255);
// Встановлюємо синій колір;
g.setColor(newColor);
// Креслимо лінію синім кольором;
g.drawLine(20, 30, 360, 30);
// Відновлюємо вихідний колір;
g.setColor(oldColor);

Аргументи конструктора new Color(0, 0, 255) - це червоний, зелений та синій (rgb).

Як задати rgb кольору? У прикладі зі чисто синій колір, т. к. значення інших складових дорівнюють нулю. Ось чисто червоний колір:

Color newColor = new Color(255, 0, 0);

А це чисто зелений колір:

Color newColor = new Color(0, 255, 0);

Значення складових кольору змінюються від 0 до 255.

Світло-синій колір, який ми використовували для заливки прямокутника:

newColor = new Color(0, 215, 255);
Вгору

Як задати колір фону?

Задати колір фону можна методом setBackground:

mainFrame.setBackground(Color.white);

Як намалювати прямокутник?

Методом drawRect класу Graphics:

g.drawRect(20, 40, 340, 20);

20, 40 - це координати верхнього лівого кута прямокутника;
340 - довжина;
20 - висота прямокутника.

Як залити прямокутник кольором?

Методом fillRect класу Graphics:

newColor = new Color(0, 215, 255);
g.setColor(newColor);
g.fillRect(21, 41, 339, 19);
g.setColor(oldColor);

Як намалювати прямокутник із закругленими кутами?

Методом drawRoundRect класу Graphics.

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

g.drawRoundRect(20, 70, 340, 30, 20, 15);

перші 4 аргументу як у звичайного прямокутника. П'ятий аргумент - 20 - це ширина прямокутника, в який вписана частину овалу сполучення. Шостий аргумент - 15 - це висота прямокутника, в який вписана частину овалу сполучення.

Вгору

Як намалювати овал?

Методом drawOval класу Graphics:

g.drawOval(20, 110, 150, 60);

Аргументи визначають прямокутник, в який вписано конус.

Як намалювати коло?

Методом drawOval класу Graphics:

g.drawOval(200, 110, 60, 60);

Аргументи визначають прямокутник, у який вписана окружність. Тут малюємо овал, але довжина і висота описаного прямокутника рівні, що і дає окружність.

Як намалювати дугу?

Методом drawArc класу Graphics:

g.drawArc(280, 110, 80, 60, 0, 180);

перші 4 аргументу як у звичайного прямокутника. П'ятий аргумент - 0 - це кут, від якого відраховується кут самої дуги. 180 - це кут дуги. Кути відраховують від горизонтальної осі: за годинниковою стрілкою негативне напрямок, протв - позитивне. У прикладі 180 градусів (величина дуги) відлічуємо від горизонтальної лінії.

Як намалювати багатокутник?

Методом drawPolygon класу Graphics:

int[] arrayX= {20, 100, 100, 250, 250, 20, 20, 50};
int[] arrayY= {180, 180, 200, 200, 220, 200, 200, 190};
Polygon poly = new Polygon(arrayX, arrayY, 8);
g.drawPolygon(poly);

Тут створюємо об'єкт класу Polygon. arrayX - це х-координати вершин багатокутника, arrayY - це y-координати вершин багатокутника, 8 - кількість вершин багатокутника.

Вгору

Як створити об'єкт точки?

Для цього використовуємо клас Point:

Point aPoint = new Point(50, 190);

аргументи - це x, y координати.

Як визначити, що точка належить багатокутнику?

Polygon poly = new Polygon(arrayX, arrayY, 8);
g.drawPolygon(poly);
Point aPoint = new Point(50, 190);
if(poly.contains(aPoint))
{
    g.drawString("Yes", 50, 190);
}

Використовуємо метод класу Polygon contains для визначення лежить точка в багатокутнику.

Як вивести рядок?

Методом drawString класу Graphics:

g.drawString("Yes", 50, 190);

рядок "Yes" буде виведена від точки з координатами 50, 190.

Вгору

Як встановити шрифт?

Для цього використовуємо клас Font:

Font font = new Font("Tahoma", Font.BOLD|Font.ITALIC, 40);

де "Tahoma" - назва шрифту,
Font.BOLD|Font.ITALIC - жирний шрифт з нахилом,
40 - висота шрифту.

Після завдання шрифту ми робимо його поточним і виводимо рядок цим шрифтом:

g.setFont(font);
g.drawString("SBP", 270, 220);

Як вибрати колір для тексту?

Щоб задати колір тексту створимо і встановимо в графічний контекст новий колір:

newColor = new Color(0, 0, 255);
g.setColor(newColor);

Тут ми створили чисто синій колір. А тепер виводимо рядок синім кольором:

g.drawString("SBP", 270, 220);

Як накреслити графік?

Як графік функції накреслити? Спочатку накреслимо координатні осі:

// Draw axes;
g.drawLine(20, 220, 20, 350);
g.drawLine(20, 350, 360, 350);
g.drawString("Y", 25, 230);
g.drawString("X", 350, 346);

А тепер побудувати графік функції можна просто. Для цього використовуємо метод drawPolyline класу Graphics:

// Draw a curve;
int[] xArray= {20, 40, 60, 80, 100, 120, 130, 140, 280, 332};
int[] yArray= {350, 345, 340, 310, 290, 280, 275, 273, 271, 269};
int nPoint = 10;
g.setColor(newColor);
g.drawPolyline(xArray, yArray, nPoint);
g.setColor(oldColor);
g.drawString("y = f(x)", 180, 267);

Графік будуємо по точках, xArray - це x-координати точок, yArray - y-координати точок графіка, nPoint - це число точок.

Наш графік являє собою криву намагнічування. Але чому графік такий незграбний (див. зображення вище)? Якщо взяти більше точок, то графік буде більш плавним.