Bài giảng Lập trình trên môi trường Windows - Chương 6: GDI - Phần 1 - Trần Duy Hoàng

Nội dung text: Bài giảng Lập trình trên môi trường Windows - Chương 6: GDI - Phần 1 - Trần Duy Hoàng

1. Lậ p trình trên môi tr ườ ng Windows GDI+ Tr n Duy Hoàng ầ tdhoang@hcmus.edu.vn
2. Nộ i dung  Giớ i thi ệ u GDI+  Invalidate  Đố i t ượ ng Graphic  Tạ o form có hình ● Các hàm vẽ dạ ng b ấ t kỳ ● Các hàm tô màu  Kỹ thu ậ t ch ố ng flicker  Pen  Brush
3. Giớ i thi ệ u GDI+  Thự c hi ệ n v ẽ trên môi tr ườ ng .NET  Cung cấ p t ậ p namespace, l ớ p h ướ ng đ ố i t ượ ng lớ n cho vi ệ c th ự c hi ệ n v ẽ  Device Context đượ c thay th ế b ằ ng đ ố i t ượ ng Graphic  Mỗ i control đ ề u có đ ố i t ượ ng Graphic đ ể v ẽ nó, bao gồ m Form, Button, TextBox, .
4. Các namespace Tên Mô tả System.Drawing Đị nh nghĩa nh ữ ng đ ố i t ượ ng v ẽ c ơ b ả n (Fonts, Pens, Brushes, ) và đố i t ượ ng Graphic System.Drawing.Drawing2D Cung cấ p nh ữ ng đ ố i t ượ ng v ẽ vector 2 chiề u nh ư gradient brushes, gradient pens, System.Drawing.Image Thao tác vớ i hình ả nh nh ư th ự c hi ệ n v ẽ , lấ y thông tin kích th ướ c ả nh, System.Drawing.Printing Thự c hi ệ n in; cung c ấ p nh ữ ng đ ố i t ượ ng giao tác vớ i printer System.Drawing.Text Thự c hi ệ n v ẽ v ớ i các font.
5. Đố i t ượ ng Graphic  Đố i t ượ ng quan tr ọ ng c ủ a GDI+  Mọ i thao tác v ẽ đ ề u th ự c hi ệ n trên đ ố i t ượ ng Graphic  Mọ i control đ ề u có thu ộ c tính Graphic dùng đ ể vẽ chính nó  Có 2 cách truy xuấ t ● Sự ki ệ n Paint : e.Graphics.DrawLine( ) ● Hàm CreateGraphic() ả nh v ẽ s ẽ m ấ t đi khi Form đượ c Reload
6. Đố i t ượ ng Graphic  Ví dụ private void Form1_Paint(object sender, PaintEventArgs e) { e.Graphics.DrawRectangle(Pens.Blue, 10, 10, 100, 100); }
7. Đố i t ượ ng Graphic  Danh sách các hàm vẽ Hàm Ý nghĩa DrawArc Vẽ hình cung ellipse DrawEllipse Vẽ hình ellipse DrawLine Vẽ đ ườ ng th ẳ ng DrawPolygon Vẽ đa giác DrawRectangle Vẽ hình ch ữ nh ậ t DrawString Vẽ chu ổ i DrawImage Vẽ hình ả nh
8. Đố i t ượ ng Graphic  Ví dụ : // tạ o bút v ẽ Pen pen = new Pen(Color.Blue, 2); // vẽ đ ườ ng t ừ đi ể m 0, 0 đ ế n 100, 100 e.Graphics.DrawLine(pen, 0, 0, 100, 100);
9. Đố i t ượ ng Graphic  Ví dụ : // tạ o bút v ẽ Pen pen = new Pen(Color.Blue, 2); // vẽ hình ellipse n ằ m trong hình ch ữ nh ậ t // từ đi ể m 0,0 có đ ộ r ộ ng 300, cao 200 e.Graphics.DrawEllipse(pen, 0, 0, 300, 200);
10. Đố i t ượ ng Graphic  Ví dụ : // tạ o bút v ẽ Pen pen = new Pen(Color.Blue, 2); // vẽ cung ellipse n ằ m trong hình ch ữ nh ậ t // từ đi ể m 0,0 có đ ộ r ộ ng 300, cao 200 // vẽ t ừ góc 90 đ ộ v ẽ ti ế p 180 đ ộ e.Graphics.DrawArc(pen, 0, 0, 300, 200, 90, 180);
11. Đố i t ượ ng Graphic  Ví dụ : // tạ o bút v ẽ Pen pen = new Pen(Color.Blue, 2); // vẽ hình ch ữ nh ậ t t ừ đi ể m 0,0 // có độ r ộ ng 300, cao 200 e.Graphics.DrawRectangle(pen, 10, 10, 300, 200);
12. Đố i t ượ ng Graphic  Ví dụ : // tạ o bút v ẽ Pen pen = new Pen(Color.Blue, 2); // vẽ đa giác có 4 đ ỉ nh 10,10 100,180 // 200,180 và 200,10 Point[] polygon = new Point[4]; polygon[0] = new Point(10, 10); polygon[1] = new Point(100, 180); polygon[2] = new Point(200, 180); polygon[3] = new Point(200, 10); e.Graphics.DrawPolygon(pen, polygon);
13. Đố i t ượ ng Graphic  Ví dụ : // tạ o bút v ẽ Pen pen = new Pen(Color.Blue, 2); // vẽ hình bánh n ằ m trong hình ch ữ nh ậ t // từ đi ể m 0,0 có đ ộ r ộ ng 300, cao 200 // vẽ t ừ góc 0 đ ộ v ẽ ti ế p 90 đ ộ e.Graphics.DrawPie(pen, 0, 0, 300, 200, 0, 90);
14. Đố i t ượ ng Graphic  Ví dụ : // tạ o bút v ẽ Pen pen = new Pen(Color.Blue, 2); // tạ o các đi ể m c ủ a đ ườ ng cong Point start = new Point(100, 100); Point control1 = new Point(200, 50); Point control2 = new Point(350, 100); Point end = new Point(100, 300); // vẽ đ ườ ng cong e.Graphics.DrawBezier(pen, start, control1, control2, end);
15. Đố i t ượ ng Graphic  Ví dụ : // vẽ chu ỗ i t ạ i v ị trí 0,0 string text = "Hello world"; Font font = new Font("Arial", 16); e.Graphics.DrawString(text, font, Brushes.Blue, 0, 0); // vẽ hình t ạ i v ị trí 50,50 Bitmap image = new Bitmap("images/image1.jpg"); e.Graphics.DrawImage(image, 50, 50);
16. Đố i t ượ ng Graphic  Danh sách các hàm tô màu Hàm Ý nghĩa FillEllipse Tô hình ellipse FillPie Tô hình bánh FillPolygon Tô đa giác FillRectangle Tô hình chữ nh ậ t
17. Đố i t ượ ng Graphic  Ví dụ : // Create solid brush. SolidBrush blueBrush = new SolidBrush(Color.Blue); // Fill rectangle to screen. e.Graphics.FillRectangle(blueBrush, 0, 0, 200, 200);
18. Pen  Dùng Pen có sẵ n thông qua Pens ● Pens.AliceBlue ● Pens.Aqua ● Pens.Black ● Pens.Brown ●  Dùng Pen do tự t ạ o thông qua l ớ p Pen Pen pen = new Pen (Color.Red, 2)
19. Brush  Dùng Brush tự có ● Brushes.Lavendar ● Brushes.Ivory ● Brushes.LightBlue  TextureBrush: dùng ả nh image đ ể v ẽ  SolidBrush:Tạ o c ọ v ớ i màu đ ơ n s ắ c
20. Brush  Ví dụ : TextureBrush Bitmap image = new Bitmap("images/image1.jpg"); TextureBrush texture = new TextureBrush(image); e.Graphics.FillEllipse(texture, 100, 100, 400, 200);
21. Invalidate  Hành độ ng Invalidate dùng đ ể th ự c hi ệ n v ẽ l ạ i Form hoặ c 1 vùng nào đó trên Form.  Sử d ụ ng hàm : Invalidate private void timer1_Tick(object sender, EventArgs e) { this.Invalidate(); }
22. Tạ o form có hình d ạ ng b ấ t kỳ  Thuộ c tính Region : xác đ ị nh vùng hi ể n th ị c ủ a form  Lớ p GraphicsPath : dùng đ ể t ạ o đ ườ ng biên cho vùng hiể n th ị c ủ a form
23. Tạ o form có hình d ạ ng b ấ t kỳ  Ví dụ : // trong sự kiên form load // tạ o biên cho form có hình ellipse GraphicsPath path = new GraphicsPath(); path.AddEllipse(0, 0, 300, 300); // tạ o vùng hi ể n th ị c ủ a form d ự a trên biên this.Region = new Region(path);
24. Tạ o form có hình d ạ ng b ấ t kỳ
25. Tạ o form có hình d ạ ng b ấ t kỳ  Ví dụ : // tạ o biên cho form GraphicsPath path = new GraphicsPath(); path.AddArc(0, 0, 300, 300, 0, 180); path.AddLine(0, 150, 0, 0); path.AddLine(0, 0, 300, 0); path.AddLine(300, 0, 300, 150); // tạ o vùng hi ể n th ị c ủ a form d ự a trên biên this.Region = new Region(path);
26. Tạ o form có hình d ạ ng b ấ t kỳ
27. Kỹ thu ậ t ch ố ng Flicker  Khi sự ki ệ n Paint đ ượ c g ọ i, m ọ i đ ố i t ượ ng s ẽ đượ c v ẽ tr ự c ti ế p trên Device Context (đ ố i tượ ng Graphics). Đi ề u này s ẽ gây hi ệ n t ượ ng flicker trong 3 trườ ng h ợ p sau: ● Resize màn hình hoặ c user control ● Animation (Kĩ thuậ t Timer + Thay đ ổ i t ọ a đ ộ đ ố i tượ ng v ẽ ) ● Drag & Drop 1 đố i t ượ ng
28. Kỹ thu ậ t ch ố ng Flicker  Cách 1 : ● Trong sự ki ệ n Load c ủ a Form ta chèn đo ạ n code sau
29. Kỹ thu ậ t ch ố ng Flicker  Cách 2 : ● Override lạ i s ự ki ệ n v ẽ ả nh n ề n m ặ c đ ị nh c ủ a Window để không th ự c hi ệ n v ẽ ả nh n ề n vì nó s ẽ đượ c v ẽ trên MemDC ● Vẽ ả nh lên 1 Bitmap tr ướ c; sau đó m ớ i v ẽ vào DC ● Thay vì vẽ tr ự c ti ế p trên Device Context, ta s ẽ v ẽ vào 1 vùng nhớ đ ệ m (double buffer). Khi m ọ i thao tác vẽ trên vùng đ ệ m xong, ta m ớ i v ẽ vào Device Context
30. Kỹ thu ậ t ch ố ng Flicker
31. Kỹ thu ậ t ch ố ng Flicker
32. Kỹ thu ậ t ch ố ng Flicker
33. Thả o lu ậ n 02/15/11 Tr n Duy Hoàng - tdhoang@fit.hcmus.edu.vn 33/10 ầ