GUI: Graphics and Painting
April 16, 2024
April 16, 2024 1 / 16
Recap: Components & Events
[Link] contains many JComponents that can be added to your
GUI.
Event listeners respond to user actions accordingly.
Refer to the Java API (Java SE 17) and the textbook for details!!
[Link]
javax/swing/[Link]
April 16, 2024 2 / 16
Graphics
Everything on a screen (even text!) must be drawn.
Every component is responsible for drawing itself!
If you want to draw on a component then you need to create a
subclass of it and override paintComponent().
import javax . swing . ∗ ;
import java . awt . ∗ ;
c l a s s HelloWorldDisplay extends JPanel {
public void paintComponent ( Graphics g ) {
super . paintComponent ( g ) ;
g . drawString ( " Hello World ! " , 2 0 , 3 0 ) ;
}
April 16, 2024 3 / 16
Graphics
Every GUI component has a Graphics object associated with it
(graphics context).
Keeps track of colours, fonts, ...
Has instance methods to draw shapes, text and images.
The Graphics object g is created automatically by the JVM for every
visible GUI component.
The JVM obtains the Graphics object and passes it to invoke
paintComponent()
import javax . swing . ∗ ;
import java . awt . ∗ ;
c l a s s HelloWorldDisplay extends JPanel {
public void paintComponent ( Graphics g ) {
super . paintComponent ( g ) ; / / why a r e we d o i n g t h i s ?
g . f i l l R e c t ( x , y , width , height ) ;
}
April 16, 2024 4 / 16
Repainting
paintComponent() is called when the component is first drawn, and
when the size changes.
It is called by the system: you should NOT call it directly!
Call repaint() defined in the Component class to inform the system
that the component needs to be redrawn
repaint() returns immediately and the call to paintComponent()
happens later!
Use instance variables to change what you want to display!
April 16, 2024 5 / 16
Java Coordinate System
Figure: Java Coordinate System
Each “block” is called a pixel
How can I get the width and height of a component?
i n t width = t h i s . getWidth ( ) ;
April 16, 2024 6 / 16
Java Coordinate System
Figure: Java Coordinate System
Each “block” is called a pixel
How can I get the width and height of a component?
i n t width = t h i s . getWidth ( ) ;
April 16, 2024 6 / 16
Graphics Methods
g . drawLine(x1, y1, x2, y2); line between points (x1, y1), (x2, y2)
g . drawOval(x, y, width, height); outline largest oval that fits in a box
of size width * height with top-left at (x, y)
g . drawRect(x, y, width, height); outline of rectangle of size width *
height with top-left at (x, y)
g . drawString(text, x, y); text with bottom-left at (x, y)
g . fillOval (x, y, width, height); fill largest oval that fits in a box of size
width * height with top-left at (x, y)
g . fillRect (x, y, width, height); fill rectangle of size width * height with
top-left at (x, y)
g . setColor(Color); set Graphics to paint any following shapes in the
given color
April 16, 2024 7 / 16
Drawing Strings
April 16, 2024 8 / 16
Drawing Rectagles
April 16, 2024 9 / 16
Drawing Ovals
April 16, 2024 10 / 16
Drawing Arcs
April 16, 2024 11 / 16
Drawing Polygons
April 16, 2024 12 / 16
Code Example: BallController
Figure: Ball Controller with Graphics
April 16, 2024 13 / 16
Colors & Fonts
There are different ways of specifying colors but the most common is RGB
Color myColor = new Color ( r , g , b ) ;
/ / r , g , and b a r e i n t e g e r s i n t h e range 0 t o 2 5 5 .
[Link] == [Link] == new Color(0,0,255)
Set the current color with methods defined in the Component class:
g . setColor(color);
[Link](color);
[Link](color);
Methods such as g . fillRect and g . drawString uses the current color.
In Java, you can specify the font name, style and size.
Font plainFont = new Font ( " S e r i f " , Font . PLAIN , 1 2 ) ;
// d e f a u l t s i z e i s 12
April 16, 2024 14 / 16
Graphics2D
Subclass of Graphics that allows for more complex drawing!
Allows for antialiasing and drawing thicker lines
Can use a more complex coordinates system & perform
transformations
public void paintComponent ( Graphics g ) {
super . paintComponent ( g ) ;
Graphics2D g2 ;
g2 = ( Graphics2D ) g ;
...
/ / Draw on t h e component u s i n g g2 .
}
[Link]
April 16, 2024 15 / 16
Resources
[Link]
desktop/java/awt/[Link]
[Link]
April 16, 2024 16 / 16