Làm việc với đồ hoạ

a. Tổng quan về hổ trợ đồ hoạ của AWT

Khi phương thức repaint()được gọi, AWT gọi tới phương thức update() của để yêu cầu thành phần đó tự vẽ lại. phương thức update() gọi phương thức paint() của thành phần đó.

Đối tượng đồ hoạ

Thông số duy nhất cho các phương thức paint() và update()là một đối tượng đồ hoạ(Graphics). Đối tượng Graphics là chìa khoá cho tất cả các công việc vẽ này. Nó cung cấp hai kiểu vẽ cơ bản: kiểu vẽ đơn sơ (như lines, rectangles, and text) và hình ảnh

Bên cạnh các kiểu vẽ trên, đối tượng Graphics cung cấp một ngữ cảnh vẽ ở trạng thái duy trì như vùng vẽ hiện tại và màu vẽ hiện tại. Bạn có thể giảm bớt vùng vẽ bằng cách cắt xén nó, nhưng bạn không bao bao giờ tăng được vùng vẽ. Do đó, đối tượng Graphics chắn chắn một thành phần chỉ có thể vẽ được trong vùng quản lí của nó.

Hệ thống toạ độ

Mỗi thành phần đều có hệ thống toạ độ riêng, từ (0, 0) đến (width - 1, height - 1), với mỗi đơn vị tính là

Bốn hình thức của phương thức repaint()

public void repaint()

Gọi phương thức update() ngay lập tức. public void repaint(long time)

Gọi phương thức update() sau time mili giây nữa.

public void repaint(int x, int y, int width, int height) Gọi phương thức update() ngay lập tức và chỉ vẽ lại vùng giới hạn.

public void repaint(long time, int x, int y, int width, int height) Gọi phương thức update() sau time mili giây nữa và chỉ vẽ lại vùng giới hạn

b. Sử dụng các màu gốc của đồ hoạ Ve các hình dạng Ve các hình dạng

Lớp Graphics định nghĩa các phương thức vẽ cho các loại hình ảnh sau:

• Đường thẳng (drawLine(), vẽ đưòng thẳng với màu hiện tại của đối tượng Graphics, màu này được xác lập như màu chữ của đối tượng)

• Hình chữ nhật (drawRect(), fillRect(), và clearRect()) • Hình chữ nhật nỗi hoặc chìm (draw3DRect() và fill3DRect()) • Round-edged rectangles (drawRoundRect() và fillRoundRect()) • Hình Oval (drawOval() and fillOval())

• Ve cung (drawArc() and fillArc())

• Vẽ các đa giác (drawPolygon() and fillPolygon())

Ví dụ 1: ví dụ đơn giản về ve hình chữ nhật

Sau đây chỉ là những đoạn lệnh phục vụ việc vé hình chữ nhật:

//In FramedArea (a Panel subclass):

public void paint(Graphics g) { Dimension d = size();

Color bg = getBackground();

//Draw a fancy frame around the applet. g.setColor(bg);

g.draw3DRect(0, 0, d.width - 1, d.height - 1, true); g.draw3DRect(3, 3, d.width - 7, d.height - 7, false); }

//In CoordinateArea (a Canvas subclass):

public void paint(Graphics g) {

//If user has clicked, paint a tiny rectangle where click occurred

if (point != null) {

g.fillRect(point.x - 1, point.y - 1, 2, 2); }

}

Applet tạo (và chứa) một đối tượng FramedArea, lần lượt tạo (và chứa) một đối tượng CoordinateArea. Lệnh đầu gọi tới phương thức draw3DRect() để tạo một hình chữ nhật chiếm hết vùng cho phép vẽ

của FramedArea. Thông số true xác định rằng hình chữ nhật phải nổi. Lệnh thứ hai gọi draw3DRect() tạo hình chữ nhật thứ hai nhỏ hơn, thông số false xác định hình chữ nhật sẽ xuất hiện chìm xuống. Bên cạnh đó, hai lệnh trên có tác dụng với FramedArea là chứa đối tượng CoordinateArea.

CoordinateArea sử dụng fillRect() để tô hai pixel một tại vị trí người sử dụng nhấp chuột.

Ví dụ 2: sử dụng hình chữ nhật để chỉ ra vùng được chọn

Đây là một Applet mà bạn có thể sử dụng các phương thức cơ bản để thực thi vùng được chọn trong chương trình vẽ. Khi người sử dụng kéo chuột, Applet sẽ hiển thị liên tục một hình chữ nhật. Hình chữ nhật bắt đầu từ điểm mà người sử dụng ấn chuột lần đầu và kết thúc tại vị trí con trỏ chuột hiện tại. Sau đây là các lệnh mới quan trọng nhất cho Applet trên:

class SelectionArea extends Canvas { . . .

public boolean mouseDown(Event event, int x, int y) { currentRect = new Rectangle(x, y, 0, 0);

repaint(); return false; }

public boolean mouseDrag(Event event, int x, int y) {

currentRect.resize(x - currentRect.x, y - currentRect.y); repaint();

return false; }

public boolean mouseUp(Event event, int x, int y) {

currentRect.resize(x - currentRect.x, y - currentRect.y); repaint();

return false; }

public void paint(Graphics g) { Dimension d = size();

//If currentRect exists, paint a rectangle on top. if (currentRect != null) {

Rectangle box = getDrawableRect(currentRect, d); controller.rectChanged(box);

//Draw the box outline.

g.drawRect(box.x, box.y, box.width - 1, box.height - 1); }

}

Rectangle getDrawableRect(Rectangle originalRect, Dimension drawingArea) {

. . .

//Make sure rectangle width and height are positive.

. . .

//The rectangle shouldn't extend past the drawing area.

. . . } }

}

Như bạn thấy, vùng được chọn sẽ giữ được hình chữ nhật hiện tại đang chọn, sử dụng đối tượng Rectangle được gọi bởi currentRect. Khi được thực thi, currentRect giữ nguyên toạ độ gốc

(currentRect.x, currentRect.y) trong khi người sử dụng kéo chuột. Điều này có nghĩa là chiều cao và chiều rộng của hình chữ nhật sẽ không quan trọng.

Tuy nhiên, những phương thức drawXxx() và fillXxx() không vẽ bất cứ thứ gì nếu chiều rộng hoặc chiều cao không có. Vì lí do này, nên khi SelectionArea vẽ một hình chữ nhật, nó phải xác định điểm góc tái bên trên hình chữ nhật để chiều rộng và chiều cao đwocj rõ ràng hơn. Lớp SelectionArea định nghĩa phương thức getDrawableRect() để thực hiện các pháep tính toán cần thiết cho việc tìm ra điểm đó. Phương thức getDrawableRect() cũng chắn chắn điểm đó không vượt ra khỏi vùng được phép vẽ

Ví dụ 3: ví dụ về ve các hình ảnh

Applet demonstrates minh hạo đầy đủ các hình ảnh được vẽ và được tô như thế nào. Trừ khi Font mặc định của Applet quá nhỏ, chuỗi sẽ được hiển thị rất xấu.

Sau đây chỉ là các lệnh vẽ các loại hình học cơ bản. Các giá trị rectHeight và rectWidth xác định kích thước mỗi vùng cho việc vẽ các hình ảnh đó. Các giá trị x và y được thay đổi cho mỗi hình, do đó các hình không được vẽ trên nhau.

Color bg = getBackground(); Color fg = getForeground(); . . .

// drawLine()

g.drawLine(x, y+rectHeight-1, x + rectWidth, y); // x1, y1, x2, y2 . . .

// drawRect()

g.drawRect(x, y, rectWidth, rectHeight); // x, y, width, height . . .

// draw3DRect() g.setColor(bg);

g.draw3DRect(x, y, rectWidth, rectHeight, true); g.setColor(fg);

. . .

// drawRoundRect()

g.drawRoundRect(x, y, rectWidth, rectHeight, 10, 10); // x, y, w, h, arcw, arch

. . .

// drawOval()

g.drawOval(x, y, rectWidth, rectHeight); // x, y, w, h . . .

// drawArc()

g.drawArc(x, y, rectWidth, rectHeight, 90, 135); // x, y, w, h . . .

// drawPolygon()

Polygon polygon = new Polygon(); polygon.addPoint(x, y);

polygon.addPoint(x+rectWidth, y+rectHeight); polygon.addPoint(x, y+rectHeight);

polygon.addPoint(x+rectWidth, y);

//polygon.addPoint(x, y); //don't complete; fill will, draw won't g.drawPolygon(polygon);

. . .

g.fillRect(x, y, rectWidth, rectHeight); // x, y, width, height . . .

// fill3DRect() g.setColor(bg);

g.fill3DRect(x, y, rectWidth, rectHeight, true); g.setColor(fg);

. . .

// fillRoundRect()

g.fillRoundRect(x, y, rectWidth, rectHeight, 10, 10); // x, y, w, h, arcw, arch

. . .

// fillOval()

g.fillOval(x, y, rectWidth, rectHeight); // x, y, w, h . . .

// fillArc()

g.fillArc(x, y, rectWidth, rectHeight, 90, 135); // x, y, w, h . . .

// fillPolygon()

Polygon filledPolygon = new Polygon(); filledPolygon.addPoint(x, y); filledPolygon.addPoint(x+rectWidth, y+rectHeight); filledPolygon.addPoint(x, y+rectHeight); filledPolygon.addPoint(x+rectWidth, y); //filledPolygon.addPoint(x, y); g.fillPolygon(filledPolygon);

Làm việc với chuỗi

Khi viết lệnh vẽ chuỗi, trước tiên bạn nên quan tâm có sử dụng thành phần có định hướng chuỗi hay không như Label, TextField, hoặc TextArea. Nếu các thành phần này không thích hợp, bạn có thể sử dụng các phương thức drawBytes(), drawChars(), hoặc drawString() của đối tượng Graphics.

Sau đây là một đoạn lệnh ví dụ để vẽ một chuỗi ra màn hình: g.drawString("Hello World!", x, y);

x,y là toạ độ nơi chuỗi hiển thị.

Nhận biết thông tin về Font: FontMetrics

Ví dụ :

boolean fontFits = false; Font font = g.getFont();

FontMetrics fontMetrics = g.getFontMetrics(); int size = font.getSize();

String name = font.getName(); int style = font.getStyle(); while (!fontFits) { if ( (fontMetrics.getHeight() <= maxCharHeight) && (fontMetrics.stringWidth(longString) <= xSpace)) { fontFits = true; } else { if (size <= minFontSize) { fontFits = true; } else {

g.setFont(font = new Font(name, style, --size)); fontMetrics = g.getFontMetrics(); } } }

Đoạn lệnh trên sử dụng các phương thức getFont(), setFont(), và getFontMetrics() của đối tượng Graphics dể lấy và xác lập giá trị cho font hiện tại và lấy đối tượng FontMetrics tương ứng với Font. Từ các phương thức getHeight() và getStringWidth() của đối tượng FontMetrics, đoạn lệnh trên lấy kích thwocs ngang và dọc của Font đó.

Hình ảnh sau minh hoạ vài thông tin về những thông tin về Font mà đối tượng FontMetrics cung cấp:

Sau đây là các phương thức của FontMetrics có thể trả về thônh tin về kích thước dọc của Font: getAscent(), getMaxAscent()

phương thức getAscent() trẻ về số Pixel nằm giữa ascender line và baseline. Nói chung, Ascender line miêu tả chiều cao điển hình của kí tự hoa. Đặc biệt, các giá trị ascent và descent được chọn bởi người thiết kế Font để miêu tả đúng chuỗi, hoặc độ dày của chữ, vì vậy chuỗi sẽ xuất hiện đúng với ý tưởng thiết kế. Ascent cung cấp đầy đủ khoảng trống cho kí tự, ngoại trừ khoảng trống cho các dấu của các kí tự hoa. Phương thức getMaxAscent() đếm chiều cao cho trường hợp này.

getDescent(), getMaxDescent()

phương thức getDescent() trả về số Pixel nằm giữa baseline và descender line. Trong hầu hết các loại Font, mọi kí tự đều kéo dài xuống Descender line tại điểm thấp nhất. Chỉ trong trường hợp bạn sử dụng phương thức getMaxDescent() để nhận khoảng không gian chắn cho kí tự đó được vẽ hết. getHeight()

Trả về số Pixel được tìm thấy giữa Baseline của hai dòng chuỗi kí tự. getLeading()

Trả về khoảng trống giữa hai dòng. getMaxAdvance()

Chiều rộng nhất của kí tự trong

bytesWidth(byte[], int, int)

Chiều rộng của chuỗi được khai báo bởi một mảng các kí tự. Thông số Int đầu tiên xác định vị trí bắt đàu kí tự của chuỗi đó. Thông số Int thứ hai xác định số kí tự của chuỗi đó.

charWidth(int), charWidth(char) Chiều rộng của một kí tự xác định.

charsWidth(char[], int, int) Chiều rộng của kí tự trong mảng.

stringWidth(String) Chiều rộng của chuỗi string. getWidths()

Chiều rộng của mỗi kí tự trong ầầ̉ kí tự đầu tiên.

Tạo một LayoutManager