Học viện công nghệ bư u chính viễn thông
Tháng 3/2010
C08CNTT 2
§å häa AWT trong java
Nội dung:
Lớp Graphics
Lớp Graphics 2D
Vẽ h ình học
Vẽ h ình học
Vẽ chữ
Nét vẽ
Vẽ ảnh
Chế độ vẽ
Chế độ vẽ Lớp Color
Vùng cắt
Các lớp tiện ích khác
Tô loang Vẽ ảnh trong suốt Biến đổi tọa độ trong Java2D
Nội dung:
Lớp Graphics
Lớp Graphics 2D
Vẽ h ình học
Vẽ h ình học
Vẽ chữ
Nét vẽ
Vẽ ảnh
Chế độ vẽ
Chế độ vẽ Lớp Color
Vùng cắt
Các lớp tiện ích khác
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: c: public void paint(Graphics g){}
Phương thứ c: c: repaint() dùng
để vẽ lại h ình ảnh
Nếu ch ỉ muốn vẽ lại 1 phần ta sử dụng phương thứ c: c:
ực ch ấ ấ t l à à (th ự ọi i đế n ph ươ ươ ng ức update() sau đó g ọ ọi i đế n ph ươ ươ ng ức repaint() g ọ ng th ứ c ng th ứ c paint() ) ) repaint ( int x, int y,i nt width, int height )
Lớp Graphics 1.Vẽ h ình học:
Gồm:
Vẽ h ình chữ nhật
Vẽ Elip, vòng tròn
Vẽ đa giác
Vẽ đường thẳng
Vẽ h ình chữ nhật tròn góc
Vẽ 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) clearRect(int x, int y,int width,int height) draw
(Width )
fill
(x,y)
(Height)
VD: public void paint (Graphics g) { g. drawRect(20, 30,50,50); }
(0,600)
Y
(800,600)
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ự : 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 ác h 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 ” g.drawChars (B , 0 , A.length , 50 , 50);
Lớp Graphics 2.Vẽ chữ :
Vẽ chuỗi ký tự :
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); g.drawString("Hello ! ",50,60); g.setXORMode(Color.green); g.setColor(Color.black); (blue) XOR (255,0,255) g.fillRect(50,40,90,90);
(0,0,255) (blue)
=(0,255,255)
(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
Alpha
0xff
0xaf
0x00
R
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 getRed: Trả về giá trị R (int). int getGreen: Trả về giá trị G (int). int getBlue: Tr ả về giá trị B (int). 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 java.awt.geom): // Đườ ng th ẳ ng Line2D.Double //Cung tr òn Arc2D.Double Line2D.Float Arc2D.Float gi á c // Đa Polygon //V ù ng Area QuadCurve2D.Double //Cung g óc t ư CubicCurve2D.Double //Kh ố i QuadCurve2D.Float CubicCurve2D.Float Rectangle2D.Double //H ì nh ch ữ nh ậ t Ellipse2D.Double //H ìn h tr ò n, elip
Ellipse2D.Float GenrralPath
//V ẽ cung
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); public void paint(Graphics g) VD: { 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)
GenrralPath ) c ủa 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 ) (Quad)
(x4,y4)
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; g2.setStroke(new BasicStroke(3));
Sau:
g2.drawLine(30,40,60,90); }
Lớp Graphics 2D 2.Thay đổi nét vẽ:
đổ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:
Thay
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. float A={20, 30, 10, 20, 40} -
capStyle=0 jonStyle=0
capStyle=1 jonStyle=1
capStyle=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 ( BufferedImage 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); g2.fillOval(50,50,200,200); }
Lớp Graphics 2D 4.Vẽ ảnh trong suốt: • •
Để vẽ ảnh trong suốt ta dùng phương thứ c setComposite() của lớp Graphics2D: Dùng đối tượng AlphaComposite để truyền vào phương thứ c setComposite(). public void paint(Graphics g) { Graphics2D g2=(Graphics2D)g; g2.setColor(Color.red); g2.fillRect(50,50,60,60); g2.setColor(Color.blue); g2.setComposite(AlphaComposite.getInstance(AlphaComposite.SRC_OVER,(float)0.3)); g2.fillOval(60,60,80,80); }
Lớp Graphics 2D 5.Biến đổi tọa độ: • •
Java2D cho phép dịch, quay, co giãn, bóp méo 1 h ình dễ dàng: Hàm biến đổi tọa độ của Graphics2D • translate(int x,int y): Di chuyển gốc tọa độ đến (x,y). •
• •
rotate(double a,int x, int y): Quay hệ tọa độ a, và di chuyển tâm quay đến tọa độ (x,y)
scale(sx,sy): Phóng to, thu nhỏ với tỷ lệ sx,sy. shear(float shx, float shy): Bóp méo 1 h ình theo chiều ngang, dọc.
public void paint(Graphics g) { Graphics2D g2=(Graphics2D)g; g2.shear( (float) 1.0, (float) 0.0); g2.setColor(Color.red); g2.fillRect(50,50,60,60); }
Lời kết: •
Ngoài các khả năng đồ họa của Java đã nêu trong Slide, Java c òn có khả năng xử lý ảnh, tạo hiêu ứ ng chữ , mở Video… nâng cao hơn là Java3D, đó là nhữ ng đề tài khá phứ c tạp về đồ họa. Thời gian có hạn nên chúng tôi không thể nghiên cứ u hết, rất mong được sự góp ý của thầy và các bạn !
Phụ lục: *** Tài liệu tham khảo *** • Java Tập1 – Nhà xuất bản lao động. • •
OReilly Java Cookbook 2 nd Edition. Thinking In Java.
*** Nhóm thự c hiện *** Nhóm 8:
Nguyễn Đình Hùng Đỗ Duy B ình Ph ạ m V ă n Ho à i Phạm Văn Lự c Đỗ Văn Hoàn Trần Văn Kiên Đỗ Thành Nam Trầ Thị Hiề
