版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/u010323023/article/details/53697962
开发Flex的时钟是很久的事了，当时刚开始学习Flex组件，觉得好玩，就随手做了一个，当时还是蛮开心的，今天拿出以前的代码来看。感觉蛮好的，所以分享出来供大家一起参考。由于注释的内容比较清晰。所以直接上代码：
首先来看看效果：
接下来是我的代码结构：
MyClock.mxml:
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
xmlns:view="com.wulin.simpleclock.*"
layout="absolute" minWidth="955" minHeight="600">
<view:SimpleClock id="clock" creationComplete="clock.initClock()"/>
</mx:Application>模拟时钟类：
package com.wulin.simpleclock
{
/**
*Administrator
*2016
*May 11, 2016
*public class SimpleClock
**/
import com.wulin.simpleclock.ClockFace;
import flash.events.TimerEvent;
import flash.utils.Timer;
import mx.core.UIComponent;
/**
* 模拟时钟类
* @author cen
*/
public class SimpleClock extends UIComponent
{
/**
* 属性设置*/
/*钟面*/
public var face:ClockFace;
/*计时器*/
public var ticker:Timer;
/*每分钟毫秒数*/
public static const millisecondsPerMinute:int = 1000 * 60;
/*每小时毫秒数*/
public static const millisecondPerHour:int = 1000 * 60 * 60;
/*每天毫秒数*/
public static const millisecondPerDay:int = 1000 * 60 * 60 * 24;
/**
* 初始化(手动)；
* @param faceSize
*/
public function initClock(faceSize:Number=200):void{
/*钟面*/
face = new ClockFace(Math.max(20, faceSize));
/*手动初始化*/
face.init();
/*把钟面添加到此组件上*/
addChild(face);
/*绘制时间*/
face.draw();
/**
* 使用计算器来刷新钟面*/
ticker = new Timer(1000);
ticker.addEventListener(TimerEvent.TIMER, onTick);
/*开始*/
ticker.start();
}
/**
* 每次都刷新，重新绘制时间；
* @param event
*/
public function onTick(event:TimerEvent):void{
face.draw();
}
}
}钟面实现类：
// ActionScript file
package com.wulin.simpleclock
{
import flash.display.Shape;
import flash.text.TextField;
import flash.text.TextFormat;
import mx.core.UIComponent;
import mx.controls.Alert;
/**
* 钟面实现类
* @author cen
*/
public class ClockFace extends UIComponent
{
/**
* 属性设置*/
/*宽度*/
public var w:uint = 200;
/*高度*/
public var h:uint = 200;
/*半径*/
public var radius:uint;
/*圆心坐标*/
public var centerX:int;
public var centerY:int;
/*时针*/
public var hourHand:Shape;
public var hourHandColor:uint = 0x003366;
/*分针*/
public var minuteHand:Shape;
public var minuteHandColor:uint = 0x000099;
/*秒针*/
public var secondHand:Shape;
public var secondHandColor:uint = 0xCC0033;
/*背景颜色*/
public var bgColor:uint = 0xEEEEFF;
/*当前时间*/
public var currentTime:Date;
/**
* 类构造函数:可以设置宽高等属性；
*/
public function ClockFace(w:uint)
{
/**
* 圆钟宽高等长*/
this.w = w;
this.h = w;
/*设置半径*/
this.radius = Math.round(this.w / 2);
/*圆心坐标*/
this.centerX = this.radius;
this.centerY = this.radius;
}
/**
* 初始化函数：绘制圆圈、小时以及针；
*/
public function init():void{
/*绘制圆圈*/
drawBorder();
/*绘制小时文本*/
drawHourLabels();
/*绘制 针*/
createHands();
}
/**
* 绘制针；使用2D绘制API来帮忙绘制；
*/
public function createHands():void{
/**
* 时针*/
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;
/**
* 分针*/
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;
/**
* 秒针*/
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;
}
/**
* 绘制针通用函数；
* @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);
}
/**
* 绘制小时文本；
*/
public function drawHourLabels():void{
/**
* 绘制圆圈；
*/
public function drawBorder():void{
graphics.lineStyle(0.5, 0x999999);
graphics.beginFill(bgColor);
graphics.drawCircle(centerX, centerY, radius); // 绘制圆并用指定颜色填充；
graphics.endFill();
}
/**
* 绘制时间：会被父容器调用；
* @return
*/
public function draw():void{
/**
* 存储当前时间*/
currentTime = new Date();
showTime(currentTime);
}
/**
* 显示时间；
* @param time
*/
public function showTime(time:Date):void{
/**
* 截取时间段*/
var seconds:uint = time.getSeconds();
var minutes:uint = time.getMinutes();
var hours:uint = time.getHours();
/**
* 钟面初始时，时针、分针以及秒针都指向6点；
* 如果设置this.secondHand.rotation = 90;就表示此时秒针顺时针转90度；*/
this.secondHand.rotation = 180 + (seconds*6); // 180度指的是使秒针回到12时才开始转动；可以算出1秒6度；
this.minuteHand.rotation = 180 + (minutes*6); // 同上，1分6度；
this.hourHand.rotation = 180 + (hours*30) + (minutes*0.5); //知道，1小时30度，那1分就是60分之30度，即1分时时钟转动0.5度；
}
}
}如此看来，是不是很简单，一起来试试吧！
友情提示：请尊重作者劳动成果，如需转载本博客文章请注明出处！谢谢合作！
【作者：吴林 http://blog.csdn.NET/wulin】