WinForm Learning--A simple analog clock program

Today to learn GDI +, try to write a simulation clock of the small program, originally thought very simple implementation, but in fact, there are some complicated, especially the use of the triangular function of that part, let me look around for information on the high school math to find out, now review this program.

The purpose of the program is to simulate the effect of the clock, that is, the first thing is to draw the look of the clock. Regardless of aesthetics, the simplest composition of a clock is a round dial, with three straight lines representing the hour, minute and second hand.

It looks simple, but how do you draw it? Let's take one step at a pace:

1. Draw the Dial

Graphics g = This. CreateGraphics ();//Create a Graphics objectPen Mypen=NewPen (Color.Blue,1);//Create a custom Brush object//Create a square rectintmyrect_x = This. clientrectangle.right/4;intMyrect_y = This. clientrectangle.bottom/4;intMyrect_width;intMyrect_height;if( This. clientrectangle.height< This. Clientrectangle.width) {Myrect_width= This. clientrectangle.height/2; Myrect_height= This. clientrectangle.height/2;}Else{myrect_width= This. clientrectangle.width/2; Myrect_height= This. clientrectangle.width/2;} Rectangle rect=NewRectangle (myrect_x,myrect_y,myrect_width,myrect_height); G.drawellipse (mypen,rect);//draw a circle that is cut inside a rectangle rect

There are several overloads of the Graphics.drawellipse method, of which the more common is graphics.drawellipse (pen,rectangle), which requires a Rectangle parameter to be supplied. Then the ellipse is cut out according to the shape of the rectangle, and if the rectangle is a square, the tangent is a positive circle.

The key point of this procedure is to get the rectangle, because it indirectly determines the position and size of the dial, the rectangle constructor requires four parameters, the x, y coordinates, width and height of the upper left corner of the rectangle.

The ClientRectangle here represents the work area of the control, which is also an object of type rectangle, which is the boundary of the accused piece minus the non-working area elements such as scroll bars, borders, title bars, and menus. The corresponding right,bottom,width,height represent the x-coordinate of the right edge, the y-coordinate of the lower edge, and the width and height respectively.

In order to adapt the dial to the changes in the window, these values are all set relative to the value of the ClientRectangle related property, such as:

In this way, when the window size changes, the circle of the bounding rectangle is also changed, if the width of the window is much larger than the height, or vice versa, it may appear that the part of the dial beyond the work area can not be displayed, in order to prevent this situation, added conditional judgment statement. If the width is greater than the height, the diameter of the circle takes the height value, whereas the width value is taken. When height equals width, the circle is in the middle of the working area.

2. Draw the Needle

Once the dial is painted, you can start drawing the hands, which is also the most complicated step.

//Get center Point coordinatesintcenterpoint_x = rect. Right-rect. width/2;intcenterpoint_y = rect. Bottom-rect. height/2; Point CenterPoint=NewPoint (centerpoint_x,centerpoint_y);intS_len = rect. width*0.45;//second hand lengthintM_len = rect. width*0.35//minute hand lengthintL_len = rect. width*0.25 //hour hand length//Get current Timeinth =DateTime.Now.Hour;intm =DateTime.Now.Minute;ints =DateTime.Now.Second;//get the second hand vertex coordinatesintSec_x = (int) (Centerpoint.x + Math.sin (6*math.pi/ the*s) *S_len);intSec_y = (int) (Centerpoint.y-math.cos (6*math.pi/ the*s) *S_len); Point Secpoint=NewPoint (sec_x,sec_y);//get the minute hand vertex coordinatesintMin_x = (int) (Centerpoint.x + Math.sin (6*math.pi/ the*M) *M_len);intMin_y = (int) (Centerpoint.y-math.cos (6*math.pi/ the*M) *M_len); Point MinPoint=NewPoint (min_x,min_y);//get the hour vertex coordinatesintHour_x = (int) (Centerpoint.x + Math.sin (h* -+m/2) *math.pi/ the*H_len);intHour_y = (int) (Centerpoint.y-math.cos (h* -+m/2) *math.pi/ the*H_len); Point Hourpoint=NewPoint (hour_x,hour_y);//connect in a different colorMypen =NewPen (Color.Blue,1); G.drawline (Mypen,centerpoint,secpoint); //connecting origin and second hand verticesMypen =NewPen (Color.green,2); G.drawline (Mypen,centerpoint,minpoint); //connecting the origin and the minute point verticesMypen =NewPen (Color.Red,3); G.drawline (Mypen,centerpoint,hourpoint); //connect origin and hour verticesG.dispose ();//release all resources used by the Graphics object

To draw a line, you have to get the two vertex coordinates of the line, in which three hands have a common origin (the center of the dial), and then how to get another point is what we're going to do next.

Let's go back to the concept of trigonometric functions, the sin value is the edge/hypotenuse, the Cos value is the adjacent edge/hypotenuse is obtained, the coordinates of this point is to find out the two sides of the triangle, the length of one side is X, the other is the length of Y. What we already know is the length of the hypotenuse, which requires the two edges to know the Radian value first.

Let's consider the longest second hand, which moves an angle every second, which we can calculate:

360/60=6

Get 6 degrees, it is not difficult to understand, because the whole circle is 360 degrees, the general clock in the adjacent hours and there are 5 ticks, so a total of 12*5=60 a scale, and then use 360/60=6 to get the second hand for 6 degrees, in the program must convert the angle to radians to do sin, so also multiply pi/180 (PI).

With this radian value, we can get the vertex coordinates of the second hand in seconds (to be considered in the first interval):

sec_x = Centerpoint.x + sin (6*pi/) * Current Second value *= Centerpoint.y-cos (6*pi/180 ) * Current seconds value *s_len

The next hour, because this is a very simple simulation, so we don't need to deal with the details too much, let it jump to the next tick every minute, so the vertex coordinates of the hour and the second hand are the same algorithm:

min_x = Centerpoint.x + sin (6*pi/) * Current minute value *= Centerpoint.y-cos (6*pi/180 ) * Current minute value *m_len

The hour hand is handled differently, because the hour hand has a value of only 12 digits, while the minute and the second hand have 60 digits, and if the hour hand is handled in the previous way, the effect is that it turns 30 degrees at a time, and of course there is no such effect on the clock. So what are we supposed to do with this tricky hour?

If it is 06:45:30, at 6 o'clock, its degree is 30*6, the whole 7 points is 30*7, in order not to change all in the last moment, we add the hour hand value to participate in the calculation, so that the current time is h*30+m/2,m 60 o'clock m/2=30, that is m/ 2 This value is between 0--30 and when the angle changes to 30 degrees, it points to the next hour.

So we get the algorithm of the hour hand:

hour_x = Centerpoint.x + sin ((h*-+m/2) *pi/+) *= Centerpoint.y-cos ((h*30 +m/2) *pi/*h_len

The most critical code processing, the rest of the work is simple, we add a tag lbltime in the program to show the current time:

stringTimeinstring ="";inthour =DateTime.Now.Hour;intMin =DateTime.Now.Minute;intSEC =DateTime.Now.Second; Timeinstring= (hour<Ten)?"0"+hour. ToString (): Hour. ToString (); Timeinstring+ = (min<Ten)?"0"+min. ToString (): Min. ToString (); Timeinstring= = (sec<Ten)?"0"+sec. ToString (): Sec. ToString (); Lbltime.text= timeinstring;

Program Last Run Effect:

WinForm Learning--A simple analog clock program