Flex _ uses the Timer class to simulate the clock;

Source: Internet
Author: User

Final effect:

=> Clock face clockface.

Package com. Cen. programmingas3.simpleclock
{
Import flash. display. shape;
Import flash. Text. textfield;
Import flash. Text. textformat;

Import MX. Core. uicomponent;

/**
* Clock plane implementation class
* @ Author CEN
*/
Public class clockface extends uicomponent
{
/**
* Attribute settings */

/* Width */
Public var W: U Int = 200;

/* Height */
Public var H: uint = 200;

/* Radius */
Public var radius: uint;

/* Center Coordinate */
Public var centerx: int;
Public var centery: int;

/* Hour */
Public var hourhand: shape;
Public var hourhandcolor: uint = 0x003366;

/* Sub-needle */
Public var minutehand: shape;
Public var minutehandcolor: uint = 0x000099;

/* Seconds */
Public var secondhand: shape;
Public var secondhandcolor: uint = 0xcc0033;

/* Background Color */
Public var bgcolor: uint = 0 xeeeeff;

/* Current time */
Public var currenttime: date;

/**
* Class constructor: You can set attributes with higher width;
*/
Public Function clockface (W: uint)
{
/**
* The width and height of the circular clock */
This. W = W;
This. H = W;

/* Set the radius */
This. radius = math. Round (this. W/2 );

/* Center Coordinate */
This. centerx = This. radius;
This. centery = This. radius;
}

/**
* Initialization function: Draw circles, hours, and needles;
*/
Public Function Init (): void {
/* Draw a circle */
Drawborder ();

/* Draw the hour text */
Drawhourlabels ();

/* Draw a needle */
Createhands ();
}

/**
* Draw the needle. Use the 2D drawing API to help draw the needle;
*/
Public Function createhands (): void {

/**
* Hour */
VaR hourhandshape: Shape = new shape ();
Drawhand (hourhandshape, math. Round (radius * 0.5), hourhandcolor, 3.0 );
This. hourhand = shape (addchild (hourhandshape ));
This. hourhand. x = centerx;
This. hourhand. Y = centery;

/**
* Sub-needle */
VaR minutehandshape: Shape = new shape ();
Drawhand (minutehandshape, math. Round (radius * 0.8), minutehandcolor, 2.0 );
This. minutehand = shape (addchild (minutehandshape ));
This. minutehand. x = centerx;
This. minutehand. Y = centery;

/**
* Seconds */
VaR secondhandshape: Shape = new shape ();
Drawhand (secondhandshape, math. Round (radius * 0.9), secondhandcolor, 0.5 );
This. Secondhand = shape (addchild (secondhandshape ));
This. Secondhand. x = centerx;
This. Secondhand. Y = centery;
}

/**
* General function for drawing a needle;
* @ Param hand
* @ Param distance
* @ Param color
* @ Param Thickness
*/
Public Function drawhand (hand: shape, distance: uint, color: uint, thickness: Number): void {
Hand. Graphics. linestyle (thickness, color );
Hand. Graphics. moveTo (0, distance );
Hand. Graphics. lineto (0, 0 );
}

/**
* Draws the hour text;
*/
Public Function drawhourlabels (): void {
For (var I: Number = 1; I <= 12; I ++ ){
/**
* Create a textfield control to display the hour text */
VaR label: textfield = new textfield ();
Label. Text = I. tostring ();

/* Angle (radian )*/
VaR angleinradians: Number = I * 30 * (math. PI/180 );

/**
* Display position */
Label. x = centerx + (0.9 * radius * Math. Sin (angleinradians)-5;
Label. Y = centery-(0.9 * radius * Math. Cos (angleinradians)-9;

/**
* Set text styles */
VaR tformat: textformat = new textformat ();
Tformat. font = "Arial ";
Tformat. Bold = "true ";
Tformat. size = 12;
Label. settextformat (tformat );

/* Add to minutes */
Addchild (Label );
}
}

/**
* Draw a circle;
*/
Public Function drawborder (): void {
Graphics. linestyle (0.5, 0x999999 );
Graphics. beginfill (bgcolor );
Graphics. drawcircle (centerx, centery, radius); // draw a circle and fill it with the specified color;
Graphics. endfill ();
}

/**
* Painting time: it will be called by the parent container;
* @ Return
*/
Public Function draw (): void {
/**
* Store the current time */
Currenttime = new date ();
Showtime (currenttime );
}

/**
* Display time;
* @ Param time
*/
Public Function Showtime (Time: Date): void {
/**
* Truncation time period */
VaR seconds: uint = time. getseconds ();
VaR minutes: uint = time. getminutes ();
VaR hours: uint = time. gethours ();

/**
* At the beginning of the minute, the hour, minute, and second hands point to six points;
* If this. Secondhand. rotation is set to 90, the second hand turns clockwise to 90 degrees ;*/

This. Secondhand. Rotation = 180 + (seconds * 6); // 180 degrees indicates that the second needle starts to rotate when it returns to 12; you can calculate 6 degrees for 1 second;
This. minutehand. Rotation = 180 + (minutes * 6); // same as above, 1 minute and 6 degrees;
This. hourhand. rotation = 180 + (hours * 30) + (minutes * 0.5); // Yes, 1 hour and 30 degrees, that is, 60 points and 30 degrees, that is, the 1-time clock rotates 0.5 degrees;
}

}
}

=> Simpleclock.

Package com. Cen. programmingas3.simpleclock
{
Import com. Cen. programmingas3.simpleclock. clockface;

Import flash. Events. timerevent;
Import flash. utils. timer;

Import MX. Core. uicomponent;

/**
* Analog clock
* @ Author CEN
*/
Public class simpleclock extends uicomponent
{
/**
* Attribute settings */
/* Minutes */
Public var face: clockface;

/* Timer */
Public var ticker: timer;

/* Millisecond count per minute */
Public static const millisecondsperminute: Int = 1000*60;

/* The number of milliseconds per hour */
Public static const millisecondperhour: Int = 1000*60*60;

/* Number of milliseconds per day */
Public static const millisecondperday: Int = 1000*60*60*24;

/**
* Initialization (manual );
* @ Param facesize
*/
Public Function initclock (facesize: Number = 200): void {
/* Minutes */
Face = new clockface (math. Max (20, facesize ));

/* Manually initialize */
Face. INIT ();

/* Add the clock surface to this component */
Addchild (FACE );

/* Draw time */
Face. Draw ();

/**
* Use a calculator to refresh the clock surface */
Ticker = new timer (1000 );
Ticker. addeventlistener (timerevent. Timer, ontick );

/* Start */
Ticker. Start ();
}

/**
* Refresh each time and redraw the time;
* @ Param event
*/
Public Function ontick (Event: timerevent): void {
Face. Draw ();
}
}
}

=> Main program simpleclockapp. mxml

<? XML version = "1.0" encoding = "UTF-8"?>
<S: Application xmlns: FX = "http://ns.adobe.com/mxml/2009"
Xmlns: S = "Library: // ns.adobe.com/flex/spark"
Xmlns: MX = "Library: // ns.adobe.com/flex/mx"
Minwidth = "955" minheight = "600" pagetitle = "thestudioofcenyebao" xmlns: simpleclock = "com. Cen. programmingas3.simpleclock. *">

<! -- Zhong -->
<Simpleclock: simpleclock id = "Clock" creationcomplete = "clock. initclock ()"/>
</S: Application>

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.