Đang tải... (xem toàn văn)
Chương 6 trình bày về đồ họa Graphics Device Interface, GDI+ namespace, các khái niệm, cấu trúc, vẽ chữ, System.Drawing namespace, tạo animation với GDI+, các cách thức biến đổi hệ trục. Mời các bạn cùng tham khảo nội dung chi tiết.
GDI+ (Graphic Device Interface) CuuDuongThanCong.com https://fb.com/tailieudientucntt Tổng quan • Thư viện giúp “vẽ” lên hình máy in mà không cần quan tâm đến cấu trúc phần cứng độc lập thiết bị • GDI+ bao gồm nhóm “dịch vụ” chính: – 2D vector graphics: cho phép tạo hình từ hình (primitive): đường thẳng, trịn, eclipse, đường cong,… – Imaging: làm việc với tập tin hình ảnh (bitmap, metafile) – Typography: vẽ chữ CuuDuongThanCong.com https://fb.com/tailieudientucntt GDI+ namespace • • • • • System.Drawing System.Drawing Drawing2D System.Drawing.Imaging System.Drawing.Printing System.Drawing.Text CuuDuongThanCong.com https://fb.com/tailieudientucntt Các khái niệm Bề mặt vẽ: Graphics (System.Drawing) - Lấy từ Paint event (form) - CreateGraphics (trong control) protected override void OnPaint(PaintEventArgs e) { Graphics g = e.Graphics; Pen pen = new Pen(Color.Red); g.DrawLine(pen,0,0,100,100); } CuuDuongThanCong.com https://fb.com/tailieudientucntt Các khái niệm private void button1_click(Object o, EventArgs e) { Graphics g = this.CreateGraphics(); Pen pen = new Pen(Color.Red,15); g.DrawLine(pen,0,0,100,100); g Dispose(); } Invalidate(); Invalidate(myRect); CuuDuongThanCong.com https://fb.com/tailieudientucntt Một số cấu trúc • • • • Color Point, PointF Rectangle, RectangleF Size, SizeF CuuDuongThanCong.com https://fb.com/tailieudientucntt Point, PointF X,Y +, -, ==, !=, IsEmpty Rectangle, RectangleF X,Y Top, Left, Botton, Right Height, Width Inflate(), IntersSec,() Union() Contain() Size, SizeF +, -, ==, != Height, Width Region “phần ruột” khn hình học Rectangle rect=new Rectangle(0,0,100,100) Region rgn= new Region(rect) CuuDuongThanCong.com https://fb.com/tailieudientucntt Một số enumeration • • • • • • • ContentAlignment FontStyle GraphicsUnit KnowColor RotateFlipType StringAlignment … CuuDuongThanCong.com https://fb.com/tailieudientucntt 2D vector graphics Pen & brush Pen, Pens, SystemPens Brush, Brushes, SystemBrushes, SolidBrushes, TextureBrushes, (System.Drawing.Drawing2D) HatchBrush, LinearGradientBrush, PathGradientBrush Lines, rectangle, polygon DrawLine DrawLines CuuDuongThanCong.com DrawRectangle FillRectangle DrawPolygon FillPolygon https://fb.com/tailieudientucntt 2D vector graphics ellipse, arc, cardinal spline, bezier spline DrawEllipse FillEllipse DrawPie FillPie CuuDuongThanCong.com DrawCurve DrawClosedCurve FillClosedCurve DrawBezier DrawBeziers DrawArc https://fb.com/tailieudientucntt Thứ tự phép biến đổi • Thứ tự phép biến đổi quan trọng, áp dụng thứ tự biến đổi khác tạo hiệu ứng khác g.RotateTransform(45) g.TranslateTransform(100,50) g.DrawRectangle(pen,-25,-25,50,50) x y y CuuDuongThanCong.com x https://fb.com/tailieudientucntt Thứ tự phép biến đổi • Thứ tự phép biến đổi quan trọng, áp dụng thứ tự biến đổi khác tạo hiệu ứng khác g.RotateTransform(45) g.TranslateTransform(100,50) g.DrawRectangle(pen,-25,-25,50,50) x 50 100 y x y CuuDuongThanCong.com https://fb.com/tailieudientucntt Biến đổi hệ trục ma trận • Tất phép biến đổi thực “bên dưới” ma trận • Tư tưởng chính: hình tạo từ điểm => thao tác biến đổi (dù phức tạp đến mấy) quy việc chuyển đổi tọa độ điểm • Ma trận: bảng chiều, ô số thực CuuDuongThanCong.com https://fb.com/tailieudientucntt Đại cương ma trận • Cộng ma trận, cộng phần tử tương ứng + CuuDuongThanCong.com = 11 13 https://fb.com/tailieudientucntt i cng v ma trn ã Nhõn ma trn: (mìn) nhõn vi (nìp) m ì p ã Giỏ tr (i,j) = tích vơ hướng (hàng i A) (cột j B) • Tích vơ hướng của: – (a1,a2,a3,…,an) (b1,b2,b3,…,bn) = (a1*b1 + a2*b2 + a3*b3 + …+anbn) 11 × = C(1,1) = (2,3) (1,3) = 2*1 + 3*3 = 11 CuuDuongThanCong.com https://fb.com/tailieudientucntt Đại cương v ma trn ã Nhõn ma trn: (mìn) nhõn vi (nìp) m ì p ã Giỏ tr (i,j) = tích vơ hướng (hàng i A) (cột j B) • Tích vơ hướng của: – (a1,a2,a3,…,an) (b1,b2,b3,…,bn) = (a1*b1 + a2*b2 + a3*b3 + …+anbn) 11 16 × = C(1,2) = (2,3) (2,4) = 2*2 + 3*4 = 16 CuuDuongThanCong.com https://fb.com/tailieudientucntt Đại cương ma trn ã Nhõn ma trn: (mìn) nhõn vi (nìp) m ì p ã Giỏ tr (i,j) = tớch vô hướng (hàng i A) (cột j B) • Tích vơ hướng của: – (a1,a2,a3,…,an) (b1,b2,b3,…,bn) = (a1*b1 + a2*b2 + a3*b3 + …+anbn) × = 11 16 19 C(2,1) = (4,5) (1,3) = 4*1 + 5*3 = 19 CuuDuongThanCong.com https://fb.com/tailieudientucntt Biến đổi tọa độ điểm ma trận • Một điểm ma trn 1ì2 (P) ã Phộp bin i l ma trn: 2ì2 (T) ã Bin i: P = P ì T 10 × 0 -1 = -10 Lật (flip) theo chiều đứng CuuDuongThanCong.com https://fb.com/tailieudientucntt Biến đổi tọa độ điểm ma trận • Một điểm ma trn 1ì2 (P) ã Phộp bin i l ma trn: 2ì2 (T) ã Bin i: P = P ì T 10 × -1 = -10 Xoay 900 CuuDuongThanCong.com https://fb.com/tailieudientucntt Biến đổi tọa độ điểm ma trn ã Mt im l ma trn 1ì2 (P) • Phép biến đổi ma trận: 2×2 (T) • Biến đổi: P’ = P × T × 0 = Dãn trục x lần CuuDuongThanCong.com https://fb.com/tailieudientucntt Biến đổi tọa độ điểm ma trận • Vấn đề: khơng thể biểu diễn phép translate (dịch chuyển) điểm nhân ma trận • Giải quyết: – Mở rộng ma trận biến đổi thành 3×3, thêm hàng để chứa ma trận transalate, thêm cột dummy (0,0,1) – Thêm thành phần “rỗng” (dummy) có giá trị vào tọa độ điểm x y × CuuDuongThanCong.com 0 0 0 10 20 = x+10 y+20 https://fb.com/tailieudientucntt Biến đổi tọa độ điểm ma trận • Các phép biến đổi khác bảo toàn x x y y 1 × × CuuDuongThanCong.com -1 0 0 = -y x 1 0 -1 0 = x -y https://fb.com/tailieudientucntt Biến đổi tọa độ điểm ma trận • Tại dùng nhân ma trận mà khơng tính tốn trực tiếp? • Ma trận có khả “ghép” nhiều phép biến đổi làm • Để làm 100 phép biến đổi lúc, cần tính tích 100 ma trận biến đổi, sau nhân ma trận điểm ma trận tích • Như phải nhân nhiều lần???? • Đừng qn: hình có nhiều điểm CuuDuongThanCong.com https://fb.com/tailieudientucntt Matrix class • Lớp Matrix GDI+ có sẵn tất phương thức cần thiết để thao tác ma trận biến đổi – – – – – – Multiply: nhân ma trận biến đổi với ma trận Scale: nhân ma trận dãn với ma trận Shear: nhân ma trận kéo với ma trận Translate: nhân ma trận dịch chuyển với ma trận Rotate: nhân ma trận xoay với ma trận RotateAt: nhân ma trận xoay quanh tâm định trước với ma trận – Reset: đặt ma trận ma trận đơn vị • Sau tính toán ma trận biến đổi, “áp dụng” ma trận bằng: – Graphics.Transform = CuuDuongThanCong.com https://fb.com/tailieudientucntt Biến đổi cục • Các biến đổi hệ trục có tính tồn cục (có tác dụng tất đối tượng) Để áp dụng cục đối tượng, dùng GraphicsPath.Transform(matrix) • Biến đổi cục thường dùng để tạo chuyển động cục thành phần đối tượng Chẳng hạn, nòng súng xe tăng CuuDuongThanCong.com https://fb.com/tailieudientucntt ... https://fb.com/tailieudientucntt Giải nháng hình double-buffer Form.DoubleBuffered = true Mọi thao tác vẽ diễn back-buffer Khi hoàn tất, nội dung back-buffer hoán chuyển (flip) lên front-buffer (form) * Thao tác flip... trục World coordinate – hệ trục ảo – sở lệnh Draw, Fill 100 x (-2 5 ,-2 5) (0,0) 50 x g.TranslateTransform(100,50) g.DrawRectangle(pen ,-2 5 ,-2 5,50,50) y y CuuDuongThanCong.com https://fb.com/tailieudientucntt... điểm ma trận • Các phép biến đổi khác bảo toàn x x y y 1 × × CuuDuongThanCong.com -1 0 0 = -y x 1 0 -1 0 = x -y https://fb.com/tailieudientucntt Biến đổi tọa độ điểm ma trận • Tại dùng nhân ma