Do hoa awt java 2d trong Java

Học viện công nghệ bưu chính viễn thông
C08CNTT
2

§å häa AWT trong java

Tháng 3/2010


Nội dung:


Lớp Graphics








Vẽ hình học
Vẽ chữ
Vẽ ảnh
Chế độ vẽ
Lớp Color
Vùng cắt
Các lớp tiện ích khác



Lớp Graphics 2D <Java1.4>







Vẽ hình học
Nét vẽ
Chế độ vẽ
Tô loang
Vẽ ảnh trong suốt
Biến đổi tọa độ trong Java2D


Lớp Graphics


Khái quát:




Khi muốn vẽ 1 hình gì chúng ta dùng đến đối tượng
Graphics, đối tượng Graphics như cây cọ phết lên Frame,
Canvas hay Applet.
Muốn vẽ hình thường chúng ta phải cài đặt phương thức:
public void paint(Graphics g){}



Phương thức: repaint() dùng để vẽ lại hình ảnh (thực chất
là repaint() gọi đến phương thức update() sau đó gọi đến
phương thức paint())



Nếu chỉ muốn vẽ lại 1 phần ta sử dụng phương thức:
repaint ( int x, int y,i nt width, int height )


Lớp Graphics
1.Vẽ hình học:


Gồm:







Vẽ
Vẽ
Vẽ
Vẽ
Vẽ
Vẽ

hình chữ nhật
Elip, vòng tròn
đa giác
đường thẳng
hình chữ nhật tròn góc
cung tròn


Lớp Graphics
1.Vẽ hình học:
X



Giới thiệu hệ tọa độ:
Vẽ hình chữ nhật:

(0,0)

(800,0)

Màn hình
drawRect(int x, int y,int width,int height)
fillRect(int x, int y,int width,int height)
(0,600)
(800,600)
Y
clearRect(int x, int y,int width,int height)
draw (Widt

(x,y)

h)

fill

(Height)

VD:
public void paint (Graphics g)
{
g. drawRect(20, 30,50,50);
}


Lớp Graphics
1.Vẽ hình học:


Vẽ đường thẳng:

(x1,y1)

drawLine(int x1, int y1, int x2, int y2)


Vẽ vòng tròn, elip:
drawOval (int x, int y, int width, int height)
fillOval (int x, int y, int width, int height)
+ Đường tròn: width= height

(x,y)

(Height)

draw

(Width)

fill

(x2,y2)


Lớp Graphics
1.Vẽ hình học:


Vẽ hình chữ nhật tròn góc:
drawRoundRect (int x, int y, int width, int height, int arcWidth, int
arcHeight)
fillRoundRect (int x, int y, int width, int height, int arcWidth, int
arcHeight)
(arcHeight)

(arcWidth)


Lớp Graphics
1.Vẽ hình học:





Vẽ đa giác:
drawPolygon ( int[] x, int[] y, int numberPoint )
drawPolygon (Polygon p)
Lớp polygon:
- Cung cấp khả năng tạo Polygon yển chuyển hơn.
Đa giác được xem như 1 đối tượng.
- Có thể thêm đỉnh nhờ phương thức addPoint.
Polygon pg=new Polygon();
pg.addPoint(2,50);
g.drawPolygon(pg);

Phương thức contains(int x,int y) để kiểm tra 1 điểm có nắm trong đa
giác không.
-Phương thức getBounds() cho biết phạm vi tối đa ma các đỉnh chiếm giữ
-

(trả về kiểu Rectangle)


Lớp Graphics
1.Vẽ hình học:


Vẽ cung tròn:
drawArc( int x, int y, int width, int height, int startAngle, int arcAngle);
fillArc( int x, int y, int width, int height, int startAngle, int arcAngle);

(x,y)

(width)

Fill Arc

Draw Arc

arcAngle
startAngle
(height)


Lớp Graphics
2.Vẽ chữ:


Vẽ mảng ký tự <Char>:
drawChars ( char[] Data, int Offset, int Length, int x, int
y)

Data: Mảng ký tự cần vẽ.
Offset: Ký tự bắt đầu.
Length: Số ký tự cần vẽ.
char[] A={ ‘H’ , ‘e’ , ‘l’ , 'l‘ , ‘o’ , ‘!’ };
g.drawChars (A , 0 , A.length , 50 , 50);
•
Cách khác:
drawBytes( byte[] Data, int Offset, int Length, int
x, int y)

Data: Mảng byte (biểu diễn mã ASCII).
VD:
byte[] B={ 65, 66, 67, 68, 69 }; // “ A , B , C , D , E ”


Lớp Graphics
2.Vẽ chữ:
Vẽ chuỗi ký tự <String>:
drawString (String s, int x, int y)
VD: g.drawString (“Hello!” , 50 , 50);




Thay đổi Font chữ:

setFont(Font f);
•
Lớp Font:
- Khởi tạo Font: Font( String fontname, int style, int fontsize)
VD: Font f= new Font(“ .VnArial ”, Font.BOLD + Font.ITALIC , 20 )
- Một số phương thức của lớp Font: getName, getStyle, getSize,
isBold, isItalic, isPlain…
- Lấy tất cả font trong hệ thống: Dùng phương thức getFontList của đối
tượng Toolkit.
VD:
String[] FL=getToolkit(). getFontList();


Lớp Graphics

3.Chế độ vẽ:



Đối tượng Graphics có 2 chế độ vẽ: paint, XOR
Chế độ paint: Là chế độ mặc định ta vẫn thấy.


Ta dùng phương thức: setPaintMode(); của đối tượng Graphics để
gọi chế độ này.

Chế độ XOR: setXORMode(Color c);
VD:


Font f= new Font(".VnArial",Font.BOLD+Font.ITALIC,40);
g.setFont(f);
g.setColor(Color.blue);
(0,0,255)
g.drawString("Hello ! ",50,60);
(blue)
g.setXORMode(Color.green);
g.setColor(Color.black);
(blue) XOR (255,0,255) (0,255,255)
=
g.fillRect(50,40,90,90);
(black) XOR (green) =(255,0,255)
(0,0,0)
(0,255,0)

Lớp Graphics
4.Vẽ ảnh:


Lớp Graphics cung cấp phương thức drawImage() để vẽ ảnh đơn giản:

drawImage(Image img, int x, int y, ImageObserver Ob)
drawImage(Image img, int x, int y, Color bgcolor, ImageObserver Ob)
drawImage(Image img, int x, int y, int width, int height, ImageObserver Ob)
drawImage(Image img, int x, int y, int width, int height, Color bgcolor,
ImageObserver Ob)
+ bgColor: Màu nền đối với ảnh trong suốt:

+ VD:

Image im=getToolkit().getImage("Untitled-1.png");
g.drawImage(im,50,50,im.getHeight(this),im.getWidth(this
), Color.darkGray,this);
+ ImageObserver Ob: Đối
tượng chịu trách nhiệm kiểm
tra xem ảnh đã sắn sàng để
vẽ hay chưa. Thông thường là
this.(this là thân Applet hay
Frame)


Lớp Graphics
5.Lớp Color:




1 điểm ảnh trên màn hình đều được kết hợp bởi 3 màu cơ bản: R,G,B - (Red,
Green, Blue). R,G,B đều có giá trị từ 0-255 (1byte) Tổng cộng là 3 byte.
Khởi tạo 1 màu:
+ Theo giá trị R,G,B:
Color cl=new Color ( int Red, int Green, int Blue )
VD: Màu xanh lá cây: Color gr=new Color ( 0, 255, 0);
+ Theo giá trị % (có giá trị từ 0-1):
Color cl=new Color ( float Red, float Green, float Blue )
VD: Green: Color cl=new Color (0.0, 1.0, 0.0 )
+ Theo giá trị hexa (mã màu):
VD: Color a=new Color(0xffaf00);
ff=15*161+15*160=255

0xf

Alpha R

0xaf

0x00

G

B


Lớp Graphics

5.Lớp Color (tt):
+ Khởi tạo màu theo màu cơ bản của lớp Color:
Color a=new Color(Color. black);
Hoặc: Color a=Color. black;
- Một số màu cơ bản : black, blue, cyan, darkGray, gray, green,
lightGray, magetan, orange, pink, red, white, yellow.


Một số phương thức của lớp Color:





int
int
int
int

getRed: Trả về giá trị R (int).
getGreen: Trả về giá trị G (int).
getBlue: Trả về giá trị B (int).
getAlpha: Trả về giá trị Alpha (int).


Lớp Graphics
6.Vùng cắt (Clipping):
Đối tượng Graphics cho phép ta cài đặt 1 vùng cắt bằng phương thức
clipRect sau:
clipRect(int x, int y, int width, int height)

VD:
public void paint(Graphics g)
{
g.drawRect(40,50,80,90);
g.clipRect(40,50,80,90);
g.setColor(Color.blue);
g.fillOval(30,40,90,90);
}



Lớp Graphics 2D


Khái quát:


Graphics2D chứa 1 tập phong phú các hàm và phương
thức vẽ đồ họa hơn hẳn lớp Graphics. Chẳng hạn như:
Graphics2D cho phép quy định chiều rộng bút vẽ, kiểu
nét vẽ, các phương thức xử lý hình, vẽ và tô màu loang,
cho phép sử dụng Font chữ của máy cục bộ, hỗ trợ hệ
tọa độ động, và 1 số thao tác biến đổi toạ độ. Tuy nhiên
để duy trì tính tương thích với Java 1.1, kiểu khai báo đối
số của phương thức paintComponent vẫn sẽ là Graphics
công khai là đồ thị. Vì vậy bạn phải ép kiểu đối số của
phương thức paintComponent thành Graphics2D trước
khi sử dụng nó:

public void paint(Graphics g)

{
Graphics2D g2=(Graphics2D)g;


Lớp Graphics 2D


Các tính năng mới của Graphics2D:
 Đa dạng trong màu tô và mẫu tô: tô loang (Gradient),
tô bằng mẫu ảnh (pattern), tô màu ảnh trong suốt
(Transparent).
 Sử dụng font đặc thù theo từng hệ điều hành.
 Thay đổi được độ dày của nét bút vẽ. Các nét vẽ có thể
dùng mẫu, cho phép xử lý các nét vẽ gấp khúc theo
nhiều cách.
 Các phép biến đổi tọa độ.
 Hình vẽ (Shape) có thể là 1 đối tượng tự vẽ.


Lớp Graphics 2D
1.Các dạng hình học trong Java2D


Các lớp đối tượng hình học của Java2D (trong gói

Line2D.Double //Đường thẳng
 java.awt.geom):
Arc2D.Double
//Cung tròn


Line2D.Float

Arc2D.Float

Polygon
//Đa giác

Area
//Vùng

QuadCurve2D.Double //Cung góc

CubicCurve2D.Double //Khối





CubicCurve2D.Float
Ellipse2D.Double//Hình tròn, elip
Ellipse2D.Float
GenrralPath
//Vẽ cung

tư




QuadCurve2D.Float

Rectangle2D.Double //Hình chữ
nhật




Rectangle2D.Float
RoundRectangle2D.Double
//Hình CN



RoundRectangle2D.Float Góc tròn


Lớp Graphics 2D
1.Các dạng hình học trong Java2D (tt)
Line2D.Double:Khởi tạo: setLine( int x1, int y1, int x2, int y2 )
Arc2D.Double :Khởi tạo: setArc( x, y, w, h, angStart, angNum, closure)
Ellipse2D.Double: Khởi tạo: setFrame( x, y, w, h);
VD:
public void paint(Graphics g)
{
Graphics2D g2=(Graphics2D)g; // Ep kieu cho doi tuong
Graphics
Line2D.Double a=new Line2D.Double();
a.setLine(100,150,150,150); // Khoi tao Line
Arc2D.Double b=new Arc2D.Double();
b.setArc(50,50,90,90,20,90,2); // Khoi tao cung tron
Ellipse2D.Double c=new Ellipse2D.Double();

c.setFrame(20,20,80,80);
// Khoi tao Elip
g2.setColor(Color.orange); // Doi mau
g2.fill(b);
// Ve cung tron
g2.draw(a); // Ve Line
g2.draw(c); //Xem thu vung cat
g2.clip(c); // Cat bang hinh c
g2.setColor(Color.magenta);// Doi mau
g2.fillRect(10,50,50,50);
// Ve hinh CN
}


Lớp Graphics 2D
1.Các dạng hình học trong Java2D (tt)


Dạng hình học đặc biệt:
GenrralPath:Vẽ cung
GeneralPath p = new GeneralPath(GeneralPath.WIND_EVEN_ODD);
(x3,y3)
Curve:
p.moveTo(x1,y1);
(x2,y2)
p.curveTo(x2,y2, x3,y3, x4,y4);
Quad:
p.moveTo(x1,y1);
p.quadTo(x2, y2, x3,y3);
(Curve)

(x1,y1)

QuadCurve2D: Vẽ cung (Tương tự Quad
(x2,y2)
của GenrralPath)


(x4,y4)

Khởi tạo:
public void setCurve(x1, y1, x2, y2, x3, y4)
Hoặc: public void setCurve(Point p1, Point p2, Point p3)


CubicCurve2D: (Tương tự Curve của GenrralPath)
(x1,y1)

(Quad)

(x3,y3)


Lớp Graphics 2D
2.Thay đổi nét vẽ:
Các phương thức draw.. của đối tượng Graphics đều có nét vẽ là 1
pixel.

Graphics2D có khả năng thay đổi độ dày của nét vẽ, đồng thời cũng
có thể thay đổi được kiểu của nét vẽ.
Thay đổi độ dày của nét vẽ:





Ta dùng phương thức setStroke(Stroke s) : Như vậy ta phải tạo 1 đối
tượng có cài đặt giao diện Stroke để truyền, lớp BasicStroke là lớp
duy nhất cài giao diện đó:

BasicStroke(foat penWidth);

Trước:

VD:

public void paint(Graphics g)
{
Graphics2D g2=(Graphics2D)g;
Sau:
g2.setStroke(new BasicStroke(3));
g2.drawLine(30,40,60,90);
}


Lớp Graphics 2D
2.Thay đổi nét vẽ:
Thay đổi kiểu của nét vẽ:

Các phương thức khởi tạo nét vẽ với kiểu nét vẽ:

Ngoài phương thức BasicStroke(foat penWidth) ta còn 1 số phương thức

khởi tạo:
BasicStroke(float width, int cap, int join, float miterlimit, float dash[], float
dash_phase)
capStyle: Kiểu đầu mút nét vẽ (CAP_SQUARE, CAP_BUTT, CAP_ROUND).
jonStyle: Kiểu nối (JOIN_MITER, JOIN_BEVEL, JOIN_ROUND).
miterlimit: Giới hạn mũ nối.
dash[] : mảng chứa thông tin đứt gãy:
dash_phase: điểm bắt đầu của nét.
VD: 20px liền, 30px đứt, 10px liền, 20px đứt.
capStyle=
float A={20, 30, 10, 20, 40}
capStyle=
capStyle=
0
jonStyle=0

1
jonStyle=1

2
jonStyle=2


Lớp Graphics 2D
3.Tô màu :
•

•

Graphics2D có lớp phương thức setPaint(Paint x) thay cho setColor() của

Graphics trước đây để tô màu:
•
Các lớp con của lớp Paint:
+ Color: Màu đơn.
+ GradientPaint: Tô loang.
+ TexturePaint: Tô theo mẫu ảnh.
GraientPaint: Tô loang.
GradientPaint( x1, y1, Color 1, x2, y2, Color 2 )

public void paint(Graphics g)
{
Graphics2D g2=(Graphics2D)g;
GradientPaint gr=new GradientPaint(100,100,Color.red,150,150,Color.BLUE
g2.setPaint(gr);
g2.fillOval(50,50,200,200);
}


Lớp Graphics 2D
3.Tô màu :
TexturePaint: Tô theo mẫu ảnh.
TexturePaint ( BuferedImage a, Rectangle2D b)
public void paint(Graphics g)
{
Graphics2D g2=(Graphics2D)g;
Image a=getToolkit().getImage("Warning.png");
•

BufferedImage e=new
BufferedImage(a.getWidth(this),

a.getHeight(this),
BufferedImage.TYPE_INT_RGB);
Graphics2D g2d=e.createGraphics();
g2d.drawImage(a,0,0,this);
Rectangle rt=new Rectangle();
rt.setRect(0,0,a.getWidth(this),a.getHeight(this))
;
TexturePaint gr=new TexturePaint(e,rt);
g2.setPaint(gr);