SWING 3 painting (lập TRÌNH NÂNG CAO SLIDE)

PHẦN 2 - SWING

PAINTING

MOUSE AND KEYBOARD EVENTS


How Painting Happens


When a Swing GUI needs to paint itself — whether for the first time, in response to becoming unhidden, or because it
needs to reflect a change in the program's state — it starts with the highest component that needs to be repainted and
works its way down the containment hierarchy. This process is orchestrated by the AWT painting system, and made more
efficient and smooth by the Swing repaint manager.



Swing components generally repaint themselves whenever necessary. When you invoke the setText method on a
component, for example, the component automatically repaints itself and, if appropriate, resizes itself. Behind the scenes,
when a visible property changes the repaint method is invoked on the component to request that it be scheduled for
painting. If the component's size or position also needs to change, a call to revalidate precedes the one to repaint.
The repaint and revalidate methods are thread safe — they can be invoked from any thread.

Khoa CNTT – ĐH Nông Lâm TP. HCM 2014

2/55


The Swing Painting Methods
 paintComponent — The main method for painting. By default, it first paints the background if the
component is opaque. Then it performs any custom painting.

 paintBorder — Tells the component's border (if any) to paint. Do not invoke or override this
method.

 paintChildren — Tells any components contained by this component to paint themselves. Do not
invoke or override this method.

Khoa CNTT – ĐH Nông Lâm TP. HCM 2014

3/55


Custom Painting


Before you implement a component that performs custom painting, first make sure that you really need to do so.
You might be able to use the text and image capabilities of labels , buttons , or text components instead. And
remember, you can use borders to customize the outside edges of a component.



If you really need to perform custom painting, then you need to decide which superclass to use. We recommend that
you extend either JPanel or a more specialized Swing component class.



When implementing custom painting code, keep two things in mind:
 Your custom painting code belongs in a method named paintComponent.
 You can -- and probably should -- use a border to paint the outside edges of your component.

Khoa CNTT – ĐH Nông Lâm TP. HCM 2014

4/55


An Example of Custom Painting
class ImagePanel extends JPanel {
... public void paintComponent(Graphics g) {
super.paintComponent(g); //paint background
//Draw image at its natural size first.
g.drawImage(image, 0, 0, this); //85x62 image
//Now draw the image scaled.
g.drawImage(image, 90, 0, 300, 62, this);
}
}

Khoa CNTT – ĐH Nông Lâm TP. HCM 2014

5/55


The rules for the custom painting:

 The painting code does something that no standard Swing component does. If we just wanted to display
the figure once, at its natural size, we would have used a JLabel object instead of the custom
component.

 The custom component is a JPanel subclass. This is a common superclass for custom components.
 All the custom painting code is in a method called paintComponent.
 Before performing any custom painting, the component paints its background by invoking

super.paintComponent.

Khoa CNTT – ĐH Nông Lâm TP. HCM 2014

6/55


The Coordinate System

Khoa CNTT – ĐH Nông Lâm TP. HCM 2014

7/55


The Coordinate System

 When painting a component, you must take into account not only the component's
size but also the size of the component's border, if any. For example, a border that
paints a one-pixel line around a component changes the top leftmost corner from
(0,0) to (1,1) and reduces the width and the height of the painting area by two pixels
each (one pixel per side)

Khoa CNTT – ĐH Nông Lâm TP. HCM 2014

8/55


The Coordinate System
 You get the width and height of a component using its getWidth and getHeight methods. To
determine the border size, use the getInsets method. Here is some code that a component might use

to determine the width and height available for custom painting:
public void paintComponent(Graphics g) {
...
Insets insets = getInsets();
int currentWidth = getWidth() - insets.left - insets.right;
int currentHeight = getHeight()-insets.top-insets.bottom;

... .../* First painting occurs at (x,y), where x is at least insets.left, and y is at least insets.height. */...
}

Khoa CNTT – ĐH Nông Lâm TP. HCM 2014

9/55


Arguments to the repaint Method
 Remember that calling a component's repaint method requests that the component be scheduled to paint
itself. When the painting system is unable to keep up with the pace of repaint requests, it might combine
multiple requests into a single paint request to the component. The repaint method has two useful forms:

 void repaint()
 Requests that the entire component be repainted.

 void repaint(int, int, int, int)
 Requests that only the specified part of the component be repainted. The arguments specify first the X and

Y coordinates at the upper left of the area to be repainted, and then the area's width and height.

Khoa CNTT – ĐH Nông Lâm TP. HCM 2014

10/55


Painting Shapes
 The Graphics class defines methods for painting the following kinds of shapes:
 Lines (drawLine)
 Rectangles (drawRect and fillRect)
 Raised or lowered rectangles (draw3DRect and fill3DRect)
 Round-edged rectangles (drawRoundRect and fillRoundRect)
 Ovals (drawOval and fillOval)
 Arcs (drawArc and fillArc)
 Polygons (drawPolygon, drawPolyline, and fillPolygon)

Khoa CNTT – ĐH Nông Lâm TP. HCM 2014

11/55


Shape Sample

Khoa CNTT – ĐH Nông Lâm TP. HCM 2014

12/55


Class Graphic
 public abstract Color getColor()
Gets this graphics context's current color.
Returns:this graphics context's current color.

 public abstract void setColor(Color c)
Sets this graphics context's current color to the specified color. All subsequent graphics operations using
this graphics context use this specified color.
Parameters:c - the new rendering color.

 getFont public abstract Font getFont()
Gets the current font. Returns:this graphics context's current font.

 public abstract void setFont(Font font)
Sets this graphics context's font to the specified font. All subsequent text operations using this graphics
context use this font. Parameters:font - the font.

Khoa CNTT – ĐH Nông Lâm TP. HCM 2014

13/55


Class Graphic
 public abstract void copyArea(int x, int y, int width, int height,
int dx, int dy)
Copies an area of the component by a distance specified by dx and dy. From the point specified by x
and y, this method copies downwards and to the right.

 Parameters:
x - the x coordinate of the source rectangle.
y - the y coordinate of the source rectangle.
width - the width of the source rectangle.
height - the height of the source rectangle.
dx - the horizontal distance to copy the pixels.
dy - the vertical distance to copy the pixels.

Khoa CNTT – ĐH Nông Lâm TP. HCM 2014

14/55


Class Graphic
 public abstract void drawLine(int x1, int y1, int x2, int y2)
Draws a line, using the current color, between the points (x1, y1) and (x2, y2) in this graphics context's
coordinate system.

 fillRect public abstract void fillRect(int x, int y, int width,

int

height)
Fills the specified rectangle. The left and right edges of the rectangle are at x and x + width - 1. The top and
bottom edges are at y and y + height - 1. The resulting rectangle covers an area width pixels wide by height
pixels tall. The rectangle is filled using the graphics context's current color.

 public void drawRect(int x, int y, int width, int height)
Draws the outline of the specified rectangle. The left and right edges of the rectangle are at x and x + width. The
top and bottom edges are at y and y + height. The rectangle is drawn using the graphics context's current color.

Khoa CNTT – ĐH Nông Lâm TP. HCM 2014

15/55


Class Graphic



public abstract void clearRect(int x, int y, int width,int height)
Clears the specified rectangle by filling it with the background color of the current drawing surface. This operation does
not use the current paint mode.



public abstract void drawRoundRect(int x, int y,

int width,int height,int

arcWidth, int arcHeight)
Draws an outlined round-cornered rectangle using this graphics context's current color. The left and right edges of the
rectangle are at x and x + width, respectively. The top and bottom edges of the rectangle are at y and y + height.
Parameters:
x - the x coordinate of the rectangle to be drawn.
y - the y coordinate of the rectangle to be drawn.
width - the width of the rectangle to be drawn.
height - the height of the rectangle to be drawn.
arcWidth - the horizontal diameter of the arc at the four corners.
arcHeight - the vertical diameter of the arc at the four corners.

Khoa CNTT – ĐH Nông Lâm TP. HCM 2014

16/55


Class Graphic


public abstract void fillRoundRect(int x,

int y, int width, int height, int

arcWidth, int arcHeight)
Fills the specified rounded corner rectangle with the current color. The left and right edges of the rectangle are at x and x
+ width - 1, respectively. The top and bottom edges of the rectangle are at y and y + height – 1



public void draw3DRect(int x, int y,

int width, int height,boolean raised)

Draws a 3-D highlighted outline of the specified rectangle. The edges of the rectangle are highlighted so that they appear
to be beveled and lit from the upper left corner. The colors used for the highlighting effect are determined based on the
current color. The resulting rectangle covers an area that is width + 1 pixels wide by height + 1 pixels tall.



public void fill3DRect(int x, int y,

int width, int height, boolean raised)

Khoa CNTT – ĐH Nông Lâm TP. HCM 2014

17/55

Class Graphic
 public abstract void drawOval(int x, int y, int width, int height)
Draws the outline of an oval. The result is a circle or ellipse that fits within the rectangle specified by the x, y,
width, and height arguments. The oval covers an area that is width + 1 pixels wide and height + 1 pixels tall.
Parameters:
x - the x coordinate of the upper left corner of the oval to be drawn.
y - the y coordinate of the upper left corner of the oval to be drawn.
width - the width of the oval to be drawn.
height - the height of the oval to be drawn.

 public abstract void fillOval(int x, int y, int width, int height)
Fills an oval bounded by the specified rectangle with the current color.

Khoa CNTT – ĐH Nông Lâm TP. HCM 2014

18/55


Class Graphic
 public abstract void drawArc(int x, int y,

int width, int height,

int startAngle, int arcAngle)
Parameters:
x - the x coordinate of the upper-left corner of the arc to be drawn.
y - the y coordinate of the upper-left corner of the arc to be drawn.
width - the width of the arc to be drawn.
height - the height of the arc to be drawn.
startAngle - the beginning angle.

arcAngle - the angular extent of the arc, relative to the start angle.

 public abstract void fillArc(int x, int y,

int width, int height,

int startAngle, int arcAngle)

Khoa CNTT – ĐH Nông Lâm TP. HCM 2014

19/55


Class Graphic


public abstract void drawPolyline(int[] xPoints, int[] yPoints,int nPoints)
Draws a sequence of connected lines defined by arrays of x and y coordinates. Each pair of (x, y) coordinates defines a point.
The figure is not closed if the first point differs from the last point.
Parameters:
xPoints - an array of x points
yPoints - an array of y points
nPoints - the total number of points



public abstract void drawPolygon(int[] xPoints, int[] yPoints,int nPoints)



public abstract void fillPolygon(int[] xPoints, int[] yPoints,int nPoints)



public abstract void drawString(String st,int x,int y)
Draws the text given by the specified string, using this graphics context's current font and color. The baseline of the leftmost
character is at position (x, y) in this graphics context's coordinate system.

Khoa CNTT – ĐH Nông Lâm TP. HCM 2014

20/55


Class Graphic


public abstract boolean drawImage(Image img, int x,int y, ImageObserver
observer)
Draws as much of the specified image as is currently available. The image is drawn with its top-left corner at (x, y) in
this graphics context's coordinate space. If the image has not yet been completely loaded, then drawImage returns false.
As more of the image becomes available, the process that draws the image notifies the specified image observer.
Parameters:
img - the specified image to be drawn.
x - the x coordinate.
y - the y coordinate.
observer - object to be notified as more of the image is converted.



public abstract boolean drawImage(Image img, int x, int y,

int width, int

height, ImageObserver observer)

Khoa CNTT – ĐH Nông Lâm TP. HCM 2014

21/55


ShapeTest

Khoa CNTT – ĐH Nông Lâm TP. HCM 2014

22/55


ShapeTest
public class ShapesFrame extends JFrame {
JMyPanel pane;
Point point = new Point(0,0);
ShapesFrame(){
setTitle("Test Shapes"); setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE)
setLocationRelativeTo(null);
setSize(400,300);
pane = new JMyPanel();
getContentPane().add(pane);
setVisible(true);
}

Khoa CNTT – ĐH Nông Lâm TP. HCM 2014

23/55


ShapeTest
private class JMyPanel extends JPanel{
public void paintComponent(Graphics g){
setBackground(Color.white);
super.paintComponent(g);
point.setLocation(40,30);
g.setColor(Color.black);
g.drawRect(point.x,point.y,100,60);
g.setColor(Color.red);
g.drawLine(0,0,getWidth(),

getHeight());

}
}
}

Khoa CNTT – ĐH Nông Lâm TP. HCM 2014

24/55


Mouse Events


1.
2.
3.
.

When the user clicks a mouse button, three listener methods are called:
mousePressed when the mouse is first pressed,
mouseReleased when the mouse is released, and, finally,
mouseClicked.
If you are only interested in complete clicks, you can ignore the first two methods. By using the
getX and getY methods on the MouseEvent argument, you can obtain the x- and y-coordinates of
the mouse pointer when the mouse was clicked. If you want to distinguish between single, double and
triple (!) clicks, use the getClickCount method.

Khoa CNTT – ĐH Nông Lâm TP. HCM 2014

25/55