›
›

Bài giảng Lập trình hướng đối tượng - Chương 7: Tương tác với người dùng trong ứng dụng C# - Đại học Bách khoa TP.HCM

pdf 21 trang ngocly 3200
Download
Bạn đang xem 20 trang mẫu của tài liệu "Bài giảng Lập trình hướng đối tượng - Chương 7: Tương tác với người dùng trong ứng dụng C# - Đại học Bách khoa TP.HCM", để tải tài liệu gốc về máy bạn click vào nút DOWNLOAD ở trên

Tài liệu đính kèm:

  • pdfbai_giang_lap_trinh_huong_doi_tuong_chuong_7_tuong_tac_voi_n.pdf

Nội dung text: Bài giảng Lập trình hướng đối tượng - Chương 7: Tương tác với người dùng trong ứng dụng C# - Đại học Bách khoa TP.HCM

  1. Chương 7 Tương tác vớingười dùng trong ứng dụng C# 7.0 Dẫnnhập 7.1 Tổng quát về tương tác giữangườidùng& chương trình 7.2 Đốitượng vẽ và cơ chế vẽ nội dung 7.3 Xuấtchuỗivănbản 7.4 Xuất ảnh bitmap 7.5 Xuấthình₫ồ họatoánhọc 7.6 Thí dụ viết ứng dụng vẽ₫ốitượng phứchợp 7.7 Xây dựng ₫ốitượng giao diệncóhìnhdạng tùy ý 7.8 Kếtchương Khoa Khoa học& Kỹ thuật Máy tính Môn : Lậptrìnhhướng ₫ốitượng Trường ĐH Bách Khoa Tp.HCM Chương 7 : Tương tác vớingười dùng trong ứng dụng C# © 2010 Slide 1 7.0 Dẫnnhập ‰ Chương này giớithiệucáchthứctương tác giữangườidùngvà chương trình ₫ể nhập/xuấtdữ liệu. ‰ Chương này cũng giớithiệucác₫ốitượng giao diệncùngcáctác vụ xuấtdữ liệudạng chuỗi, dạng bitmap, dạng hình ₫ồ họa toán học. Kếthợp3 loạidữ liệu này, ta có thể tạokếtxuấtbấtkỳ. Khoa Khoa học& Kỹ thuật Máy tính Môn : Lậptrìnhhướng ₫ốitượng Trường ĐH Bách Khoa Tp.HCM Chương 7 : Tương tác vớingười dùng trong ứng dụng C# © 2010 Slide 2
  2. 7.1 Tổng quát về tương tác người dùng/chương trình ‰ Trong lúc chương trình chạy, nó thường phảitương tác vớingười dùng. Sự tương tác gồm2 hoạt ₫ộng chính : ƒ chờ nhậndữ liệu do người dùng cung cấphay chờ nhậnlệnh củangười dùng ₫ể thực thi 1 chứcnăng nào ₫ó. ƒ hiểnthị thông báo và/hoặckếtquả tính toán ra màn hình/máy in ₫ể người dùng biếtvàsử dụng. ‰ Sự tương tác giữangười dùng và máy tính ₫ượcthựchiệnthông qua các thiếtbị nhập/xuất(thiếtbị I/O - input/output) như bàn phím/chuột ₫ể nhậpdữ liệuhay lệnh, màn hình/máy in ₫ể xuấtkết quả hay thông báo ‰ Hiệncóhàngtrăm hãng chế tạothiếtbị I/O, mỗihãngchế tạorất nhiều model củacùng1 thiếtbị (td. hãng HP chế rất nhiều model máy in phun mực, máy in laser, ). Mỗi model thiếtbị củatừng hãngcónhững tính chấtvật lý riêng và khác với các model khác. Khoa Khoa học& Kỹ thuật Máy tính Môn : Lậptrìnhhướng ₫ốitượng Trường ĐH Bách Khoa Tp.HCM Chương 7 : Tương tác vớingười dùng trong ứng dụng C# © 2010 Slide 3 7.1 Tổng quát về tương tác người dùng/chương trình ‰ Để giúp ngườilậptrìnhtruyxuấtcácthiếtbị I/O dễ dàng, ₫ộclập với tính chấtphầncứng củathiếtbị, HĐH Windows và VC# ₫ãche dấumọitínhchấtphầncứng củacácthiếtbị và cung cấpcho ngườilập trình 1 giao tiếpsử dụng duy nhất, ₫ộclậpvớithiếtbị : người dùng sẽ tương tác vớichương trình thông qua các ₫ốitượng giao diện: ƒ người dùng ra lệnh bằng cách kích hoạtsự kiệnxác₫ịnh của1 ₫ốitượng giao diện. Thí dụ click chuột vào button "Bắt ₫ầu giải" ₫ể ra lệnh chương trình giải dùm phương trình bậc2 có3 tham số a, b, c ₫ãnhập. ƒ nhậpgiátrị₫úng/sai thông qua chọn/cấmchọn RadioButton hay checkbox. Khoa Khoa học& Kỹ thuật Máy tính Môn : Lậptrìnhhướng ₫ốitượng Trường ĐH Bách Khoa Tp.HCM Chương 7 : Tương tác vớingười dùng trong ứng dụng C# © 2010 Slide 4
  3. 7.1 Tổng quát về tương tác người dùng/chương trình ƒ nhậpchọnlựa 1/n thông qua chọnRadioButtontương ứng trong GroupBox, hay chọnmụctương ứng trong Listbox, ComboBox. ƒ nhậpsố nguyên, số thực, chuỗi thông qua TextBox ƒ xuấtkếtquả ra màn hình thông qua các ₫ốitượng RadioButton, Checkbox, TextBox, ListBox, ComboxBox, TreeView ‰ Trong trường hợpcầnxuấtkếtquả phứctạpbấtkỳ, ta xem nó như là tậphợpnhiềuchuỗivănbản, nhiềuphầntửảnh bitmap, nhiều phầntử₫ồhọa toán họcnhư hình chữ nhật, hình tròn, → Xuất kếtquả phứctạplàquátrìnhlặpvẽ từng phầntử cấu thành kết quả phứctạp. Khoa Khoa học& Kỹ thuật Máy tính Môn : Lậptrìnhhướng ₫ốitượng Trường ĐH Bách Khoa Tp.HCM Chương 7 : Tương tác vớingười dùng trong ứng dụng C# © 2010 Slide 5 7.2 Đốitượng vẽ và cơ chế vẽ nội dung ‰ Các ₫ốitượng Form, PictureBox, Printer cho phép vẽ nộidung bấtkỳ lên chúng. ‰ Mỗilầncầnvẽ lạinội dung của ₫ốitượng (lúc bắt ₫ầuhiểnthị, lúc thay ₫ổivị trí, kích thướccủa ₫ốitượng), máy sẽ tạosự kiện Paint, sự kiện này sẽ kích hoạt hàm xử lý tương ứng của ₫ối tượng. Như vậy, nếumuốnvẽ thông tin chi tiếtlên₫ốitượng, ngườilập trình phải ₫ịnh nghĩa hàm xử lý sự kiệnPaint của ₫ối tượng và hiệnthựcthuậtgiải ₫ể vẽ chi tiết thông tin lên ₫ốitượng. ‰ Khi cầnthiết, ngườilậptrìnhcóthể gọitácvụ Refresh() của ₫ối tượng ₫ể nhờ máy tạo dùm sự kiện Paint hầuvẽ lại ₫ốitượng. Khoa Khoa học& Kỹ thuật Máy tính Môn : Lậptrìnhhướng ₫ốitượng Trường ĐH Bách Khoa Tp.HCM Chương 7 : Tương tác vớingười dùng trong ứng dụng C# © 2010 Slide 6
  4. 7.2 Đốitượng vẽ và cơ chế vẽ nội dung ‰ Template của hàm xử lý sự kiện Paint của ₫ốitượng như sau : private void Form1_Paint(object sender, PaintEventArgs e) { //xác ₫ịnh ₫ốitượng mụctiêu Control control = (Control)sender; //thay ₫ổikíchthước, vị trí nếucần //xác ₫ịnh ₫ốitượng graphics (₫ốitượng vẽ) của ₫ốitượng Graphics g = e.Graphics; //gọicáctácvụ vẽ của ₫ốitượng vẽ như DrawImage, //DrawString, DrawLine, ₫ể xuất các thông tin bitmap, //chuỗivănbản, hình ₫ồ họa toán học. } Khoa Khoa học& Kỹ thuật Máy tính Môn : Lậptrìnhhướng ₫ốitượng Trường ĐH Bách Khoa Tp.HCM Chương 7 : Tương tác vớingười dùng trong ứng dụng C# © 2010 Slide 7 7.3 Xuấtchuỗivănbản ‰ Đốitượng vẽ (graphics) cung cấpkhoảng 70 tác vụ vẽ khác nhau, mỗitácvụ gồmnhiềubiếnthể (overloaded) ₫ể giúp ta ₫iều khiểnvẽ nội dung dễ dàng, tiệnlợi. Ở₫ây chúng ta chỉ giớithiệu 1 số tác vụ phổ dụng. ‰ Tác vụ DrawString cho phép xuấtchuỗivănbản theo ₫ịnh dạng xác ₫ịnh. Nó có nhiềubiếnthể, biếnthể khá mạnh và dùng phổ biếncó₫ặctả như sau : public void DrawString ( string s, //chuỗicầnxuất Font font, //các tính chất font chữ cần dùng ₫ể vẽ Brush brush, //màu vẽ chuỗi float x, //toạ₫ộx của ₫iểm canh lề chuỗi float y, //tọa ₫ộ y của ₫iểm canh lề chuỗi StringFormat format); //thuộc tính ₫iềukhiểnvẽ chuỗi Khoa Khoa học& Kỹ thuật Máy tính Môn : Lậptrìnhhướng ₫ốitượng Trường ĐH Bách Khoa Tp.HCM Chương 7 : Tương tác vớingười dùng trong ứng dụng C# © 2010 Slide 8
  5. 7.3 Xuấtchuỗivănbản ‰ Thí dụ ta có biếnnow miêutả thông tin thời ₫iểmhiện hành, ta có thể viết ₫oạn code sau ₫ể rút trích thông tin từ biến now và xuất thông tin giờ/phút/giây ra giữaform ứng dụng : //tạochuỗimiêutả giờ/phút/giây hiệnhành String buf = "" + now.Hour + ":" + now.Minute + ":" + now.Second; //tạo ₫ốitượng font chữ cần dùng Font myFont = new Font("Helvetica", 11); //tạobiếnmiêutả chế₫ộcanh giữakhixuấtchuỗi StringFormat format1 = new StringFormat(StringFormatFlags.NoClip); format1.Alignment = StringAlignment.Center; //xuấtchuỗimiêutả giờ/phút/giây g.DrawString(buf, myFont, System.Drawing.Brushes.Blue, xo, rec.Height - 35, format1); Khoa Khoa học& Kỹ thuật Máy tính Môn : Lậptrìnhhướng ₫ốitượng Trường ĐH Bách Khoa Tp.HCM Chương 7 : Tương tác vớingười dùng trong ứng dụng C# © 2010 Slide 9 7.4 Xuất ảnh bitmap ‰ Tác vụ DrawImage cho phép vẽ bitmap từ nguồncósẵn, thí dụ từ file bitmap. Nó có nhiềubiếnthể, biếnthể khá mạnh và dùng phổ biếncó₫ặctả như sau : public void DrawImage ( Image image, //₫ốitượng chứa ảnh bitmap gốc Rectangle destRect, //vùng chữ nhậtchứakếtquả //trong ₫ốitượng vẽ int srcX, //tọa ₫ộ x của vùng ảnh gốc int srcY, //tọa ₫ộ y của vùng ảnh gốc int srcWidth, //₫ộ rộng vùng ảnh gốccầnvẽ int srcHeight, //₫ộ cao vùng ảnh gốccầnvẽ GraphicsUnit srcUnit, //₫ơnvị₫olường ₫ược dùng ImageAttributes imageAttr) //cách thứcxử lý từng pixel //ảnh gốckhivẽ Khoa Khoa học& Kỹ thuật Máy tính Môn : Lậptrìnhhướng ₫ốitượng Trường ĐH Bách Khoa Tp.HCM Chương 7 : Tương tác vớingười dùng trong ứng dụng C# © 2010 Slide 10
  6. 7.4 Xuất ảnh bitmap srcX, srcY, srcWidth, srcHeight destRect Image Khoa Khoa học& Kỹ thuật Máy tính Môn : Lậptrìnhhướng ₫ốitượng Trường ĐH Bách Khoa Tp.HCM Chương 7 : Tương tác vớingười dùng trong ứng dụng C# © 2010 Slide 11 7.5 Xuấthình₫ồ họa-Tácvụ DrawLine ‰ Tác vụ DrawLine cho phép vẽ₫oạnthẳng ₫ượcxác₫ịnh bởi2 ₫ỉnh. Nó có nhiềubiếnthể, biếnthể khá mạnh và dùng phổ biến có ₫ặctả như sau : public void DrawLine ( Pen pen, //miêu tả nét, màu ₫ường vẽ int x1, //tọa ₫ộ x của ₫iểm ₫ầu int y1, //tọa ₫ộ y của ₫iểm ₫ầu int x2, //tọa ₫ộ x của ₫iểmcuối int y2 //tọa ₫ộ y của ₫iểmcuối ) ‰ Trướckhigọi DrawLine, phảitạo ₫ốitượng Pen miêu tả nét, màu của ₫ường vẽ : //tạo pen với màu Blue, nét vẽ 2 pixel Pen pen = new Pen(Color.FromArgb(0,0, 255), 2); Khoa Khoa học& Kỹ thuật Máy tính Môn : Lậptrìnhhướng ₫ốitượng Trường ĐH Bách Khoa Tp.HCM Chương 7 : Tương tác vớingười dùng trong ứng dụng C# © 2010 Slide 12
  7. 7.5 Xuấthình₫ồ họa-Tácvụ DrawLines ‰ Tác vụ DrawLines cho phép vẽ nhiều ₫oạnthẳng liên tiếp nhau ₫ượcxác₫ịnh bởi danh sách các ₫ỉnh. Nó có nhiềubiếnthể, biến thể khá mạnh và dùng phổ biếncó₫ặctả như sau : public void DrawLine ( Pen pen, //miêu tả nét, màu ₫ường vẽ Point[] points) //danh sách các ₫ỉnh ) ‰ Trướckhigọi DrawLines, phảitạo ₫ốitượng Pen miêu tả nét, màu của ₫ường vẽ : //tạo pen với màu Blue, nét vẽ 2 pixel Pen pen = new Pen(Color.FromArgb(0,0, 255), 2); Khoa Khoa học& Kỹ thuật Máy tính Môn : Lậptrìnhhướng ₫ốitượng Trường ĐH Bách Khoa Tp.HCM Chương 7 : Tương tác vớingười dùng trong ứng dụng C# © 2010 Slide 13 7.5 Xuấthình₫ồ họa-Tácvụ DrawRectangle ‰ Tác vụ DrawRectangle cho phép vẽ hình chữ nhật ₫ượcxác₫ịnh bởi2 ₫ỉnh chéo nhau. Nó có nhiềubiếnthể, biếnthể khá mạnh và dùng phổ biếncó₫ặctả như sau : public void DrawRectangle ( Pen pen, //miêu tả nét, màu ₫ường vẽ int x1, //tọa ₫ộ x của ₫iểm ₫ầu int y1, //tọa ₫ộ y của ₫iểm ₫ầu int x2, //tọa ₫ộ x của ₫iểmcuối int y2) //tọa ₫ộ y của ₫iểmcuối ‰ Lưu ý tác vụ DrawRectangle chỉ vẽ ₫ường biên, muốntônềnhình chữ nhật, ta cầngọitácvụ FillRectangle (₫ặctả giống như tác vụ DrawRectangle), chỉ khác là tham số₫ầulà₫ốitượng mẫutô: //tạo brush vớimàu₫ỏ, tô ₫ặc Brush brush = new SolidBrush(Color.FromArgb(255, 0, 0)); Khoa Khoa học& Kỹ thuật Máy tính Môn : Lậptrìnhhướng ₫ốitượng Trường ĐH Bách Khoa Tp.HCM Chương 7 : Tương tác vớingười dùng trong ứng dụng C# © 2010 Slide 14
  8. 7.5 Xuấthình₫ồ họa-Tácvụ DrawEllipse ‰ Tác vụ DrawEllipse cho phép vẽ hình ellipse ₫ượcxác₫ịnh bởi hình chữ nhật bao quanh nó. Nó có nhiềubiếnthể, biếnthể khá mạnh và dùng phổ biếncó₫ặctả như sau : public void DrawEllipse ( Pen pen, //miêu tả nét, màu ₫ường vẽ int x1, //tọa ₫ộ x của ₫iểm ₫ầu int y1, //tọa ₫ộ y của ₫iểm ₫ầu int x2, //tọa ₫ộ x của ₫iểmcuối int y2) //tọa ₫ộ y của ₫iểmcuối ‰ Lưuý tácvụ DrawEllipse chỉ vẽ ₫ường biên, muốntônềnhình ellipse, ta cầngọitácvụ FillEllipse (₫ặctả giống như tác vụ DrawEllipse), chỉ khác là tham số₫ầulà₫ốitượng mẫutô: //tạo brush vớimàu₫ỏ, tô ₫ặc Brush brush = new SolidBrush(Color.FromArgb(255, 0, 0)); Khoa Khoa học& Kỹ thuật Máy tính Môn : Lậptrìnhhướng ₫ốitượng Trường ĐH Bách Khoa Tp.HCM Chương 7 : Tương tác vớingười dùng trong ứng dụng C# © 2010 Slide 15 7.5 Xuấthình₫ồ họa-Tácvụ DrawArc ‰ Tác vụ DrawArc cho phép vẽ 1 phần ₫ường ellipse ₫ượcxác₫ịnh bởihìnhchữ nhật bao quanh nó. Nó có nhiềubiếnthể, biếnthể khá mạnh và dùng phổ biếncó₫ặctả như sau : public void DrawArc ( Pen pen, //miêu tả nét, màu ₫ường vẽ Rectangle rect, //miêu tả hình chữ nhật ngoạitiếp float startAngle, //góc bắt ₫ầu (theo chiềukim₫ồng hồ) float sweepAngle ) //₫ộ lớnphần ₫ường ellipse cầnvẽ ‰ Lưuý tácvụ DrawArc chỉ vẽ ₫ường biên, không có tác vụ FillArc ₫ể tô nền. Khoa Khoa học& Kỹ thuật Máy tính Môn : Lậptrìnhhướng ₫ốitượng Trường ĐH Bách Khoa Tp.HCM Chương 7 : Tương tác vớingười dùng trong ứng dụng C# © 2010 Slide 16
  9. 7.5 Xuấthình₫ồ họa-Tácvụ DrawPie ‰ Tác vụ DrawPie cho phép vẽ 1 phần bánh ellipse ₫ượcxác₫ịnh bởihìnhchữ nhật bao quanh nó. Nó có nhiềubiếnthể, biếnthể khá mạnh và dùng phổ biếncó₫ặctả như sau : public void DrawPie ( Pen pen, //miêu tả nét, màu ₫ường vẽ Rectangle rect, //miêu tả hình chữ nhật ngoạitiếp float startAngle, //góc bắt ₫ầu (theo chiềukim₫ồng hồ) float sweepAngle ) //₫ộ lớnphần bánh ellipse cầnvẽ ‰ Lưuý tácvụ DrawPie chỉ vẽ₫ường biên, muốntônền bánh ellipse, ta cầngọitácvụ FillPie (₫ặctả giống như tác vụ DrawPie), chỉ khác là tham số₫ầulà₫ốitượng mẫutô: //tạo brush vớimàu₫ỏ, tô ₫ặc Brush brush = new SolidBrush(Color.FromArgb(255, 0, 0)); Khoa Khoa học& Kỹ thuật Máy tính Môn : Lậptrìnhhướng ₫ốitượng Trường ĐH Bách Khoa Tp.HCM Chương 7 : Tương tác vớingười dùng trong ứng dụng C# © 2010 Slide 17 7.5 Xuấthình₫ồ họa-Tácvụ DrawPolygon ‰ Tác vụ DrawPolygon cho phép vẽ hình nhiềucạnh khép kín. Nó có nhiềubiếnthể, biếnthể khá mạnh và dùng phổ biếncó₫ặctả như sau : public void DrawPolygon ( Pen pen, //miêu tả nét, màu ₫ường vẽ Point[] points) //danh sách các ₫ỉnh của polygon ‰ Lưuý tácvụ DrawPolygon chỉ vẽ ₫ường biên, muốntônềnhình polygon, ta cầngọitácvụ FillPolygon (₫ặctả giống như tác vụ DrawPolygon), chỉ khác là tham số₫ầulà₫ốitượng mẫutô: //tạo brush vớimàu₫ỏ, tô ₫ặc Brush brush = new SolidBrush(Color.FromArgb(255, 0, 0)); Khoa Khoa học& Kỹ thuật Máy tính Môn : Lậptrìnhhướng ₫ốitượng Trường ĐH Bách Khoa Tp.HCM Chương 7 : Tương tác vớingười dùng trong ứng dụng C# © 2010 Slide 18
  10. 7.5 Xuấthình₫ồ họa-Tácvụ DrawCurve ‰ Tác vụ DrawCurve cho phép vẽ cong trơn xuyên qua nhiều ₫iểm theo phép tension xác ₫ịnh. Nó có nhiềubiếnthể, biếnthể khá mạnh và dùng phổ biếncó₫ặctả như sau : public void DrawCurve ( Pen pen, //miêu tả nét, màu ₫ường vẽ Point[] points //danh sách các ₫ỉnh của polygon int offset, //vị trí ₫iểmbắt ₫ầuvẽ trong danh sách int numberOfSegments, //số₫oạncầnvẽ float tension //phép tension ₫ược dùng ) Khoa Khoa học& Kỹ thuật Máy tính Môn : Lậptrìnhhướng ₫ốitượng Trường ĐH Bách Khoa Tp.HCM Chương 7 : Tương tác vớingười dùng trong ứng dụng C# © 2010 Slide 19 7.5 Xuấthình₫ồ họa-Tácvụ DrawCurve private void Form1_Paint(object sender, PaintEventArgs e) { //tạo 2 bút vẽ cho ₫ường thẳng và cong Pen redPen = new Pen(Color.Red, 3); Pen greenPen = new Pen(Color.Green, 3); //tạocác₫ỉnh Point point1 = new Point(10, 100), point2 = new Point(40, 75); Point point3 = new Point(70, 125), point4 = new Point(100, 50); Point point5 = new Point(130, 180), point6 = new Point(160, 40); Point point7 = new Point(200, 100); Point[] curvePoints = { point1, point2, point3, point4, point5, point6, point7 }; //vẽ các đoạnthẳng. e.Graphics.DrawLines(redPen, curvePoints); //thiếtlập offset, sốđoạncong, và tension. int offset = 0, numSegments = 6; float tension = 0.5F; //vẽđường cong trơnqua cácđỉnh. e.Graphics.DrawCurve(greenPen, curvePoints, offset, numSegments, tension); } Khoa Khoa học& Kỹ thuật Máy tính Môn : Lậptrìnhhướng ₫ốitượng Trường ĐH Bách Khoa Tp.HCM Chương 7 : Tương tác vớingười dùng trong ứng dụng C# © 2010 Slide 20
  11. 7.6 Thí dụ viết ứng dụng vẽ₫ốitượng phứchợp ‰ Để củng cố kiếnthứcvề các tác vụ xuấtnội dung tổng hợpchứa chuỗivănbản, ảnh bitmap và các hình ₫ồ họa toán học, chúng ta hãy viết ứng dụng giả lập ₫ồng hồ treo tường có 3 kim giờ/phút/giây và có quả lắc theo góc 20 ₫ộ. ‰ Phân tích thông tin cầnxuất, ta thấycócác thành phần: ƒ hình bitmap miêu tả khung ₫ồng ₫ồ, bảnsố ₫ồng hồ. ƒ 4 ₫oạnthẳng miêu tả 3 kim giờ/phút/giây và cầnlắc. Vòng tròn nhỏ miêu tả quả lắc. Các hình toán học này thay ₫ổivị trí theo thời gian. ƒ chuỗihiểnthị giờ/phút/giây. Khoa Khoa học& Kỹ thuật Máy tính Môn : Lậptrìnhhướng ₫ốitượng Trường ĐH Bách Khoa Tp.HCM Chương 7 : Tương tác vớingười dùng trong ứng dụng C# © 2010 Slide 21 7.6 Thí dụ viết ứng dụng vẽ₫ốitượng phứchợp ‰ Dùng ₫ốitượng Timer vớithờigian₫ếmkhoảng 40ms, mỗilần ₫ếmxongnótạosự kiệnPaint ₫ể kích hoạt hàm vẽ lại Form ứng dụng. Như vậymỗigiâytavẽ lạikhoảng 25 lần, tốc ₫ộ như thế này là vừa ₫ủ ₫ể người dùng cảmthấy ₫ồng hồ gầnnhư thật. ‰ Qui trình ₫iểnhình₫ể xây dựng ứng dụng ₫ồng hồ quả lắcgồm các bướcsau₫ây : 1. Chạy VS .Net, chọn menu File.New.Project ₫ể hiểnthị cửasổ New Project. 2. Mở rộng mục Visual C# trong TreeView "Project Types", chọn mục Windows, chọn icon "Windows Application" trong listbox "Templates" bên phải, thiếtlậpthư mụcchứa Project trong listbox "Location", nhập tên Project vào textbox "Name:" (td. VCDongho), click button OK ₫ể tạo Project theo các thông số₫ãkhaibáo. Khoa Khoa học& Kỹ thuật Máy tính Môn : Lậptrìnhhướng ₫ốitượng Trường ĐH Bách Khoa Tp.HCM Chương 7 : Tương tác vớingười dùng trong ứng dụng C# © 2010 Slide 22
  12. 7.6 Thí dụ viết ứng dụng vẽ₫ốitượng phứchợp 3. Form ₫ầutiêncủa ứng dụng ₫ãhiểnthị trong cửasổ thiếtkế, lúc này form hoàn toàn trống, chưachứa ₫ốitượng giao diện nào. 4. Nếucửasổ ToolBox chưahiểnthị, chọn menu View.Toolbox ₫ể hiểnthị nó (thường nằm ở bên trái màn hình). Duyệttìmphầntử Timer (trong nhóm Comopents hay nhóm All Window Forms), chọn nó, dờichuột vào trong form (ở vị trí nào cũng ₫ượcvì₫ối tượng này không ₫ượchiểnthị) và vẽ nó vớikíchthướctùyý. Hiệu chỉnh thuộc tính (Name) = myTimer. 5. Chọn ₫ốitượng myTimer, cửasổ thuộctínhcủanósẽ hiểnthị, click icon ₫ể hiểnthị danh sách các sự kiệncủa ₫ốitượng, ấn kép chuột vào comboBox bên phảisự kiện Tick ₫ể máy tạotự ₫ộng hàm xử lý cho sự kiện này. Khoa Khoa học& Kỹ thuật Máy tính Môn : Lậptrìnhhướng ₫ốitượng Trường ĐH Bách Khoa Tp.HCM Chương 7 : Tương tác vớingười dùng trong ứng dụng C# © 2010 Slide 23 7.6 Thí dụ viết ứng dụng vẽ₫ốitượng phứchợp 6. Viết code cụ thể cho hàm như sau : //hàm phụcvụ Timer private void myTimer_Tick(object sender, EventArgs e) { myTimer.Stop(); //dừng ₫ếmtimer this.Refresh(); //vẽ lại form theo giờ hiệnhành } 7. Ấnphảichuộtvàomục Form1.cs trong cửasổ Solution Explorer rồichọn option View Designer ₫ể hiểnthị lạicửasổ thiếtkế Form. Chọn Form, cửasổ thuộctínhcủanósẽ hiểnthị, click icon ₫ể hiểnthị danh sách các sự kiệncủa Form, duyệttìmsự kiện Paint, ấn kép chuột vào comboBox bên phảisự kiện Paint ₫ể máy tạotự ₫ộng hàm xử lý cho sự kiệnnày. Viết code cụ thể cho hàm như sau : Khoa Khoa học& Kỹ thuật Máy tính Môn : Lậptrìnhhướng ₫ốitượng Trường ĐH Bách Khoa Tp.HCM Chương 7 : Tương tác vớingười dùng trong ứng dụng C# © 2010 Slide 24
  13. 7.6 Thí dụ viết ứng dụng vẽ₫ốitượng phứchợp private void Form1_Paint(object sender, PaintEventArgs e) { //tạo ₫ốitượng image gốc Image bgimg = Image.FromFile("c:\\bgclock.bmp"); //xác ₫ịnh ₫ốitượng mụctiêu Control control = (Control)sender; //thay ₫ổikíchthước form theo ảnh khung ₫ồng hồ control.Size = new Size(bgimg.Width + 10 + 8, bgimg.Height + 10 + 35); //xác ₫ịnh ₫ốitượng graphics (₫ốitượng vẽ) của ₫ốitượng Graphics g = e.Graphics; //vẽ bitmap miêu tả khung ₫ồng hồ g.DrawImage(bgimg, 5,5); //₫ịnh nghĩa các biếncần dùng Rectangle rec = control.DisplayRectangle; Pen hPen; Khoa Khoa học& Kỹ thuật Máy tính Môn : Lậptrìnhhướng ₫ốitượng Trường ĐH Bách Khoa Tp.HCM Chương 7 : Tương tác vớingười dùng trong ứng dụng C# © 2010 Slide 25 7.6 Thí dụ viết ứng dụng vẽ₫ốitượng phứchợp Brush hBrush; int xo,yo,rql,rh,rm, rs; int x, y; //thiếtlậptâm₫ồng hồ xo = 76; yo = 74; //thiếtlập bán kính cầnlắc, kim giờ/phút/giây rql = 140; rh = 50; rm = 55; rs = 60; //tạo pen ₫ể vẽ cầnlắc hPen = new Pen (Color.FromArgb(0,0, 255),2); //tạobrush ₫ể tô nềnquả lắc hBrush = new SolidBrush(Color.FromArgb(255, 0, 0)); //xác ₫ịnh giờ/phút/giây hiện hành DateTime now = DateTime.Now; Khoa Khoa học& Kỹ thuật Máy tính Môn : Lậptrìnhhướng ₫ốitượng Trường ĐH Bách Khoa Tp.HCM Chương 7 : Tương tác vớingười dùng trong ứng dụng C# © 2010 Slide 26
  14. 7.6 Thí dụ viết ứng dụng vẽ₫ốitượng phứchợp //tính góc củacầnlắc (góc quay max. là 40 ₫ộ) double goc = 80*now.Millisecond/1000; if (goc < 40) goc = goc +70; else goc = 150-goc; //₫ổi góc cầnlắctừ₫ộra radian goc = goc*3.1416/180; //xác ₫ịnh tâm quả lắc(₫iểmcònlạicủacầnlắc) x = xo+(int)(rql*Math.Cos(goc)); y = yo+(int)(rql*Math.Sin(goc)); //vẽ cầnlắc g.DrawLine(hPen, xo, yo, x, y); //vẽ quả lắc g.FillEllipse(hBrush, x-3, y-3, 5, 5); g.DrawEllipse(hPen,x-4,y-4,7,7); Khoa Khoa học& Kỹ thuật Máy tính Môn : Lậptrìnhhướng ₫ốitượng Trường ĐH Bách Khoa Tp.HCM Chương 7 : Tương tác vớingười dùng trong ứng dụng C# © 2010 Slide 27 7.6 Thí dụ viết ứng dụng vẽ₫ốitượng phứchợp //tạo pen ₫ể vẽ kim giờ hPen = new Pen(Color.FromArgb(0,0,0),3); //tính góc củakimgiờ goc = 90+360*(now.Hour+(double)now.Minute/60)/12; //₫ổi góc từ₫ộra radian goc = goc*3.1416/180; //xác ₫ịnh tọa ₫ộ ₫ỉnh thứ 2 củakimgiờ x = xo - (int)(rh * Math.Cos(goc)); y = yo - (int)(rh * Math.Sin(goc)); //vẽ kim giờ g.DrawLine(hPen, xo, yo, x, y); Khoa Khoa học& Kỹ thuật Máy tính Môn : Lậptrìnhhướng ₫ốitượng Trường ĐH Bách Khoa Tp.HCM Chương 7 : Tương tác vớingười dùng trong ứng dụng C# © 2010 Slide 28
  15. 7.6 Thí dụ viết ứng dụng vẽ₫ốitượng phứchợp //tạo pen ₫ể vẽ kim phút hPen = new Pen(Color.FromArgb(65,110,55),2); //tính góc của kim phút goc = 90+360*now.Minute/60; //₫ổi góc từ₫ộra radian goc = goc*3.1416/180; //xác ₫ịnh tọa ₫ộ ₫ỉnh thứ 2 của kim phút x = xo - (int)(rm * Math.Cos(goc)); y = yo - (int)(rm * Math.Sin(goc)); //vẽ kim phút g.DrawLine(hPen, xo, yo, x, y); Khoa Khoa học& Kỹ thuật Máy tính Môn : Lậptrìnhhướng ₫ốitượng Trường ĐH Bách Khoa Tp.HCM Chương 7 : Tương tác vớingười dùng trong ứng dụng C# © 2010 Slide 29 7.6 Thí dụ viết ứng dụng vẽ₫ốitượng phứchợp //tạo pen ₫ể vẽ kim giây hPen = new Pen(Color.FromArgb(237,5,220),1); //tính góc của kim giây goc = 90+360*now.Minute/60; //₫ổi góc từ₫ộra radian goc = goc*3.1416/180; //xác ₫ịnh tọa ₫ộ ₫ỉnh thứ 2 của kim giây x = xo - (int)(rs * Math.Cos(goc)); y = yo - (int)(rs * Math.Sin(goc)); //vẽ kim giây g.DrawLine(hPen, xo, yo, x, y); Khoa Khoa học& Kỹ thuật Máy tính Môn : Lậptrìnhhướng ₫ốitượng Trường ĐH Bách Khoa Tp.HCM Chương 7 : Tương tác vớingười dùng trong ứng dụng C# © 2010 Slide 30
  16. 7.6 Thí dụ viết ứng dụng vẽ₫ốitượng phứchợp //tạochuỗimiêutả giờ/phút/giây hiện hành String buf = "" + now.Hour + ":" + now.Minute + ":" + now.Second; //tạo ₫ốitượng font chữ cần dùng Font myFont = new Font("Helvetica", 11); //tạobiếnmiêutả chế₫ộcanh giữakhixuấtchuỗi StringFormat format1 = new StringFormat(StringFormatFlags.NoClip); format1.Alignment = StringAlignment.Center; //xuấtchuỗimiêutả giờ/phút/giây g.DrawString(buf, myFont, System.Drawing.Brushes.Blue, xo, rec.Height - 35, format1); //cho phép timer chạytiếp myTimer.Start(); } 8. Chọn menu Debug.Start Debugging ₫ể dịch và chạy ứng dụng. Xem kếtquảvà ₫ánh giá kếtquả. Khoa Khoa học& Kỹ thuật Máy tính Môn : Lậptrìnhhướng ₫ốitượng Trường ĐH Bách Khoa Tp.HCM Chương 7 : Tương tác vớingười dùng trong ứng dụng C# © 2010 Slide 31 7.7 Xây dựng ₫ốitượng giao diệncóhìnhdạng tùy ý ‰ Các ₫ốitượng giao diện, dù nhỏ hay lớn (Button, TextBox, ListBox, TreeView, ), ₫ều ₫ược Windows quảnlýgiống nhau : Windows xử lý chúng như là window. ‰ Mỗi window sẽ ₫ượchiểnthịởdạng mặc ₫ịnh là hình chữ nhậtcó ₫ường viền xung quanh và titlebar ở phía trên. Tuy nhiên ta có thể miêu tả lạihìnhdạng cho window theo nhu cầuriêngcủa mình. Khoa Khoa học& Kỹ thuật Máy tính Môn : Lậptrìnhhướng ₫ốitượng Trường ĐH Bách Khoa Tp.HCM Chương 7 : Tương tác vớingười dùng trong ứng dụng C# © 2010 Slide 32
  17. 7.7 Xây dựng ₫ốitượng giao diệncóhìnhdạng tùy ý ‰ Window chứacácthuộctínhsau₫ây có liên quan ₫ếnviệcxác ₫ịnh chính xác hình dạng củanó: ƒ BackgroundImage : miêu tả hình bitmap ₫ượcdùng₫ể hiển thị nền window và ₫ể xác ₫ịnh hình dạng củawindow. ƒ FormBorderStyle : miêu tả chế₫ộhiểnthị các ₫ường biên và titlebar của window. ƒ Region : miêu tả vùng hiểnthị và làm việccủa window, nó gồmtừ 1 tớinhiều vùng rờirạc, mỗi vùng rờirạc ₫ượcbao ₫óng bởi1 ₫ường viền khép kín. Khoa Khoa học& Kỹ thuật Máy tính Môn : Lậptrìnhhướng ₫ốitượng Trường ĐH Bách Khoa Tp.HCM Chương 7 : Tương tác vớingười dùng trong ứng dụng C# © 2010 Slide 33 7.7 Xây dựng ₫ốitượng giao diệncóhìnhdạng tùy ý ‰ Đường viềnkhépkíncủa1 vùng₫ộclậpcóthể ₫ượcxác₫ịnh bằng 1 trong 2 phương pháp : ƒ Danh sách các ₫oạnthẳng hay cong liên tiếp và khép kín, mỗi ₫oạnthẳng hay cong có thể miêu tả bởi 1 hàm toán họcnhư Line, Arc, ƒ Do hình bitmap nào ₫óxác₫ịnh. ‰ Có 2 kỹ thuậtxâydựng window có hình dạng bấtkỳ : ƒ Khai báo các thuộctínhliênquan1 cáchtrực quan tạithời ₫iểmthiếtkế. ƒ Lậptrình₫ộng ₫ể thiếtlập các giá trị phù hợpchocácthuộc tính liên quan ₫ến window. Khoa Khoa học& Kỹ thuật Máy tính Môn : Lậptrìnhhướng ₫ốitượng Trường ĐH Bách Khoa Tp.HCM Chương 7 : Tương tác vớingười dùng trong ứng dụng C# © 2010 Slide 34
  18. 7.7 Xây dựng ₫ốitượng giao diệncóhìnhdạng tùy ý ‰ Qui trình xây dựng Form giao diệncóhìnhdạng bấtkỳ bằng cách khai báo các thuộctínhliênquan1 cáchtrực quan tạithời ₫iểm thiếtkế : Tạoform cần dùng, chọnnó₫ể hiểnthị cửasổ thuộc tính, tìm và thiếtlậpgiátrị cho các thuộctínhsau₫ây : ƒ BackgroundImage : khai báo file bitmap ₫ược dùng ₫ể hiểnthị nềncủa Form và ₫ể xác ₫ịnh hình dạng củaForm. Lưuý hình bitmap cần có tính chất : các vùng diệntíchcủabitmap phải có màu khác vớimàunềncủahìnhbitmap; kíchthướchình bitmap nên phù hợpvớinhucầusử dụng củaform tương ứng. ƒ FormBorderStyle = None ₫ể không hiểnthị titlebar và ₫ường viềnmặc ₫ịnh. ƒ TranparenceKey : miêu tả màu nềncủa hình bitmap cầnlọc bỏ (theo ₫ịnh dạng RGB). Khoa Khoa học& Kỹ thuật Máy tính Môn : Lậptrìnhhướng ₫ốitượng Trường ĐH Bách Khoa Tp.HCM Chương 7 : Tương tác vớingười dùng trong ứng dụng C# © 2010 Slide 35 7.7 Xây dựng ₫ốitượng giao diệncóhìnhdạng tùy ý ‰ Thí dụ hãy xây dựng ứng dụng giảiphương trình bậc2 cóhình dạng như sau : Khoa Khoa học& Kỹ thuật Máy tính Môn : Lậptrìnhhướng ₫ốitượng Trường ĐH Bách Khoa Tp.HCM Chương 7 : Tương tác vớingười dùng trong ứng dụng C# © 2010 Slide 36
  19. 7.7 Xây dựng ₫ốitượng giao diệncóhìnhdạng tùy ý ‰ Qui trình xây dựng ₫ốitượng giao diệncóhìnhdạng bấtkỳ bằng cách viết code thiếtlập ₫ộng các thuộctínhliênquan: Tạo ₫ối tượng cần dùng, viết ₫oạn code thiếtlập3 thuộctínhliênquankhi cầnthiết: ƒ BackgroundImage : miêu tả hình bitmap ₫ượcdùng₫ể hiển thị nền window (nếumuốnhiểnthị hình nền). ƒ FormBorderStyle = None. ƒ Region : miêu tả vùng diện tích làm việccủa ₫ốitượng. ‰ Thường Region ₫ượcxác₫ịnh thông qua ₫ốitượng Path, ₫ối tượng này miêu tả ₫ường viềncủa Region. ‰ Để tạo ₫ốitượng Path, ta có thể dùng các hàm toán họcmiêutả từng ₫oạnviềnkhépkíncủa Region hay dùng ₫ường viềncủa hình bitmap bấtkỳ. Khoa Khoa học& Kỹ thuật Máy tính Môn : Lậptrìnhhướng ₫ốitượng Trường ĐH Bách Khoa Tp.HCM Chương 7 : Tương tác vớingười dùng trong ứng dụng C# © 2010 Slide 37 7.7 Xây dựng ₫ốitượng giao diệncóhìnhdạng tùy ý Qui trình tìm Path củahình₫ồ họabitmap Khoa Khoa học& Kỹ thuật Máy tính Môn : Lậptrìnhhướng ₫ốitượng Trường ĐH Bách Khoa Tp.HCM Chương 7 : Tương tác vớingười dùng trong ứng dụng C# © 2010 Slide 38
  20. 7.7 Xây dựng ₫ốitượng giao diệncóhìnhdạng tùy ý for (y = 0; y <= yMax - 1; y++) { //duyệttừng hàng bitmap idx = isrow; //xác ₫ịnh offset (trong buffer) chứapixel cầnxử lý for (x = 0; x <= xMax - 1; x++) { //duyệttừng pixel trên hàng if (Equal(pbase, idx, Key)) { //nếulàpixel nềnthìbỏ qua idx = idx + 4; continue; } //nhớ lạivị trí pixel tái nhấtcủa vùng ₫ang tìm ₫ược B int x0 = x; //duyệt tìm các pixel còn lạicủa vùng hiện hành G while (x < xMax && (!Equal(pbase, idx, Key))) { R x = x + 1; idx = idx + 4; } //add path của vùng tìm ₫ượcvào₫ốitượng Path A path.AddRectangle(new Rectangle(x0, y, x - x0, 1)); } isrow = isrow + bitmapData.Stride; //₫ếnpixel ₫ầu hàng kế } Khoa Khoa học& Kỹ thuật Máy tính Môn : Lậptrìnhhướng ₫ốitượng Trường ĐH Bách Khoa Tp.HCM Chương 7 : Tương tác vớingười dùng trong ứng dụng C# © 2010 Slide 39 7.7 Xây dựng ₫ốitượng giao diệncóhìnhdạng tùy ý ‰ Thí dụ hãy xây dựng ứng dụng giảiphương trình bậc2 cóhình dạng như sau : Khoa Khoa học& Kỹ thuật Máy tính Môn : Lậptrìnhhướng ₫ốitượng Trường ĐH Bách Khoa Tp.HCM Chương 7 : Tương tác vớingười dùng trong ứng dụng C# © 2010 Slide 40
  21. 7.8 Kếtchương ‰ Chương này ₫ãgiớithiệucáchthứctương tác giữangười dùng và chương trình ₫ể nhập/xuấtdữ liệu. ‰ Chương này cũng ₫ãgiớithiệucác₫ốitượng giao diện cùng các tác vụ xuấtdữ liệudạng chuỗi, dạng bitmap, dạng hình ₫ồ họa toán học. Kếthợp3 loạidữ liệu này, ta có thể tạokếtxuấtbấtkỳ. Khoa Khoa học& Kỹ thuật Máy tính Môn : Lậptrìnhhướng ₫ốitượng Trường ĐH Bách Khoa Tp.HCM Chương 7 : Tương tác vớingười dùng trong ứng dụng C# © 2010 Slide 41