Phụ lục A: Đồ họa

Trở về Mục lục cuốn sách

A.1  Đồ họa Java 2 chiều

Phụ lục này đưa ra các ví dụ và bài tập minh họa cho tính năng đồ họa trong Java. Có một số cách tạo nên đồ họa trong Java; cách đơn giản nhất là dùng java.awt.Graphics. Sau đây là một ví dụ hoàn chỉnh:

import java.awt.Canvas; 
import java.awt.Graphics; 
import javax.swing.JFrame; 

public class MyCanvas extends Canvas { 

  public static void main(String[] args) { 
    // tạo một khung (frame) 
    JFrame frame = new JFrame(); 
    frame.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE); 
    // thêm một nền vẽ (canvas) 
    Canvas canvas = new MyCanvas(); 
    canvas.setSize(400, 400); 
    frame.getContentPane().add(canvas); 
    // hiển thị khung 
    frame.pack(); 
    frame.setVisible(true); 
  } 

  public void paint(Graphics g) { 
    // vẽ hình tròn 
    g.fillOval(100, 100, 200, 200); 
  } 
}

Bạn có thể tải đoạn mã lệnh này về từ http://thinkapjava.com/code/MyCanvas.java.

Những dòng lệnh đầu có nhiệm vụ nhập các lớp mà ta cần từ java.awt và javax.swing.

MyCanvas mở rộng Canvas, nghĩa là một đối tượng MyCanvas là một kiểu Canvas mà cung cấp các phương thức để vẽ những đối tượng đồ họa.

Trong main, ta đã

  1. Tạo nên một JFrame, vốn là một cửa sổ có thể chứa nền vẽ (canvas), nút bấm (buttons), trình đơn (menu), cùng các thành phần cửa sổ khác;
  2. Tạo nên MyCanvas, ấn định bề rộng và chiều cao của nó, rồi thêm nó lên khung, sau đó
  3. Hiển thị khung này lên màn hình.

paint là  một phương thức đặc biêt được kích hoạt khi MyCanvas cần được vẽ. Nếu bạn chạy mã lệnh này, bạn sẽ thấy một hình tròn đen trên nền xám.

A.2  Các phương thức Graphics

Để vẽ lên nền Canvas, bạn kích hoạt các phương thức thuộc đối tượng Graphics. Ví dụ trước đây sử dụng fillOval. Các phương thức khác gồm có drawLinedrawRect v.v. Bạn có thể đọc tài liệu của những phương thức này ở http://download.oracle.com/javase/6/docs/api/java/awt/Graphics.html.

Sau đây là nguyên mẫu của fillOval:

  public void fillOval(int x, int y, int width, int height)

Các tham số quy định một hình bao, vốn là hình chữ nhật bao lấy hình trái xoan được vẽ (xem phía dưới). Bản thân hình bao thì không được vẽ lên.

x và y quy định vị trí góc trái bên trên của hình bao trong hệ tọa độ đồ họa.

A.3  Hệ tọa độ

Có thể bạn đã quen thuộc với tọa độ Đề-các trong không gian hai chiều; trong đó mỗi vị trí được xác định bằng một tọa độ x (khoảng cách dọc trục x) và một tọa độ y. Theo quy ước, các tọa độ Đề-các tăng dần qua bên phải và lên phía trên, như ở hình vẽ sau.

Theo quy ước, hệ thống đồ họa máy tính sử dụng một hệ tọa độ trong đó gốc ở góc trái trên, và hướng dương của trục y chỉ xuống. Java tuân theo quy ước này.

Các tọa độ đều được đo bằng điểm ảnh; mỗi điểm ảnh tương ứng với một chấm trên màn hình. Một màn hình thường có bề rộng khoảng 1000 điểm ảnh. Các tọa độ đều luôn là số nguyên. Nếu muốn dùng một giá trị phẩy động để làm tọa độ, bạn phải làm tròn giá trị này (xem Mục 3.2).

A.4  Màu sắc

Để chọn màu của một hình, bạn hãy kích hoạt setColor lên đối tượng đồ họa:

    g.setColor(Color.red);

setColor thay đổi màu hiện hành; mọi thứ được vẽ đều bằng màu hiện hành.

Color.red là một giá trị cho bởi lớp Color; để dùng màu này bạn phải nhập java.awt.Color. Các màu khác gồm có:

black     blue    cyan   darkGray   gray   lightGray
magenta   orange  pink   red        white  yellow

Bạn có thể tạo nên những màu khác bằng cách chỉ định các thành phần đỏ, lục, lam (RGB). Xem http://download.oracle.com/javase/6/docs/api/java/awt/Color.html.

Bạn có thể điều khiển màu nền của Canvas bằng cách kích hoạt Canvas.setBackground.

A.5  Chuột Mickey

Giả dụ ta muốn vẽ một chú chuột Mickey. Ta có thể dùng hình oval như vừa vẽ làm khuôn mặt, sau đó thêm vào đôi tai. Để làm cho mã lệnh dễ đọc hơn, hãy dùng Rectangle (hình chữ nhật) để biểu diễn các hình bao.

Sau đây là một phương thức nhận vào một Rectangle rồi kích hoạt fillOval.

  public void boxOval(Graphics g, Rectangle bb) { 
    g.fillOval(bb.x, bb.y, bb.width, bb.height); 
  }

Và sau đây là một phương thức để vẽ Mickey:

  public void mickey(Graphics g, Rectangle bb) { 
    boxOval(g, bb); 
    int dx = bb.width/2; 
    int dy = bb.height/2; 
    Rectangle half = new Rectangle(bb.x, bb.y, dx, dy); 
    half.translate(-dx/2, -dy/2); 
    boxOval(g, half); 
    half.translate(dx*2, 0); 
    boxOval(g, half); 
  }

Dòng thứ nhất vẽ khuôn mặt. Ba dòng tiếp theo tạo nên một hình chữ nhật nhỏ hơn làm đôi tai. Ta dịch chuyển hình chữ nhật này lên trên và bên trái để tạo thành tai thứ nhất, sau đó dịch sang phải làm tai thứ hai.

Kết quả trông sẽ như sau:

Bạn có thể tải mã lệnh về từ http://thinkapjava.com/code/Mickey.java.

A.6  Thuật ngữ

tọa độ:
Một biến hay giá trị quy định vị trí trong một cửa sổ đồ họa hai chiều.
điểm ảnh:
Đơn vị đo tọa độ. 
hình bao:
Một cách thông thường quy định tọa độ của một vùng chữ nhật. 

A.7  Bài tập

Bài tập 1   Vẽ lá cờ Nhật Bản, một hình tròn đỏ trên nền trắng có bề rộng hơn so với chiều cao.

Bài tập 2   Sửa lại Mickey.java để vẽ những đôi tai trên cả đôi tai, rồi tai mới trên tai này, và cứ như vậy đến khi tai nhỏ nhất có bề rộng chỉ 3 điểm ảnh. Kết quả dường như giống Hươu Mickey:

Gợi ý: bạn chỉ được bổ sung hay sửa đổi một vài dòng lệnh.

Bạn có thể tải về một lời giải từ http://thinkapjava.com/code/MickeySoln.java.

Bài tập 3

  1. Tải về http://thinkapjava.com/code/Moire.java rồi nhập nó vào môi trường phát triển hiện hành.
  2. Đọc phương thức paint và phác thảo công dụng mà bạn phán đoán. Bây giờ chạy phương thức này. Bạn có thấy kết quả như dự đoán không? Một lời giải thích cho điều này có thể xem ở http://en.wikipedia.org/wiki/Moire_pattern.
  3. Sửa lại chương trình để khoảng cách giữa các đường tròn rộng ra hoặc hẹp lại. Xem có gì trong hình ảnh.
  4. Sửa lại chương trình để các đường tròn đồng tâm được vẽ từ tâm màn hình, như ở hình dưới, bên trái. Khoảng cách giữa các đường tròn cần phải đủ nhỏ để thấy được sự  giao hòa Moiré .

  1. Hãy viết một phương thức có tên radial để vẽ một loạt các đường thẳng đồng quy như ở hình (phải), nhưng phải đủ sát nhau để tạo nên một dạng mẫu Moiré.
  2. Gần như mọi loại dạng mẫu đồ họa cũng có thể tạo nên dạng mẫu giao hòa kiểu Moiré. Hãy nghịch chơi và quan sát sản phẩm bạn tạo nên.

6 phản hồi

Filed under Think Java

6 responses to “Phụ lục A: Đồ họa

  1. Pingback: Think Java: Cách suy nghĩ như nhà khoa học máy tính | Blog của Chiến

  2. ko hiểu sao mình gọi phương thức g.setColor(Color.red); mà vẫn là hình tròn màu đen chứ ko phải màu đỏ

  3. bạn ơi để kick hoạt phương thức mickey() thì cần truyền tham số như thế nào mình chỉ biết truyền mỗi thông số hcn còn cái Graphics g kia truyền vào như nào

Gửi phản hồi

Mời bạn điền thông tin vào ô dưới đây hoặc kích vào một biểu tượng để đăng nhập:

WordPress.com Logo

Bạn đang bình luận bằng tài khoản WordPress.com Log Out / Thay đổi )

Twitter picture

Bạn đang bình luận bằng tài khoản Twitter Log Out / Thay đổi )

Facebook photo

Bạn đang bình luận bằng tài khoản Facebook Log Out / Thay đổi )

Google+ photo

Bạn đang bình luận bằng tài khoản Google+ Log Out / Thay đổi )

Connecting to %s