Lập trình windows

 GDI: Graphical Device Interface  GDI+ là API Application programming interface cung cấp các lớp  Tạo đồ họa 2D vector  Thao tác trên font  Hiển thị ảnh  Thư viện FCL chứa các lớp

Lập trình Windows

 GDI: Graphical Device Interface

 GDI+ là API (Application programming interface)

cung cấp các lớp

 Tạo đồ họa 2D vector

 Thao tác trên font

 Hiển thị ảnh

 Thư viện FCL chứa các lớp thao tác vẽ trong

 System.Drawing

 Tất cả các thao tác tô vẽ trên form đều thực hiện

bởi chức năng GDI+

structure class

System.Drawing

Font FontFamily

Graphics

Icon Pen Region SolidBrush TextureBrush Image

Brush

HatchBrush LinearGradientBrush PathGradientBrush SolidBrush

TextureBrush

Color Point Rectangle Size

Đồ họa

 Màn hình giống khung vẽ - canvas

 Chương trình phải vẽ nội dung cửa sổ

Làm sao để vẽ - Pixel

Hệ thống phân cấp

 Mỗi thành phần có khu vực con riêng

 Có hệ thống tọa độ riêng

 Clipping

 Không thể vẽ bên ngoài khu vực con của mình

 Không thể vẽ đè lên các thành phần con khác?

Làm nền để vẽ

 Panel thích hợp cho khu vực vẽ tùy biến

Panel

 Lớp Graphics thể hiện

 “Abstract” drawing surface

 Tập hợp những “tool” cho phép thao tác trên surface đó

 Để lấy đối tượng Graphics

 Sử dụng thuộc tính Graphics được truyền cho OnPaint()

 Sử dụng phương thức CreateGraphics() của control

 Lấy từ đối tượng dẫn xuất từ Bitmap

 Gọi hàm Invalidate() thay vì OnPaint()

Lấy đối tượng Graphics

protected override void OnPaint(PaintEventArgs paintevent)

Lấy đối tượng Graphics

private void PaintMe( Control testcontrol)

Bitmap bmpimage= new Bitmap( "hutech.jpg" );

Graphics graf = Graphics FromImage (bmpimage);

}

Lấy từ control

Đối tượng đồ họa cơ sở

 Image (img, x,y)

 String (string, x,y)

label

Các thuộc tính

 Pen (for lines)

Color, width, dash, end caps, joins,

 Brush (for filling)

Color, Solid, texture, pattern, gradient

 Font, String Format (for strings)

 Bitmap/Metafile (for images)

Bmp, gif, jpeg, png, tiff, wmf, …

 Cách tạo đối tượng Font: new Font(…)

 Có 13 phiên bản của constructor

 Font fa = new Font("Times New Roman", 8);

Font fb = new Font("Arial", 36, FontStyle.Bold);

Font fc = new Font(fb, FontStyle.Bold | FontStyle.Italic);

Font fd = new Font("Arial", 1, GraphicsUnit.Inch);

 Nếu tên font không tìm thấy thì font mặc định được sử dụng.

Size = 8 pixel

Size = 1 inch

 Xác định width, style, fill style

 Không cho kế thừa, nhưng tạo thể hiện được

 Trong namespace System.Drawing

 Pen p1 = new Pen(Color.Green);

Pen p2 = new Pen(Color.blue, 10);

 Sử dụng lớp Pens có 141 pen được định nghĩa

trước

 Pen p3 = Pens.Violet;

Ví dụ Pen

path.AddLine (Point (100, 200), Point (200, 200));

path.AddLine (Point (200, 200), Point (200, 300));

graphics.DrawPath (&penJoin, &path);

 Dùng để tô vùng bên trong của hình

 Lớp Brush là lớp Abstract nên không tạo thể hiện

 Sử dụng các lớp kế thừa sau để tạo brush

Ví dụ Brush

new Color (255, 0, 0, 255));

Font font (“Arial", 24, FontStyleRegular, UnitPixel);

graphics.DrawString

("Hello World!", -1, font, pointF, brush);

Line, Rectangle, Ellipse

Ví dụ Line, Rect, Ellip

 Lớp Image hiển thị các ảnh bitmap

 Các dạng ảnh: *.bmp, *.gif, *.jpg, *.ico…

 Phương thức static FromFile tạo ảnh từ file

 Image img = Image.FromFile (“Scenary1.bmp”);

 Image img2 = Image.FromFile(“ Flower.gif ”);

 Phương thức DrawImage xuất ảnh lên Graphics

 g.DrawImage(img, 10, 10);

 G.DrawImage(img2, 10, 10, 100,100); // scale trong hình chữ nhật kích thước 100x100

Ví dụ nạp ảnh

Ví dụ khác

Ellipse được vẽ lên ảnh, rồi sau đó

với vẽ ảnh lên Form

Minh họa 1

 Custom lại nền của Form

Override phương thức OnPaintBackground

của Form

Form hình dạng khác

 Tạo form có hình dạng khác hình chữ nhật

 Sử dụng thuộc tính TransparencyKey của Form

 Sử dụng các hiệu ứng màu được tô

Form có dạng NonRectangle

 Bước 1:

 Tạo ứng dụng Windows Application

 Thiết kế Form có dạng như sau

FormBorderStyle = none

Form có dạng NonRectangle

 Bước 2:

 Thiết lập các thuộc tính cho Form như sau:

TransparencyKey = Control: màu sẽ trong suốt khi vẽ trên Form FormBorderStyle = None: Form không có đường biên

 Thiết lập màu nền cho 2 Label là Transparent

Phần background của 2 label sẽ tiệp với nền bên dưới

Form có dạng NonRectangle

 Bước 3: Tạo trình xử lý cho sự kiện Paint

Khi nào phải vẽ lại?

Vẽ lại

 Màn hình giống như một khung vẽ của họa sĩ

 Tất cả cửa sổ được vẽ trên cùng mặt phẳng

 Windows không nhớ cái gì bên dưới của nó (trừ popup menu)

 Cần vẽ lại khi các phần bị thay đổi

 Nhận sự kiện Repaint (WM_PAINT + invalid rect)

 Mở, thay đổi kích thước, đưa ra trước

 Di chuyển, đóng

Ví dụ - MyApp đang chạy

Mở Note pad, Explorer

Đóng Explorer

Desktop nhận sự kiện Repaint

MyApp nhận sự kiện Repaint

 MyApp gởi sự kiện Repaint tới FormMain

FormMain nhận sự kiện Repaint

Nhận sự kiện Paint

this.Paint += new PaintEventHandler(this.Form1_Paint);

g.DrawLine(new Pen(Color.Red,10), 10,10,300,300);

}

 Cách 2: Override hàm OnPaint

base.OnPaint(e); //giữ nguyên gốc hàm cha

Graphics g = e.Graphics;

g.DrawLine(new Pen(Color.Red,10), 10,10,300,300);

}

Cấu trúc dữ liệu cho các đối tượng đồ họa

 2 cách tiếp cận – Riêng hoặc kết hợp

 Lưu nội dung logic trong một cấu trúc dữ liệu,

vẽ dựa trên dữ liệu

Vd chương trình vẽ: đường, hình, màu…

Vd chương trình trực quan hóa: bảng dữ liệu

• Lưu nội dung thị giác như là một ảnh off-screen

(bitmap)

• Ví dụ pixel

• Sau đó sử dụng g.DrawImage trong sự kiện paint

Kết hợp – Khả năng mới

 Nếu lưu giữ đối tượng: cho phép hiệu chỉnh lại đối

tượng đồ họa, gom nhóm, z-index…

 Bài toán hit test

 Khóa không chỉnh sửa: rasterization

 Layer

Vấn đề flicker – Nháy

myContext = new BufferedGraphicsContext ();

// Chèn code tạo đồ họa ở đây

// Cần chú ý phải Dispose

Một số kĩ thuật hỗ trợ

tạo đối tượng vẽ

Sử dụng Design pattern

 Factory

 Prototype

Vấn đề của Factory Pattern

 Framework cần phải tạo ra thể hiện của lớp nhưng

chỉ biết lớp trừu tượng mà không biết lớp con cụ thể

Ví dụ tác giả và sản phẩm

Creator {abstract}

Product {abstract}

ConcreteCreator ContreteProduct

Ví dụ ứng dụng tạo ra tài liệu

0 1 0 *

CreateDocument () NewDocument () OpenDocument ()

: bool : bool : bool

DrawingApplication ImgzipApplication

The Factory Method

Cài đặt cho bài toán chức danh

Sơ đồ lớp mẫu Prototype