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

Posted on by mtoplistChuyên mục:Top List

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ó drawLine, drawRect 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.

Đánh giá:

Share this:

Thích bài này:

Thích

Đang tải…

mtoplist