graphics awt java trong java 1623

30
§å häa AWT trong java Học viện công nghệ bưu chính viễn thông C08CNTT 2 Tháng 3/2010 http://www.mediafire.com/?hz7rf8jbvvnlnht

Upload: tran-trong-tri

Post on 26-Dec-2014

1.466 views

Category:

Documents


6 download

TRANSCRIPT

Page 1: Graphics Awt Java Trong Java 1623

§å häa AWT trong java

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

Tháng 3/2010

http://www.mediafire.com/?hz7rf8jbvvnlnht

Page 2: Graphics Awt Java Trong Java 1623

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

Page 3: Graphics Awt Java Trong Java 1623

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 ) 

Page 4: Graphics Awt Java Trong Java 1623

Lớp Graphics1.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

Page 5: Graphics Awt Java Trong Java 1623

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

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

    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)

Màn hình

(800,0)

(0,600)

(0,0)

X

Y(800,600)  

filldraw (Width)

(Height)

(x,y)

VD: public void paint (Graphics g){

g. drawRect(20, 30,50,50);}

Page 6: Graphics Awt Java Trong Java 1623

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

Vẽ đường thẳng:    drawLine(int x1, int y1, int x2, int y2)

(x1,y1)

(x2,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

filldraw (Width)

(Height)

(x,y)

Page 7: Graphics Awt Java Trong Java 1623

Lớp Graphics1.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)

(arcWidth)

(arcHeight)

Page 8: Graphics Awt Java Trong Java 1623

Lớp Graphics1.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)

Page 9: Graphics Awt Java Trong Java 1623

Lớp Graphics1.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);(width)

Fill Arc

startAnglearcAngle

(x,y)

(height)

Draw Arc

Page 10: Graphics Awt Java Trong Java 1623

Lớp Graphics2.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 ”

g.drawChars (B , 0 , A.length , 50 , 50);

Page 11: Graphics Awt Java Trong Java 1623

Lớp Graphics2.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();

Page 12: Graphics Awt Java Trong Java 1623

Lớp Graphics3.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);g.fillRect(50,40,90,90); (blue) XOR (255,0,255) =(0,255,255)

(blue)(0,0,255)

(black) XOR (green) =(0,0,0) (0,255,0)

(255,0,255)

Page 13: Graphics Awt Java Trong Java 1623

Lớp Graphics4.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)

Page 14: Graphics Awt Java Trong Java 1623

Lớp Graphics5.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

R G B0xff 0xaf 0x00

Alpha

Page 15: Graphics Awt Java Trong Java 1623

Lớp Graphics5.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).

Page 16: Graphics Awt Java Trong Java 1623

Lớp Graphics6.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);

    }

Page 17: Graphics Awt Java Trong Java 1623

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;

}

Page 18: Graphics Awt Java Trong Java 1623

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ẽ.

Page 19: Graphics Awt Java Trong Java 1623

Lớp Graphics 2D1.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):  Arc2D.Double  //Cung tròn Arc2D.Float Area //Vùng CubicCurve2D.Double   //Khối CubicCurve2D.Float Ellipse2D.Double //Hình tròn, elip Ellipse2D.Float GenrralPath //Vẽ cung

Line2D.Double //Đường thẳng Line2D.Float Polygon //Đa giác QuadCurve2D.Double  //Cung góc tư QuadCurve2D.Float Rectangle2D.Double   //Hình chữ nhật Rectangle2D.Float RoundRectangle2D.Double //Hình CN  RoundRectangle2D.Float  Góc tròn

Page 20: Graphics Awt Java Trong Java 1623

Lớp Graphics 2D1.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 GraphicsLine2D.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                } 

Page 21: Graphics Awt Java Trong Java 1623

(x1,y1)

(x2,y2)

(x3,y3)(Quad)

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

Dạng hình học đặc biệt: GenrralPath:Vẽ cungGeneralPath p = new GeneralPath(GeneralPath.WIND_EVEN_ODD);Curve:

 p.moveTo(x1,y1); p.curveTo(x2,y2, x3,y3, x4,y4);

Quad:p.moveTo(x1,y1);p.quadTo(x2, y2, x3,y3);

QuadCurve2D: Vẽ cung (Tương tự Quadcủa GenrralPath)

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)

(x2,y2)

(x3,y3)

(x4,y4)(Curve)

Page 22: Graphics Awt Java Trong Java 1623

Lớp Graphics 2D2.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);VD:      public void paint(Graphics g)      {

Graphics2D g2=(Graphics2D)g;      g2.setStroke(new BasicStroke(3));

g2.drawLine(30,40,60,90);}

Sau:

Trước:

Page 23: Graphics Awt Java Trong Java 1623

Lớp Graphics 2D2.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.      float A={20, 30, 10, 20, 40}

capStyle=0jonStyle=0

capStyle=1jonStyle=1

capStyle=2jonStyle=2

Page 24: Graphics Awt Java Trong Java 1623

Lớp Graphics 2D3.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);}

Page 25: Graphics Awt Java Trong Java 1623

Lớp Graphics 2D3.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);

}

Page 26: Graphics Awt Java Trong Java 1623

Lớp Graphics 2D4.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);

     }

Page 27: Graphics Awt Java Trong Java 1623

Lớp Graphics 2D5.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);}

Page 28: Graphics Awt Java Trong Java 1623

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 !

Page 29: Graphics Awt Java Trong Java 1623

Phụ lục: *** Tài liệu tham khảo ***

• Java Tập1 – Nhà xuất bản lao động.• OReilly Java Cookbook 2nd 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ần Thị Hiền

Page 30: Graphics Awt Java Trong Java 1623

Cảm ơn sự quan tâm theo dõi của thầy và các bạn !

THE END

Tháng 3/2010http://www.mediafire.com/?hz7rf8jbvvnlnht