Tìm trong:Webe-CHÍP

Bộ gõ (kiểu Vni/Telex/Viqr)Tắt (Alt+T)Mở (Alt+M)

 
Trang chủ LẬP TRÌNH BASIC TC 228

Tìm hiểu khả năng đồ họa của VB.NET (kỳ 3)

Để 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ó templateWindows 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_ClickcmdImage_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

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

  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

  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

  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

  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)

  gNoiVe.FillEllipse(mySolidBrush, 100, 120, 250, 150)

  gNoiVe.FillEllipse(mySolidBrush, 10, 10, 150, 150)

End Sub

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

  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

  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

CHƯƠNG CAN CHÍP

[Đầu trang]