Tìm hiểu khả năng đồ họa của VB ppsx

1 TÌM HIỂU KHẢ NĂNG ĐỒ HOẠ CỦA VB.NET Để tìm hiểu cách sử dụng các hành vi vẽ, không gì tốt hơn là thực hiện một ví dụ nho nhỏ. Bạn hãy mở VB.NET 2005 và tạo một ứng dụng mới có template là Windows Application. Double- click vào form trống có sẵn để mở cửa sổ soạn thảo mã lệnh. VB tự động thêm đoạn mã để xử lý tình huống Load của form. Bạn hãy sửa thành đoạn mã 1. Đoạn mã 1 Imports System.Drawing Imports System.Drawing.Drawing2D Public Class Form1 ‘ Khai báo bảng vẽ Dim gNoiVe As Graphics Private Sub Form1_Load(ByVal sender As System.Object, _ ByVal e As System.EventArgs) Handles MyBase.Load ‘ Bảng vẽ là Form1 gNoiVe = Me.CreateGraphics End Sub End Class Toàn bộ nội dung đoạn mã 1 dùng để chuẩn bị một bảng vẽ sử dụng bề mặt Form1 làm nơi vẽ hình. Trên form, bạn vẽ 16 nút lệnh như hình 1. Đặt tên cho chúng lần lượt theo thứ tự từ trái sang, từ trên xuống như sau: cmdArc, cmdBezier, cmdBeziers, cmdCurve, cmdClosedCurve, cmdEllipse, cmdIcon, cmdImage, cmdLine, cmdLines, cmdPath, cmdPie, cmdPolygon, cmdRectangle, cmdRectangles, cmdString. 16 nút lệnh là 16 ví dụ minh họa 19 hành vi vẽ đã trình bày trong bài trước. Đoạn mã 2 trình bày một phần thủ tục xử lý tình huống Click cho 16 nút lệnh đó. Hình 1 Lưu ý: Bạn cần chép 2 tập tin .ICO và 1 tập tin .JPG nào đó mà bạn đang có vào thư mục bin\debug của ứng dụng để thử nghiệm, rồi sửa các dòng lệnh khai báo liên quan đến tên tập tin trong thủ tục xử lý tình huống cmdIcon_Click và cmdImage_Click cho phù hợp tên tập tin của bạn. Nhấn phím F5 để thử chương trình. Các hành vi vẽ trong ví dụ vừa nêu cho ta các hình dạng chỉ có nét vẽ, không có màu tô. Để vẽ hình có màu tô, bạn cần dùng các hành vi tô màu như trình bày ở bảng 1. Cấu trúc lệnh cụ thể luôn luôn được VB.NET hiển thị mỗi khi bạn gõ tên hành vi. Bảng 1 2 FillClosedCurve Tô màu phần phía trong một đường cong khép kín FillEllipse Tô màu phần phía trong một hình ê-líp FillPath Tô màu phần phía trong một GraphicsPath FillPie Tô màu phần phía trong một hình Pie FillPolygon Tô màu phần phía trong một đa giác FillRectangle Tô màu phần phía trong một hình chữ nhật FillRegion Tô màu phần phía trong một Region (là phần bên trong 1 hình bao gồm các hình chữ nhật và các path). Vẫn với ví dụ trong phần nội dung về nhóm các hành vi vẽ, trên form, bạn vẽ thêm 9 nút lệnh như hình 2. Đặt tên cho chúng lần lượt theo thứ tự từ trái sang, từ trên xuống như sau: cmdFillClosedCurve, cmdFillEllipse, cmdFillPath, cmdFillPie, cmdFillPolygon, cmdFillRectangle, cmdFillRectangles, cmdFillLinearGradient, cmdFillRegion. Đoạn mã 3 trình bày một phần các thủ tục xử lý tình huống Click cho 9 nút lệnh mới. Hình 2 Bạn nên sửa đổi các thông số, các thuộc tính trong các thủ tục xử lý tình huống Click để tìm hiểu sâu hơn. Kỳ tới, để kết thúc loạt bài tìm hiểu khả năng đồ họa của VB.NET, tôi sẽ trình bày thêm một ví dụ hoàn chỉnh. Đoạn mã 2 Private Sub cmdArc_Click(ByVal sender As System.Object, _ ByVal e As System.EventArgs) Handles cmdArc.Click Dim rect As New Rectangle(50, 50, 200, 100) ‘Cung tròn được vẽ trong đây gNoiVe.Clear(Me.BackColor) ‘Xóa trước khi vẽ gNoiVe.DrawArc(New Pen(Color.Blue), rect, 12, 84) End Sub Private Sub cmdBezier_Click(ByVal sender As System.Object, _ ByVal e As System.EventArgs) Handles cmdBezier.Click gNoiVe.Clear(Me.BackColor) gNoiVe.DrawBezier(New Pen(Color.Green, 2), 20.0F, 30.0F, 100.0F, _ 200.0F, 40.0F, 400.0F, 100.0F, 200.0F) End Sub 3 Private Sub cmdBeziers_Click(ByVal sender As System.Object, _ ByVal e As System.EventArgs) Handles cmdBeziers.Click Dim p1 As New PointF(40.0F, 50.0F) ' Các điểm trên đường cong Dim p2 As New PointF(60.0F, 70.0F) Dim p3 As New PointF(80.0F, 34.0F) Dim p4 As New PointF(120.0F, 180.0F) Dim p5 As New PointF(200.0F, 150.0F) Dim p6 As New PointF(350.0F, 250.0F) Dim p7 As New PointF(200.0F, 200.0F) Dim ptsArray As PointF() = {p1, p2, p3, p4, p5, p6, p7} gNoiVe.Clear(Me.BackColor) gNoiVe.DrawBeziers(New Pen(Color.Red, 2), ptsArray) End Sub Private Sub cmdCurve_Click(ByVal sender As System.Object, _ ByVal e As System.EventArgs) Handles cmdCurve.Click Dim bluePen As New Pen(Color.Blue, 1) Dim pt1 As New PointF(40.0F, 50.0F) ' Dãy các điểm Dim pt2 As New PointF(50.0F, 75.0F) Dim pt3 As New PointF(100.0F, 115.0F) Dim pt4 As New PointF(200.0F, 180.0F) Dim pt5 As New PointF(200.0F, 90.0F) Dim ptsArray As PointF() = {pt1, pt2, pt3, pt4, pt5} Dim offset As Integer = 1 ‘Bước nhảy (số điểm) để tạo 1 đoạn trên đường cong Dim segments As Integer = 3 ‘Số đoạn trên đường cong (<= số điểm trừ 2) Dim tension As Single = 0.5F ‘Độ căng của đường cong, càng nhỏ càng thẳng gNoiVe.Clear(Me.BackColor) gNoiVe.DrawCurve(bluePen, ptsArray, offset, segments, tension) bluePen.Dispose() ‘Giải phóng bút vẽ End Sub Private Sub cmdClosedCurve_Click(ByVal sender As System.Object, _ ByVal e As System.EventArgs) Handles cmdClosedCurve.Click Dim pts() As Point = {New Point(10, 50), _ New Point(200, 30), New Point(120, 200), _ New Point(230, 150), New Point(150, 50), _ New Point(250, 200), New Point(100, 250)} gNoiVe.SmoothingMode = Drawing2D.SmoothingMode.HighQuality gNoiVe.Clear(Me.BackColor) For tension As Single = 0 To 1 Step 0.25 Dim curve_pen As New Pen(Color.Black, tension * 4 + 1) gNoiVe.DrawClosedCurve(curve_pen, pts, tension, _ Drawing2D.FillMode.Alternate) Next tension For i As Integer = 0 To pts.Length - 1 gNoiVe.FillRectangle(Brushes.White,pts(i).X - 2,pts(i).Y - 2, 5,5) gNoiVe.DrawRectangle(Pens.Black, pts(i).X - 2, pts(i).Y - 2, 5, 5) Next i End Sub 4 Private Sub cmdEllipse_Click(ByVal sender As System.Object, _ ByVal e As System.EventArgs) Handles cmdEllipse.Click gNoiVe.Clear(Me.BackColor) gNoiVe.DrawEllipse(New Pen(Color.Blue), 10, 10, 250, 150) ‘Ê-líp gNoiVe.DrawEllipse(New Pen(Color.Blue), 10, 10, 150, 150) ‘Tròn End Sub Private Sub cmdIcon_Click(ByVal sender As System.Object, _ ByVal e As System.EventArgs) Handles cmdIcon.Click Dim appPath As String = My.Computer.FileSystem.CurrentDirectory ‘ Chép 2 file icon mà bạn có vào thư mục bin\debug của ứng dụng Dim icon1 As New Icon(appPath & "\Apple.ico") Dim icon2 As New Icon(appPath & "\Aero-Soft.ico") gNoiVe.Clear(Me.BackColor) gNoiVe.DrawIcon(icon1, 20, 50) ‘Vẽ tại một vị trí, không tính chuyện co dãn Dim rect As New Rectangle(100, 200, 20, 20) gNoiVe.DrawIcon(icon2, rect) ‘Co dãn cho khớp với hình chữ nhật cho trước Dim rectUnstretched As New Rectangle(50, 200, 20, 20) gNoiVe.DrawIconUnstretched(icon2, rectUnstretched) ‘Không co dãn End Sub Private Sub cmdImage_Click(ByVal sender As System.Object, _ ByVal e As System.EventArgs) Handles cmdImage.Click Dim appPath As String = My.Computer.FileSystem.CurrentDirectory Dim imageFile As Image = Image.FromFile(appPath & "\LogoBV.jpg") Dim rect As New Rectangle(50, 50, 60, 60) Dim rectUnscaled As New Rectangle(150, 50, 50, 50) Dim rectUnscaledAndClipped As New Rectangle(10, 150, 100, 80) gNoiVe.Clear(Me.BackColor) gNoiVe.DrawImage(imageFile, rect) ‘Co dãn cho khớp với hình chữ nhật cho trước gNoiVe.DrawImageUnscaled(imageFile, rectUnscaled) ‘Không co dãn ‘Không co dãn và cắt bớt cho vừa khung chữ nhật cho trước gNoiVe.DrawImageUnscaledAndClipped(imageFile, rectUnscaledAndClipped) End Sub Private Sub cmdLine_Click(ByVal sender As System.Object, _ ByVal e As System.EventArgs) Handles cmdLine.Click gNoiVe.Clear(Me.BackColor) gNoiVe.DrawLine(New Pen(Color.Black, 1), 50, 50, 100, 100) End Sub 5 Private Sub cmdLines_Click(ByVal sender As System.Object, _ ByVal e As System.EventArgs) Handles cmdLines.Click Dim points(3) As Point points(0) = New Point(120, 60) points(1) = New Point(180, 60) points(2) = New Point(240, 120) points(3) = New Point(60, 120) gNoiVe.Clear(Me.BackColor) gNoiVe.DrawLines(New Pen(Color.Blue), points) End Sub Private Sub cmdPath_Click(ByVal sender As System.Object, _ ByVal e As System.EventArgs) Handles cmdPath.Click Dim path As GraphicsPath = New GraphicsPath ‘Vẽ 1 loạt 4 hình theo thứ tự: đường kẻ, ê-líp, đường kẻ, hình chữ nhật path.AddLine(20, 20, 103, 80) ‘Thêm 1 đường kẻ vào path path.AddEllipse(100, 50, 100, 100) ‘Thêm 1 hình ê-líp vào path path.AddLine(195, 80, 300, 80) Dim rect As Rectangle = New Rectangle(50, 150, 300, 50) path.AddRectangle(rect) ‘Thêm 1 hình chữ nhật vào path gNoiVe.Clear(Me.BackColor) gNoiVe.DrawPath(New Pen(Color.Green, 1), path) End Sub Private Sub cmdPie_Click(ByVal sender As System.Object, _ ByVal e As System.EventArgs) Handles cmdPie.Click Dim startAngle As Single = 180 ‘Bắt đầu từ vị trí góc 180 độ Dim sweepAngle As Single = 60 ‘Quét 1 góc 60 độ Dim bluePen As Pen = New Pen(Color.Blue, 1) gNoiVe.Clear(Me.BackColor) gNoiVe.DrawPie(bluePen, 20, 20, 100, 100, startAngle, sweepAngle) End Sub Private Sub cmdPolygon_Click(ByVal sender As System.Object, _ ByVal e As System.EventArgs) Handles cmdPolygon.Click Dim points(3) As Point points(0) = New Point(120, 60) ‘Đỉnh phía trên bên trái hình thang points(1) = New Point(180, 60) ‘Đỉnh phía trên bên phải hình thang points(2) = New Point(240, 120) ‘Đỉnh phía dưới bên phải hình thang points(3) = New Point(60, 120) ‘Đỉnh phía dưới bên trái hình thang gNoiVe.Clear(Me.BackColor) gNoiVe.DrawPolygon(New Pen(Color.Blue), points) End Sub Private Sub cmdRectangle_Click(ByVal sender As System.Object, _ ByVal e As System.EventArgs) Handles cmdRectangle.Click gNoiVe.Clear(Me.BackColor) gNoiVe.DrawRectangle(New Pen(Color.Blue, 1), 50, 50, 150, 150) gNoiVe.DrawRectangle(New Pen(Color.Red, 1), 10, 10, 250, 150) End Sub 6 Private Sub cmdRectangles_Click(ByVal sender As System.Object, _ ByVal e As System.EventArgs) Handles cmdRectangles.Click Dim rects(3) As Rectangle ‘Bản dãy 4 hình chữ nhật rects(0) = New Rectangle(10, 10, 250, 150) rects(1) = New Rectangle(20, 20, 250, 150) rects(2) = New Rectangle(30, 30, 250, 150) rects(3) = New Rectangle(40, 40, 250, 150) gNoiVe.Clear(Me.BackColor) gNoiVe.DrawRectangles(New Pen(Color.Blue), rects) End Sub Private Sub cmdString_Click(ByVal sender As System.Object, _ ByVal e As System.EventArgs) Handles cmdString.Click Dim drawFont As New Font("Verdana", 14) ‘Chọn 1 kiểu phông chữ Dim drawFormat As New StringFormat ‘ Đổi hướng vẽ chuỗi thành chiều đứng drawFormat.FormatFlags = StringFormatFlags.DirectionVertical gNoiVe.Clear(Me.BackColor) gNoiVe.DrawString("Vẽ chuỗi", New Font("Times New Roman", 14),_ New SolidBrush(Color.Green), 20, 20) gNoiVe.DrawString("Chuỗi in nằm ngang!", New Font("Arial", 12),_ New SolidBrush(Color.Red), 120, 140) gNoiVe.DrawString("Chuỗi in thẳng đứng!", drawFont, _ New SolidBrush(Color.Blue), 100.0F, 50.0F, drawFormat) End Sub Đoạn mã 3 Private Sub cmdFillClosedCurve_Click(ByVal sender As System.Object, _ ByVal e As System.EventArgs) Handles cmdFillClosedCurve.Click Dim pt1 As New PointF(40.0F, 50.0F) ‘Tạo bản dãy các điểm Dim pt2 As New PointF(50.0F, 75.0F) Dim pt3 As New PointF(100.0F, 115.0F) Dim pt4 As New PointF(200.0F, 180.0F) Dim pt5 As New PointF(200.0F, 90.0F) Dim ptsArray As PointF() = {pt1, pt2, pt3, pt4, pt5} Dim tension As Single = 1.0F ‘Độ căng của đường cong, càng nhỏ càng thẳng Dim flMode As FillMode = FillMode.Alternate Dim blueBrush As New SolidBrush(Color.Blue) gNoiVe.Clear(Me.BackColor) gNoiVe.FillClosedCurve(blueBrush, ptsArray, flMode, tension) End Sub Private Sub cmdFillEllipse_Click(ByVal sender As System.Object, _ ByVal e As System.EventArgs) Handles cmdFillEllipse.Click Dim mySolidBrush As New SolidBrush(Color.DarkRed) gNoiVe.Clear(Me.BackColor) 7 gNoiVe.FillEllipse(mySolidBrush, 100, 120, 250, 150) gNoiVe.FillEllipse(mySolidBrush, 10, 10, 150, 150) End Sub 8 Private Sub cmdFillPath_Click(ByVal sender As System.Object, _ ByVal e As System.EventArgs) Handles cmdFillPath.Click Dim points(5) As Point, bytes(5) As Byte, colors(5) As Color points(0) = New Point(40, 140) 'Tọa độ điểm bắt đầu của path points(1) = New Point(275, 200) points(2) = New Point(105, 225) points(3) = New Point(190, 300) points(4) = New Point(50, 350) points(5) = New Point(20, 180) bytes(0) = CByte(PathPointType.Start) 'Điểm bắt đầu của path bytes(1) = CByte(PathPointType.Bezier) bytes(2) = CByte(PathPointType.Bezier) bytes(3) = CByte(PathPointType.Bezier) bytes(4) = CByte(PathPointType.Line) bytes(5) = CByte(PathPointType.Line) colors(0) = Color.Green colors(1) = Color.Yellow colors(2) = Color.Red colors(3) = Color.Blue colors(4) = Color.Orange colors(5) = Color.Black Dim path As New GraphicsPath(points, bytes) Dim pgb As New PathGradientBrush(path) pgb.SurroundColors = colors gNoiVe.Clear(Me.BackColor) gNoiVe.FillPath(pgb, path) End Sub Private Sub cmdFillPie_Click(ByVal sender As System.Object, _ ByVal e As System.EventArgs) Handles cmdFillPie.Click Dim startAngle As Single = 123 Dim sweepAngle As Single = 45 ‘Góc quét 45 độ Dim redBrush As New SolidBrush(Color.Red) gNoiVe.Clear(Me.BackColor) gNoiVe.FillPie(redBrush, 20, 20, 100, 100, startAngle, sweepAngle) startAngle = 321 sweepAngle = 90 ‘Góc quét 90 độ gNoiVe.FillPie(redBrush, 80, 80, 100, 100, startAngle, sweepAngle) End Sub Private Sub cmdFillPolygon_Click(ByVal sender As System.Object, _ ByVal e As System.EventArgs) Handles cmdFillPolygon.Click Dim redBrush As New SolidBrush(Color.Red) Dim points(3) As Point 9 points(0) = New Point(120, 60) points(1) = New Point(180, 60) points(2) = New Point(240, 120) points(3) = New Point(60, 120) gNoiVe.Clear(Me.BackColor) gNoiVe.FillPolygon(redBrush, points) End Sub Private Sub cmdFillRectangle_Click(ByVal sender As System.Object, _ ByVal e As System.EventArgs) Handles cmdFillRectangle.Click gNoiVe.Clear(Me.BackColor) gNoiVe.FillRectangle(New SolidBrush(Color.Red), 50, 50, 150, 150) gNoiVe.FillRectangle(New SolidBrush(Color.Blue), 10, 10, 50, 150) End Sub Private Sub cmdFillRectangles_Click(ByVal sender As System.Object, _ ByVal e As System.EventArgs) Handles cmdFillRectangles.Click Dim rects(3) As Rectangle rects(0) = New Rectangle(10, 10, 50, 150) rects(1) = New Rectangle(70, 70, 250, 50) rects(2) = New Rectangle(340, 80, 10, 150) rects(3) = New Rectangle(90, 150, 50, 20) gNoiVe.Clear(Me.BackColor) gNoiVe.FillRectangles(New SolidBrush(Color.Blue), rects) End Sub Private Sub cmdLinearGradient_Click(ByVal sender As System.Object, _ ByVal e As System.EventArgs) Handles cmdLinearGradient.Click Dim rect As New Rectangle(50, 30, 100, 100) Dim lBrush As New LinearGradientBrush(rect, Color.Red, Color.Yellow, _ LinearGradientMode.BackwardDiagonal) gNoiVe.Clear(Me.BackColor) gNoiVe.FillRectangle(lBrush, rect) rect = New Rectangle(200, 30, 100, 100) lBrush = New LinearGradientBrush(rect, Color.Blue, Color.Brown, _ LinearGradientMode.BackwardDiagonal) gNoiVe.FillRectangle(lBrush, rect) End Sub Private Sub cmdFillRegion_Click(ByVal sender As System.Object, _ ByVal e As System.EventArgs) Handles cmdFillRegion.Click 10 Dim myGraphicsPath As New GraphicsPath Dim point1 As New Point(25, 30) ‘ 3 đỉnh của tam giác Dim point2 As New Point(200, 30) Dim point3 As New Point(25, 200) myGraphicsPath.AddLine(point1.X, point1.Y, point2.X, point2.Y) myGraphicsPath.AddLine(point1.X, point1.Y, point3.X, point3.Y) myGraphicsPath.AddLine(point3.X, point3.Y, point2.X, point2.Y) Dim myRegion As New Region(myGraphicsPath) gNoiVe.Clear(Color.White) gNoiVe.FillRegion(New SolidBrush(Color.Red), myRegion) End Sub [...]...11 TÌM HIỂU KHẢ NĂNG ĐỒ HOẠ CỦA VB. NET (KỲ TIẾP) Bài này là một ví dụ hoàn chỉnh nhằm kết thúc loạt bài tìm hiểu khả năng đồ họa của VB. NET Ví dụ xoay quanh việc vẽ đường biểu diễn các hàm lượng giác Sine, Cosine và Tangent Trước khi bắt tay vào thiết kế ví dụ, bạn hãy... Tangent) Hình 1 Hình 2 Hình 3 Đường biểu diễn đồ thị có màu xanh dương, đường kẻ màu đỏ là đường biểu diễn trục hoành trên 12 mặt phẳng tọa độ (chia hình chữ nhật làm 2 phần bằng nhau) Đồ thị là một đường cong đi qua nhiều điểm (ngay cả nét thẳng đứng trong đồ thị của hàm Tangent cũng là một đường cong đi qua các điểm xếp thẳng hàng với nhau mà thôi) Ý tưởng của ví dụ này là: sử dụng hành vi DrawCurve... độ) trên mặt phẳng tọa độ Tọa độ Y của mỗi điểm được tính nhờ các phép tính kết hợp với hành vi Sin, Cos và Tan có sẵn thuộc lớp Math (tương ứng với các hàm lượng giác trong VB6 ) Bạn hãy nạp VB. NET 2005 và tạo một ứng dụng mới có template là Windows Application Trên form trống có sẵn, vẽ một Panel control làm nơi vẽ đồ thị, đặt tên là pnlNoiVeDuongBieuDien Kích thước của control này không ảnh hưởng đến... với các giá trị âm • Vì tham số của các hành vi Sin, Cos và Tan là radian, nên trong công thức phải nhân với PI / 180 để chuyển độ thành radian • Giá trị của Tan(90) và Tan(270) là không xác định, nên lỗi overflow (tràn số) sẽ làm ngưng chương trình Do vậy, khác với cách tính tọa độ các điểm nằm trên đồ thị hàm Sine và Cosine, ta đặt đoạn mã tính tọa độ các điểm nằm trên đồ thị hàm Tangent bên trong một... nằm giữa Try và Catch, nếu có lỗi xảy ra (gọi là trường hợp ngoại lệ) thì tính lại tọa độ theo đoạn mã nằm giữa Catch và End Try (theo đó các điểm ở đỉnh và đáy của Panel control được sử dụng để thay thế) Con số 4 trong phép tính chỉ làm cho đồ thị đẹp hơn thôi, bạn hãy thử đổi số 4 thành 1, 2 hoặc 3 thì sẽ thấy ... CInt(ViTriTrucHoanh), _ pnlNoiVeDuongBieuDien.Width, CInt(ViTriTrucHoanh)) DrawCurve(pDuongBieuDien, CacDiemTrenDoThi) End With End Sub End Class Nhận xét: • Với GDI+, hệ thống tọa độ có gốc là góc trên bên trái của Panel control, nên tọa độ Y có trị số càng lớn nếu điểm càng thấp Do ta sử dụng trục hoành là đường kẻ màu đỏ (vẽ tại 14 ViTriTrucHoanh) chia Panel control làm 2 phần, phần trên thể hiện các điểm có . SolidBrush(Color.Red), myRegion) End Sub 11 TÌM HIỂU KHẢ NĂNG ĐỒ HOẠ CỦA VB. NET (KỲ TIẾP) Bài này là một ví dụ hoàn chỉnh nhằm kết thúc loạt bài tìm hiểu khả năng đồ họa của VB. NET. Ví dụ xoay quanh việc vẽ. các thuộc tính trong các thủ tục xử lý tình huống Click để tìm hiểu sâu hơn. Kỳ tới, để kết thúc loạt bài tìm hiểu khả năng đồ họa của VB. NET, tôi sẽ trình bày thêm một ví dụ hoàn chỉnh. Đoạn. 1 TÌM HIỂU KHẢ NĂNG ĐỒ HOẠ CỦA VB. NET Để tìm hiểu cách sử dụng các hành vi vẽ, không gì tốt hơn là thực hiện một ví dụ nho nhỏ. Bạn hãy mở VB. NET 2005 và tạo một ứng