Giáo trình Kỹ thuật phần mềm - Chương 5: Giáo diện đồ họa người dùng (Tiếp theo) - Phạm Duy Trung

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