Chương Mười Hai - Dùng Đồ Họa (Phần I)

Dùng Intrinsic Color Constants

Chỉ khổ nổi nếu ta đã dùng một màu đỏ đậm để hiển thị tuyệt đẹp thứ gì trong chương trình VB6 mà bây giờ user tự nhiên thay đổi Color Scheme thành Olive Green chẳng hạn khiến cho màu đỏ đậm ấy coi chẳng giống ai trong cái Color Scheme mới.

Để tránh trường hợp ấy, thay vì nói thẳng ra là màu gì (xanh hay đỏ) ta nói dùng màu vbActiveTitlebar hay vbDesktop, .v.v.
Dùng Intrinsic Color Constant sẽ bảo đảm màu ta dùng sẽ được biến đổi theo Color Scheme mà user chọn để khỏi bị trường hợp cái màu trở nên chẳng giống ai. Lúc thiết kế, ta cũng có thể chọn Intrinsic Color Constant từ Tab System khi chọn màu.

Graphic files

In trên màn ảnh

Bạn hãy khởi động một chương trình VB6 mới. Đặt lên form một PictureBox tên Picture1 và một button tên CmdPrintTenLines với Caption Print Ten Lines. DoubleClick lên button nầy và viết code dưới đây:

Private Sub CmdPrintTenLines_Click() Dim i As Integer ' String variable used for display Dim strLine As String ' Write 10 lines, one under the other For i = 1 To 10 strLine = "This is line " & CStr(i) Me.Print strLine ' Print on Form Picture1.Print strLine ' Print on Picture1 Next End Sub

Private Sub CmdPrintFontSizes_Click() Dim i As Integer ' Print numbers 1 to 10, one after the other on the same line For i = 1 To 10 ' Define Font size Me.Font.Size = Me.Font.Size + i ' Define Color using Function QBColor Me.ForeColor = QBColor(i) ' Print without moving to next line. Note the semicolon ";" Me.Print Str(i); Next End Sub

Bây giờ bạn thử minimize cửa sổ của chương trình, kế đó restore nó lại kích thước cũ. Bạn sẽ thấy các hàng ta in lúc nãy không còn trong form hay PictureBox nữa.

Lý do là khi ta Print lên form hay PictureBox, các hình ấy được vẽ trong graphic địa phương chớ không được VB6 kể là một phần của cửa sổ. Muốn tránh trở ngại nầy ta phải dặn VB6 nhớ vẽ lại bằng cách set property AutoRedraw của form và Picture1 ra True.

Hệ thống tọa độ

Cái góc Trên Trái là Trung tâm tọa độ của screen hay form. Ở đó tọa độ X và Y đều bằng 0, ta viết là 0,0. Nếu ta đi lần qua phải theo chiều rộng của screen thì tọa độ X tăng lên. Nếu ta đi dọc xuống dưới theo chiều cao của screen thì tọa độ của Y tăng lên.

Kế đến là đơn vị đo lường ta dùng để biểu diễn khoảng cách. Trong bài trước ta đã nói đến độ mịn của màn ảnh (screen resolution) dựa vào pixel. Ta có thể dùng đơn vị pixel để nói một Object có tọa độ X và Y mỗi chiều bao nhiêu pixels tính từ trung tâm tọa độ.

Như thế, ngay cả trên cùng một màn ảnh khi ta tăng độ mịn nó lên thì một Object đã được đặt lên màn ảnh theo đơn vị pixel sẽ xích qua trái và lên trên một ít vì kích thước một pixel bây giờ nhỏ hơn lúc trước một chút.

Hình dưới đây minh họa các kích thước của màn ảnh và Form.

Điểm cần biết là có những phần như title bar và border của một form ta không thể vẽ lên được. Do đó diện tích còn lại của form được gọi là Client Area. Chiều rộng và chiều cao của Client Area được gọi là ScaleWidth và ScaleHeight.

Nếu muốn khoảng cách từ một Object đến trung tâm tọa độ, hay kích thước của chính Object, không hề thay đổi dù ta có tăng, giảm độ mịn của màn ảnh hay in hình ra printer (thí dụ ta muốn nó luôn luôn dài 5cm chẳng hạn) thì ta dùng hệ thống tọa độ theo đơn vị twips của form.

Twips là Default Coordinate System của VB6. Trong hệ thống nầy mỗi điểm là tương đương với 1/567 centimeter. Do đó, nếu bạn vẽ một dường dài 567 twips nó sẽ hiển thị dài 1cm trên màn ảnh, và khi bạn in nó ra, nó cũng dài 1cm trên giấy. Tức là độ dài thật của Object không tùy thuộc vào loại màn ảnh (độ mịn cao hay thấp) hay printer. Người ta nói nó là Device independent coordinate system (Hệ thống tọa độ độc lập với dụng cụ). Nói một cách khác Twips cho ta thật sự what you see is what you get (WYSIWYG - thấy sao có vậy), rất thích hợp với Desktop publishing.

Bạn có thể thay đổi hệ thống tọa độ của một form bằng cách edit property ScaleMode qua cửa sổ Properties như sau:



Ghi chú: Thay đổi trị số ScaleMode không có hiệu lực ngay mà chỉ ảnh hưởng những gì được thiết kế sau đó.

Giống như khi ta Edit Text trong Notepad, Text Cursor (thanh | chớp chớp) là vị trí hiện tại, nơi sẽ hiển thị cái chữ ta đánh sắp tới, trong graphic ta có một Cursor vô hình, nơi sẽ hiển thị cái gì ta sắp Print. Ta chỉ định vị trí của graphic cursor ấy bằng cách cho trị số của CurrentX và CurrentY.

Bạn hãy khởi động một dự án VB6 mới và viết code cho Event Resize của form chính như sau:

Thử chạy chương trình và Resize form. Mỗi khi bạn Resize form, chữ X sẽ được dời đến vị trí khoảng chính giữa của Client Area của form.

Dùng Graphics

• 
  Dùng Graphical Controls: Ta có PictureBox và Image có thể chứa hình ảnh. Trong khi Line và Shape có thể vẽ đường thẳng hay các hình chữ nhật, tròn .v.v.. trên form, lúc thiết kế.
  
• 
  Dùng Graphics Methods: Đây là những mệnh lệnh cho ta vẽ trực tiếp lên form lúc run-time. Các mệnh lệnh VB6 cho ta là Cls, Pset, Point, Line và Circle.
  

Tùy theo hoàn cảnh, bạn có thể lựa chọn cách nào tiện dụng.

PictureBox và Image

Sự khác biệt chí giữa Image và PictureBox là Image có property Stretch mà ta có thể set thành True để kéo dãn graphic ra cho chiếm trọn diện tích của Image. Image là một grapgic control lightweight (nhẹ ký), tức là nó không đòi hỏi nhiều memory và chạy nhanh hơn PictureBox. Lý do là PictureBox là một container, tức là nó có thể chứa các controls khác. Ngoài ra, PictureBox cũng cho phép ta vẽ lên trên nó giống như trên form.

Trong hình dưới đây, trong lúc thiết kế ta đặt một PictureBox và một Image cùng một cỡ lên cùng một form. Kế đó ta assign cùng một picture hình happy.bmp cho cả hai. Riêng với Image, ta set property Stretch của nó ra True.

Chỉ định hình ảnh lúc run-time

Do đó, vì VB6 program chứa luôn graphic chung với nó, ta không cần phải nhắc đến tên của graphic file khi dùng hay deploy, tức là không cần đính kèm tên graphic file trong Setup file cho người ta install. Dưới đây là code mẫu để lúc run-time ta load một graphic tên sad.bmp nằm trong Subfolder tên images của App.path vào Image control tên Image1.

Private Sub CmdLoad_Click() Dim LocalDir As String ' Assign Folder where program resides to LocalDir LocalDir = App.Path ' Append right backslash if last character is not "\" If Right(LocalDir, 1) <> "\" Then LocalDir = LocalDir & "\" End If ' Load graphic "sad.bmp" from SubFolder "images" into Image1 Image1.Picture = LoadPicture(LocalDir & "images\sad.bmp") End Sub

Control Shape

Muốn sơn bên trong một Shape, bạn chọn màu từ property FillColor. Property FillColor cũng giống như BackColor của các controls khác, nhưng nó chỉ có hiệu lực khi bạn cho property FillStyle một trị số khác hơn là 1- Transparent (trong suốt), thí dụ như 0- Solid (dày đặc).

Control Line

Graphics Methods

Chỉ cần một chút kinh nghiệm bạn có thể làm hoạt họa (animation) hay tạo visual effects tuyệt diệu mà không cần phải đụng đến Windows API (Application Programming Interface) để dùng Function BitBlt.

Method PaintPicture

Bạn hãy khởi động một dự án VB6 mới và DoubleClick lên PictureBox Icon trong ToolBox để đặt một PictureBox lên form. Đặt tên PictureBox ấy là picGraphic và set property Visible của nó ra False để ta không thấy nó lúc run-time.

Bây giờ load một hình vào property Picture của picGraphic bằng cách Browse một Bitmap file từ cửa sổ Properties. Ở đây ta chọn INTL_NO.BMP từ folder \Program Files\Microsoft Visual Studio\Common\Graphics\Bitmaps\Assorted

Trong chương trình nầy ta muốn hễ khi đè nút trái của Mouse xuống và di chuyển Mouse cursor thì khi cursor đi đến đâu, hình INTL_NO được vẽ đến đó.

Ta sẽ dùng một Flag để đánh dấu nút-trái-của-Mouse-Down, đặt tên là flgMouseDown. Khi nhận được Event MouseDown ta set flgMouseDown thành True, và khi nhận được Event MouseUp ta reset flgMouseDown thành False. Mỗi lần nhận được Event MouseMove thì nếu flgMouseDown là True ta sẽ PaintPicture INTL_NO.

Để xóa background của form, ta thêm một button tên CmdClearForm để chạy graphic method Cls. Dưới đây là liệt kê code mẫu:

' Flag that indicates that the Mouse's left button is depressed Dim flgMouseDown As Boolean Private Sub Form_Load() ' Initialise flgMouseDown to False flgMouseDown = False End Sub Private Sub Form_MouseDown(Button As Integer, Shift As Integer, X As Single, Y As Single) ' Set Flag flgMouseDown flgMouseDown = True End Sub Private Sub Form_MouseMove(Button As Integer, Shift As Integer, X As Single, Y As Single) ' Paint picGraphic if flgMouseDown is True If flgMouseDown Then ' Paint full-size picGraphic at Mouse cursor location PaintPicture picGraphic.Picture, X, Y, picGraphic.Width, picGraphic.Height End If End Sub Private Sub Form_MouseUp(Button As Integer, Shift As Integer, X As Single, Y As Single) ' Reset Flag flgMouseDown flgMouseDown = False End Sub Private Sub CmdClearForm_Click() ' Clear the form Cls End Sub

Lưu ý là bạn phải declare variable flgMouseDown bên ngoài các Subs để mọi Sub đều thấy và có thể dùng nó. Muốn biết thêm chi tiết về cách dùng method PaintPicture, trong VB6 IDE DoubleClick lên chữ PaintPicture trong code editor để highlight chữ ấy rồi bấm nút F1.

Method PSet

Ta dùng method PSet (đến từ chữ Point Set) để vẽ một pixel lên form. Ta cần cho biết PSet ở đâu và với màu gì, tức là ta cho nó tọa độ X,Y của pixel và một màu tính từ function RGB.

Dưới đây là code để vẽ pixels đủ màu lên form một cách bất chừng (randomly) về vị trí và màu sắc khi user clicks lên form chính:

Private Sub Form_Click() Dim i As Integer ' Variables for pixel coordinates Dim iXCoord As Integer Dim iYCoord As Integer ' Variable for primary colours Dim iRed As Integer Dim iGreen As Integer Dim iBlue As Integer ' Start the Random number generation Randomize ' Plot 2000 dots randomly For i = 1 To 2000 ' get a random XCoord. ' Note that Rnd(1) returns a real number between 0 and 1, eg: 0.384 iXCoord = Int(Rnd(1) * ScaleWidth) ' get a random YCoord. iYCoord = Int(Rnd(1) * ScaleHeight) ' Get a random number between 0 and 254 for each primary colour iRed = Int(Rnd(1) * 255) iGreen = Int(Rnd(1) * 255) iBlue = Int(Rnd(1) * 255) ' Plot the pixel at iXCoord,iYCoord PSet (iXCoord, iYCoord), RGB(iRed, iGreen, iBlue) Next MsgBox ("All done!") End Sub

Khi khởi động chương trình và Click lên form ta sẽ có hình giống như dưới đây:

Method Line

Có ba cách để chỉ định tọa độ của hai đầu của một đường thẳng ta muốn vẽ:

1. 
   Cho biết tọa độ của đầu và cuối đường thẳng:
   thí dụ: Line (50, 100)-(3000, 4000)
   Khi đường nầy được vẽ xong thì vị trí của graphic cursor có tọa độ là vị trí của cuối đường, tức là CurrentX=3000 và CurrentY=4000 trong trường hợp nầy.
   
2. 
   Chỉ cho biết tọa độ cuối đường thẳng:
   thí dụ: Line -(3600, 4500), vbMagenta
   Trong trường hợp nầy vị trí của graphic cursor (CurrentX, CurrentY) được lấy làm tọa độ của đầu đường thẳng khi vẽ. Tức là nếu trước khi execute dòng code nầy CurrentX=3000 và CurrentY=4000 thì dòng code tương đương với:
   

3. 
   Dùng chữ Step để nói sự khác biệt từ CurrentX và CurrentY:
   thí dụ: Line Step(400, 600)-Step(800, -500), vbGreen
   Nếu trước khi execute dòng code nầy CurrentX=3600 và CurrentY=4500 thì dòng code tương đương với:
   

Trong thí dụ dưới đây, một hình tam giác được vẽ bằng hai cách coding khác nhau. Khi chạy program để thử, bạn hãy lần lượt click Triangle METHOD I và Triangle METHOD II để thấy cả hai cách vẽ đều y như nhau, chỉ khác màu thôi.

Private Sub CmdTrianI_Click() ' Drawing a black triangle: METHOD I Line (700, 500)-(2800, 2400) Line (2800, 2400)-(1800, 900) Line (1800, 900)-(700, 500) End Sub Private Sub CmdTrianII_Click() ' Drawing a red triangle: METHOD II ' Draw a red line from Location(700, 500) to Location (2800, 24000) Line (700, 500)-(2800, 2400), vbRed ' Draw a red line from Location(2800,2400) to Location (1800,900) Line -(1800, 900), vbRed ' Draw a red line from Location(1800,900) to Location (700,500) Line -(700, 500), vbRed End Sub

Private Sub Rectangle(ByVal X1 As Integer, ByVal Y1 As Integer, ByVal X2 As Integer, ByVal Y2 As Integer) ' Draw a rectangle Line (X1, Y1)-(X2, Y1) Line -(X2, Y2) Line -(X1, Y2) Line -(X1, Y1) End Sub

Private Sub RoundCornerRectangle(ByVal X1 As Integer, ByVal Y1 As Integer, ByVal X2 As Integer, ByVal Y2 As Integer) Const Delta = 50 ' Draw a rectangle with round corner Line (X1 + Delta, Y1)-(X2 - Delta, Y1) Line -Step(Delta, Delta) Line -(X2, Y2 - Delta) Line -Step(-Delta, Delta) Line -(X1 + Delta, Y2) Line -Step(-Delta, -Delta) Line -(X1, Y1 + Delta) Line -Step(Delta, -Delta) End Sub

Private Sub Shade(ByVal X1 As Integer, ByVal Y1 As Integer, ByVal X2 As Integer, ByVal Y2 As Integer) ' Shade a roundcorner rectangle by plotting dots using method Pset Const Delta = 50 Dim i As Integer Dim j As Integer ' Make sure that X1 is less than X2 ' Swap values of X1, X2 if X1 > X2 If X2 < X1 Then Temp = X1 X1 = X2 X2 = Temp End If ' Make sure that Y1 is less than Y2 ' Swap values of Y1, Y2 if Y1 > Y2 If Y2 < Y1 Then Temp = Y1 Y1 = Y2 Y2 = Temp End If ' Plotting dots inside the rectangle at 50 pixels apart For i = X1 + Delta To X2 - Delta Step 50 For j = Y1 + Delta To Y2 - Delta Step 50 PSet (i, j) Next Next End Sub

Bây giờ phối hợp cách vẽ hình chữ nhật với method Shade nói trên và method Print ta có thể viết chữ bên trong một khung màu nhạt như sau:

Private Sub CmdDrawFrame_Click() Dim X1 As Integer Dim Y1 As Integer Dim X2 As Integer Dim Y2 As Integer ' Initialise Coordinates of rectangle X1 = 4200: Y1 = 1000 X2 = 6200: Y2 = 2000 ' Draw a roundcorner rectangle RoundCornerRectangle X1, Y1, X2, Y2 ' Shade the rectangle Shade X1, Y1, X2, Y2 ' Position cursor to Print some text CurrentX = X1 + 50 CurrentY = Y1 + 50 ' Define Font Size Font.Size = 18 ' Print the text at cursor location Print "Hello there!" End Sub

Hãy nhớ set property AutoDraw của form ra True để các graphic chương trình vẽ không bị mất khi user minimises form.

Bạn cũng có thể dùng những kỹ thuật nói trên với Object Printer để in các mẫu giấy điền chi tiết.

Method Circle

Ta dùng Method Circle để vẽ hình tròn, hình bầu dục và đường cung, với bên trong trống rỗng hay được sơn đầy bằng một màu ta chỉ định. Ta phải cho biết tọa độ của tâm điểm vòng tròn và bán kính của nó.

Bạn hãy khởi động một dự án VB6 mới, đặt lên form một button với tên frmCircle và caption Circle & Lines. DoubleClick lên button ấy và viết code sau đây:

Private Sub CmdCircleLine_Click() ' Draw a circle centered at 2000,1500 with radius equal 800 Circle (2000, 1500), 800 ' Draw a vertical line from center Line (2000, 1500)-Step(0, 800) ' Draw a horizontal line from center Line (2000, 1500)-Step(800, 0) End Sub

Để chỉ định rằng ta sẽ vẽ từ vị trí nào trên vòng tròn đến vị trí nào khác, thí dụ từ 45độ đến 230độ, ta cần phải đổi degree ra đơn vị Radian bằng cách dùng Function Rads như sau:

Private Function Rads(ByVal Degree As Single) As Single ' Convert Degrees to Radian Const PI = 22 / 7 Rads = Degree / 180 * PI End Function

Private Sub CmdArc_Click() Circle (4000, 2000), 800, vbRed, Rads(45), Rads(230) End Sub

Dưới đây là code vẽ hai Pie Slices, có tâm điểm lệch nhau một tí, đồng thời thêm chú thích 87.5% và 12.5%.

Private Sub CmdPie_Click() FillStyle = 0 ' Fill inside any closed shaped FillColor = vbYellow ' Draw a Pie Slice from 90deg to 45deg in Yellow Circle (3000, 4000), 800, , -Rads(90), -Rads(45) ' Position the graphic cursor to Print some text CurrentX = 2800: CurrentY = 4400 Print "87.5%" FillColor = vbBlue ' Draw a Pie Slice from 45deg to 90deg in Blue Circle (3050, 3900), 800, , -Rads(45), -Rads(90) ' Position the graphic cursor to Print some text CurrentX = 3400: CurrentY = 3000 Print "12.5%" FillStyle = 1 ' No fill End Sub

Dưới đây là code ta dùng để vẽ hai hình bầu dục cùng cỡ, một cái màu tím nằm thẳng đứng và một cái màu xanh nằm ngang.

Private Sub CmdEllipse_Click() Circle (1400, 3000), 800, vbMagenta, , , 2 Circle (1400, 3000), 800, vbBlue, , , 0.5 End Sub

Property DrawMode