หลักการทำ Animation แบบง่ายๆ โดย อ. นัฐพงศ์ ส่งเนียม VB.NET_02_graphics_in_vb_n et_06_Animation02_Analog_C lock

โปรแกรมนาฬิกาแบบ Analog

ตั้งชื่อ VB11_Animation02_Analog_Clock ไปที่ เมนู File เลือก New เลือก Project ตั้งชื่อ :: VB11_Animation02_Analog_Clock

กำหนดคุณสมบัติของฟอร์มดังนี้ Name :: Frm_Animation02_Analog_Clock Text :: โปรแกรมนาฬิกาแบบ Analog BackColor ::

นำ Timer มาวางบนฟอร์ม แล้วกำหนดคุณสมบัติของ Time ดังนี้ – Name :: Timer1 – Enabled :: True – Interval :: 1000

เพิ่ม Name Space ที่เกี่ยวข้องดังนี้

เลือกเหตุการณ์ Form_Paint

สร้าง Background ของ นาฬิกา So we should have enough of a grasp on GDI to implement our analog clock now. I saw a really nice looking clock on Codeproject, so my inspiration has come from there (but not the code itself, one must learn to do things for oneself). Codeproject

คำสั่งส่วนแรก ' Get Graphics Object Dim g As Graphics = e.Graphics ' Create Rectangle To Limit brush area. Dim rect As New Rectangle(20, 20, 230, 230) ' Create Brush Dim linearBrush As New LinearGradientBrush(rect, Color.FromArgb(0, 0, 0), _ Color.FromArgb(120, 120, 255), 225) ' Draw Outer Rim to screen. g.FillEllipse(linearBrush, 20, 20, 200, 200) linearBrush.LinearColors = New Color() {Color.FromArgb(120, 120, 225), Color.FromArgb(0, 0, 0)} ' Draw Inner Rim to screen. g.FillEllipse(linearBrush, 30, 30, 180, 180) 1 1

The Face เพิ่มวงกลมด้านในรูป linearBrush.LinearColors = New Color() {Color.FromArgb(0, 0, _ 0), Color.FromArgb(120, 120, 255)} ' Draw face to screen. g.FillEllipse(linearBrush, 33, 33, 174, 174) 2 2

พิมพ์ตัวเลขเวลา ' Create Brush Dim numeralBrush As New SolidBrush(Color.White) ' Create Font Dim textFont As New Font("Arial Bold", 12.0F) ' Draw Numerals g.DrawString("12", textFont, numeralBrush, 109, 40) g.DrawString("11", textFont, numeralBrush, 75, 50) g.DrawString("10", textFont, numeralBrush, 47, 75) g.DrawString("9", textFont, numeralBrush, 43, 110) g.DrawString("8", textFont, numeralBrush, 52, 145) g.DrawString("7", textFont, numeralBrush, 75, 170) g.DrawString("6", textFont, numeralBrush, 113, 180) g.DrawString("5", textFont, numeralBrush, 150, 170) g.DrawString("4", textFont, numeralBrush, 173, 145) g.DrawString("3", textFont, numeralBrush, 182, 110) g.DrawString("2", textFont, numeralBrush, 173, 75) g.DrawString("1", textFont, numeralBrush, 150, 50) 3 3

วาดเข็มนาฬิกา ส่วนที่ 1 ' In order to draw the hands, we need to Translate to the center of the clock. g.TranslateTransform(120, 120, MatrixOrder.Append) ' Get the current time ดึงเวลาปัจจุบันของเครื่อง เป็น ชั่วโมง นาที วินาที Dim hour As Integer = DateTime.Now.Hour Dim min As Integer = DateTime.Now.Minute Dim sec As Integer = DateTime.Now.Second ' Create Brushes and Pens Dim hourBrush As New SolidBrush(Color.White) Dim minuteBrush As New SolidBrush(Color.LightGray) Dim secondPen As New Pen(Color.Red, 1) ' Create angles สร้างมุมสำหรับ วินาที นาที และ ชั่วโมง Dim secondAngle As Single = 2.0 * Math.PI * sec / 60.0 Dim minuteAngle As Single = 2.0 * Math.PI * (min + sec / 60.0) / 60.0 Dim hourAngle As Single = 2.0 * Math.PI * (hour + min / 60.0) /

วาดเข็มนาฬิกา ส่วนที่ 2 ' Set centre point Dim centre As New Point(0, 0) ' Draw Hour Hand วาดเข็ม ชั่วโมง Dim gpHour As New GraphicsPath() Dim HourArrow As Point() = { _ New Point(Convert.ToInt32(40 * Math.Sin(hourAngle)), _ Convert.ToInt32(-40 * Math.Cos(hourAngle))), _ New Point(Convert.ToInt32(-5 * Math.Cos(hourAngle)), _ Convert.ToInt32(-5 * Math.Sin(hourAngle))), _ New Point(Convert.ToInt32(5 * Math.Cos(hourAngle)), _ Convert.ToInt32(5 * Math.Sin(hourAngle))), _ New Point(Convert.ToInt32(40 * Math.Sin(hourAngle)), _ Convert.ToInt32(-40 * Math.Cos(hourAngle)))} gpHour.AddPolygon(HourArrow) g.FillPath(hourBrush, gpHour) g.FillEllipse(hourBrush, -5, -5, 10, 10) 5 5

วาดเข็มนาฬิกา ส่วนที่ 3 ' Draw Minute Hand Dim gpMinute As New GraphicsPath() Dim MinuteArrow As Point() = { _ New Point(Convert.ToInt32(70 * Math.Sin(minuteAngle)), _ Convert.ToInt32(-70 * Math.Cos(minuteAngle))), _ New Point(Convert.ToInt32(-5 * Math.Cos(minuteAngle)), _ Convert.ToInt32(-5 * Math.Sin(minuteAngle))), _ New Point(Convert.ToInt32(5 * Math.Cos(minuteAngle)), _ Convert.ToInt32(5 * Math.Sin(minuteAngle))), _ New Point(Convert.ToInt32(70 * Math.Sin(minuteAngle)), _ Convert.ToInt32(-70 * Math.Cos(minuteAngle)))} gpMinute.AddPolygon(MinuteArrow) g.FillPath(minuteBrush, gpMinute) g.FillEllipse(minuteBrush, -5, -5, 10, 10) 6 6

วาดเข็มนาฬิกา ส่วนที่ 4 ' Draw Second Hand Dim secHand As New Point(Convert.ToInt32(70 * Math.Sin(secondAngle)), _ Convert.ToInt32(-70 * Math.Cos(secondAngle))) g.DrawLine(secondPen, centre, secHand) ' Now tidy up linearBrush.Dispose() numeralBrush.Dispose() textFont.Dispose() hourBrush.Dispose() minuteBrush.Dispose() secondPen.Dispose() 7 7

คำสั่งใน Timer Private Sub Timer1_Tick(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles Timer1.Tick Me.Invalidate() End Sub 8 8