Bài giảng Kỹ thuật phần mềm - Chương 5: Giao diện đồ họa người dùng - Phạm Duy Trung (Phần 2)

2D Graphics
GIAO DIỆN ĐỒ HỌA 
NGƯỜI DÙNG
Từ khóa
• AWT – Abstract Windows Toolkit
• SWING
• JFC – Java Foundation Classes
• Java FX
duytrung.tcu@gmail.com
Đồ họa trong Java
• Graphics là lớp cha của mọi
ngữ cảnh đồ họa mà chương
trình có thể vẽ lên các
component trên nhiều thiết bị
khác nhau
• Một đối tượng Graphics 
chứa nhiều thông tin cần thiết
để kết xuất đồ họa trong Java:
- Đối tượng component sẽ vẽ lên
- Gốc tọa độ
- Màu, font chữ , hàm logic hiện tại 
duytrung.tcu@gmail.com
Object
Graphics
DebugGraphics Graphics2D
Graphics vs Graphics2D
• Graphics có nguồn gốc thuộc về thư viện AWT
• Graphics2D xuất hiện ở Swing
• Graphics2D kế thừa từ lớp Graphics, cung cấp nhiều tính
năng đồ họa phức tạp hơn: về hình học, chuyển đổi tọa độ, xử lý
màu sắc và văn bản
• Để tương thích với các phương thức đồ họa kiểu cũ, đối số đầu
vào vẫn là kiểu Graphics
• Ta nên cast đối số này về kiểu Graphics2D để sử dụng cả 2
duytrung.tcu@gmail.com
Vẽ lên một component
Làm thế nào để vẽ lên một component: một hình ảnh, một
đường tròn, bản đồ?
Trả lời: Hãy override phương thức painComponent
• Phương thức painComponent có trách nhiệm vẽ lên
JComponent tương ứng
• Chẳng hạn với trường hợp JLabel là vẽ nên đoạn văn bản trên
label
duytrung.tcu@gmail.com
protected void paintComponent(Graphics g)
Demo 1: Jpanel đồ họa
class SimplePainting extends JPanel {
public void paintComponent(Graphics g) {
// đảm bảo những gì thuộc về container được vẽ
super.paintComponent(g);
// cast g về Graphics2D
Graphics2D g2 = (Graphics2D) g;
// Vẽ một vài hình lên đối tượng đồ họa
g2.setColor(Color.green);
g2.fillOval(40,30,120,100);
g2.setColor(Color.red);
g2.drawRect(60,50,60,60);
}
}
duytrung.tcu@gmail.com
Hệ tọa độ đồ họa
duytrung.tcu@gmail.com
Ngữ cảnh đồ họa
Đối tượng Graphics hay Graphics2D được hiểu là một ngữ cảnh
đồ họa
Đặt màu vẽ
setColor(color)
Đặt font chữ
setFont(font)
Chọn màu sơn
Chọn kiểu bút
duytrung.tcu@gmail.com
Các phương thức đồ họa Graphics
Có thể phân ra làm 3 loại hàm chính, dựa vào vật thể đồ họa:
1. Văn bản: phương thức drawString()
2. Hình học: các phương thức drawXxx() và fillXxx(), Xxx 
có thể là Line, Rect, Oval, Arc, PolyLine, RoundRect 
• draw vẽ đường bao, fill tô đối tượng
3. Hình ảnh: phương thức drawImage()
duytrung.tcu@gmail.com
drawstring()
// Drawing (or printing) texts on the graphics screen:
drawString(String str, int xBaselineLeft, int yBaselineLeft);
duytrung.tcu@gmail.com
drawstring() – sử dụng FontMetrics
• Lớp java.awt.FontMetrics được sử dụng để đo chính xác
độ cao và độ rộng của một định dạng font cụ thể, giúp người
lập trình tính toán chính xác vị trí vẽ chuỗi trên màn hình
• Để lấy về đối tượng FontMetrics, sử dụng getFontMetrics() của
đối tượng Graphics hiện tại
duytrung.tcu@gmail.com
Vẽ đường thẳng và đa giác
// Drawing lines
drawLine(int x1, int y1, int x2, int y2);
drawPolyline(int[] xPoints, int[] yPoints, int numPoint);
// Drawing polygon
drawPolygon(int[] xPoints, int[] yPoints, int numPoint);
duytrung.tcu@gmail.com
Vẽ các hình cơ bản: hình chữ nhật
// Rectangle drawing
drawRect(int xTopLeft, int yTopLeft, int width, int height);
fillRect(int xTopLeft, int yTopLeft, int width, int height);
duytrung.tcu@gmail.com
Vẽ các hình cơ bản
drawOval(int xTopLeft, int yTopLeft, int width, int height);
drawArc(int xTopLeft, int yTopLeft, int width, int height, int
startAngle, int arcAngle);
drawRoundRect(int xTopLeft, int yTopLeft, int width, int height, int
arcWidth, int arcHeight)
duytrung.tcu@gmail.com
Vẽ ảnh – Lớp Image (java.awt.image)
• Là lớp cha của tất cả các đối tượng biểu diễn ảnh số
• Không tạo đối tượng kiểu Image vì là lớp trừu tượng
• Sử dụng lớp con của Image là BufferedImage để lưu trữ ảnh
trong bộ nhớ để xử lý
public BufferedImage(int w, int h, int type)
trong đó w là độ rộng của ảnh,
h là độ cao của ảnh,
type là một hằng số như
BufferedImage.TYPE_INT_ARGB, BufferedImage.TYPE_BYTE_GRAY
duytrung.tcu@gmail.com
Vẽ ảnh – đọc ảnh
• Import package javax.imageio để đọc ghi ảnh
• Để đọc ảnh sử dụng ImageIO.read()
• Đọc ảnh từ ổ cứng
File sourceimage = new File(“C:\\mypic.jpg");
BufferedImage image = ImageIO.read(sourceimage)
• Đọc file ảnh theo URL
URL url = new URL("");
BufferedImage image = ImageIO.read(url);
duytrung.tcu@gmail.com
Vẽ ảnh
// Drawing (or Displaying) images:
• drawImage(Image img, int xTopLeft, int yTopLeft, ImageObserver obs); // draw image with its size
• drawImage(Image img, int xTopLeft, int yTopLeft, int width, int height, ImageObserver o); // resize image on 
screen
// Clip image
• drawImage(Image img, int destX1, int destY1, int destX2, int destY2, int srcX1, int srcY1, int srcX2, int
srcY2, ImageObserver observer)
• drawImage(Image img, int destX1, int destY1, int destX2, int destY2, int srcX1, int srcY1, int srcX2, int
srcY2, Color bgcolor, ImageObserver observer)
duytrung.tcu@gmail.com
Demo 2: CAPTCHA đơn giản
CAPTCHA - Completely Automated Public Turing test to
tell Computers and Humans Apart
duytrung.tcu@gmail.com
Các phương thức đồ họa Graphics2D
duytrung.tcu@gmail.com
Lớp Shape (java.awt.geom)
• Arc.Double(x,y,w,h,start,extent,type)
• Ellipse2D.Double(x,y,w,h)
• Line2D.Double(x1,y1,x2,y2)
Line2D.Double(p1,p2)
• Rectangle2D.Double(x,y,w,h)
• RoundRectangle2D.Double(x,y,w,h,arcx,arcy)
• GeneralPath()
duytrung.tcu@gmail.com
Lớp Shape: các phương thức chung cho mọi hình
duytrung.tcu@gmail.com
Demo 3
duytrung.tcu@gmail.com
Màu (Color) – java.awt.Color
• java.awt.Color cung cấp 13 màu chuẩn thông qua các hằng số
đặt tên: Color.RED, Color.GREEN 
• Các hằng số mà tên viết thường vẫn tồn tại để tương thích với
các hàm cũ: Color.red, Color.green 
• Sử dụng toString() để in ra biểu diễn RGB của các màu này
duytrung.tcu@gmail.com
BLACK : java.awt.Color[r=0, g=0, b=0]
GRAY : java.awt.Color[r=128, g=128, b=128]
LIGHT_GRAY: java.awt.Color[r=192, g=192, b=192]
DARK_GRAY : java.awt.Color[r=64, g=64, b=64]
PINK : java.awt.Color[r=255, g=175, b=175]
ORANGE : java.awt.Color[r=255, g=200, b=0]
RED : java.awt.Color[r=255, g=0, b=0]
GREEN : java.awt.Color[r=0, g=255, b=0]
BLUE : java.awt.Color[r=0, g=0, b=255]
YELLOW : java.awt.Color[r=255, g=255, b=0]
MAGENTA : java.awt.Color[r=255, g=0, b=255]
CYAN : java.awt.Color[r=0, g=255, b=255]
WHITE : java.awt.Color[r=255, g=255, b=255]
Màu (Color) – java.awt.Color
• Tùy chỉnh màu thông qua các kênh R,G,B
Color(int r, int g, int b); // between 0 and 255
Color(float r, float g, float b); // between 0.0f and 1.0f
Color(int r, int g, int b, int alpha); // between 0 and 255
Color(float r, float g, float b, float alpha); // between 0.0f and 1.0f
// Ví dụ:
Color myColor1 = new Color(123, 111, 222);
Color myColor2 = new Color(0.5f, 0.3f, 0.1f);
Color myColor3 = new Color(0.5f, 0.3f, 0.1f, 0.5f); // semi-transparent
• Lấy về giá trị từng kênh qua getRed(), getGreen(), 
getBlue(), getAlpha()
duytrung.tcu@gmail.com
Sơn (Paint)
• GradientPaint: Phức hợp màu có sự
chuyển dịch từ từ của hai màu
public GradientPaint(float x1, float y1, Color 
color1, float x2, float y2, Color color2)
• TexturePaint: “sơn” một kiểu họa tiết
(texture) lên đối tượng
public TexturePaint(BufferedImage txtr, 
Rectangle2D anchor)
• Áp dụng lên graphics bằng phương
thức setPaint()
duytrung.tcu@gmail.com
Cọ vẽ – Stroke
• Sử dụng stroke để tùy biến kiểu, màu, độ dày đường vẽ..
• Gán cọ vẽ cho graphics thông qua phương thức setStroke()
• Tạo đối tượng cọ vẽ BasicStroke:
public BasicStroke(float width)
public BasicStroke(float width, int cap, int join)
public BasicStroke(float width, int cap, int join, float miterlimit,
float[] dash, float dash_phase)
 cap có thể là: 
 join có thể là:
duytrung.tcu@gmail.com
Font – java.awt.Font
• Đối tượng kiểu Font biểu diễn một định dạng văn bản cụ thể
public Font(String name, int style, int size);
// name: Family name "Dialog", "DialogInput", "Monospaced", "Serif", 
// or "SansSerif" or Physical font found in this GraphicsEnvironment.
// You can also use String constants Font.DIALOG, Font.DIALOG_INPUT, 
// Font.MONOSPACED,Font.SERIF, Font.SANS_SERIF (JDK 1.6)
// style: Font.PLAIN, Font.BOLD, Font.ITALIC or Font.BOLD|Font.ITALIC
// (Bit-OR)
// size: the point size of the font (in pt) (1 inch has 72 pt).
duytrung.tcu@gmail.com
Font – java.awt.Font
• Sử dụng phương thức setFont() để đặt font cho ngữ cảnh đồ họa
hiện tại khi kết xuất văn bản
Font myFont1 = new Font(Font.MONOSPACED, Font.PLAIN, 12);
Font myFont2 = new Font(Font.SERIF, Font.BOLD | Font.ITALIC, 16); // bold and italics
JButton btn = new JButton("RESET");
btn.setFont(myFont1);
JLabel lbl = new JLabel("Hello");
lbl.setFont(myFont2);
......
g.drawString("In default Font", 10, 20); // in default font
Font myFont3 = new Font(Font.SANS_SERIF, Font.ITALIC, 12);
g.setFont(myFont3);
g.drawString("Using the font set", 10, 50); // in myFont3
duytrung.tcu@gmail.com
Font – java.awt.Font
• Logical fonts: DIALOG, DIALOG_INPUT, MONOSPACED, SERIF, 
SANS_SERIF
• Physical fonts: Arial, Times New Roman, Verdana, Consolas
• Liệt kê tất cả các họ font trong máy tính:
GraphicsEnvironment env = GraphicsEnvironment.getLocalGraphicsEnvironment();
// Get all font family name in a String[]
String[] fontNames = env.getAvailableFontFamilyNames();
for (String fontName : fontNames) {
System.out.println(fontName);
}
duytrung.tcu@gmail.com
Font – java.awt.Font: deriveFont()
• Sử dụng deriveFont() để kế thừa một font đã có và thay đổi một
đặc tính nào đó như kiểu chữ, kích cỡ font
- public Font deriveFont(float size)
- public Font deriveFont(int style)
- public Font deriveFont(AffineTransform trans)
- public Font deriveFont(int style, float size)
- public Font deriveFont(int style, AffineTransform trans)
// Ví dụ:
Font font = new Font(Font.MONOSPACED, Font.BOLD, 12);
System.out.println(font);
// In ra: java.awt.Font[family=Monospaced,name=Monospaced,style=bold,size=12]
Font fontDerived = font.deriveFont(Font.PLAIN); 
System.out.println(fontDerived);
// In ra: java.awt.Font[family=Monospaced,name=Monospaced,style=plain,size=12]
duytrung.tcu@gmail.com
Anti-aliasing
• Alising là hiệu ứng bậc thang(stair-
case) hay răng cưa (jagged) khi
hiển thị đối tượng đồ họa
• Anti-aliasing là kỹ thuật để loại bỏ
hiện tượng này
• Bật anti-aliasing:
g2.setRenderingHint(RenderingHints.KEY_ANTI
ALIASING,RenderingHints.VALUE_ANTIALIAS_ON)
• Tìm hiểu về setRenderingHint()
tại đây
duytrung.tcu@gmail.com
Những điều cần tuân thủ
• Luôn override paintComponent(g) khi cần vẽ lên component
• Khi override, luôn gọi super.paintComponent(g) trước tiên
• KHÔNG BAO GIỜ gọi đến phương thức paintComponent
• Gọi phương thức repaint() khi cần vẽ lại component
• Luôn và chỉ thực hiện các thao tác đồ họa thông qua đối số g 
của phương thức paintComponent(g). Đừng tìm cách copy, 
hay thay thế đặc biệt KHÔNG TẠO MỚI một đối tượng kiểu
Graphics hay Graphics2D
duytrung.tcu@gmail.com
* Khi đã master Java rồi thì bạn có thể làm khác đi, chắc chắn là như vậy, còn hiện tại thì hãy ghi nhớ và làm theo!
Demo 4
Chương trình vẽ một đường thẳng, cho phép người sử dụng điều
khiển đường thẳng qua lại trái phải qua bàn phím hoặc nút bấm
trên giao diện
duytrung.tcu@gmail.com
Demo 4
Chương trình vẽ một đường thẳng, cho phép người sử dụng điều
khiển đường thẳng qua lại trái phải qua bàn phím hoặc nút bấm
trên giao diện
duytrung.tcu@gmail.com
JPanel
Jpanel đồ họa
400
200
Bài tập về nhà
1. Hoàn thiện Demo 2 bằng việc thêm vào tính năng nhập chuỗi 
ký tự và kiểm tra có đúng với chuỗi trong ảnh hay không
2. Thay đổi Demo 4 thành chương trình như di chuyển trái bóng 
theo bốn hướng bằng phím mũi tên hoặc ‘WASD’ hoặc bấm 
nút
duytrung.tcu@gmail.com
GradientPaint
TexturePaint
Bài tập về nhà
3. Chương trình hiển thị ảnh đơn giản
duytrung.tcu@gmail.com
Bài tập thực hành: A Bouncing Ball
Một chương trình tạo ra hình động quả bóng đập qua đập lại trên 
màn hình
duytrung.tcu@gmail.com
duytrung.tcu@gmail.com