Flex版本时钟开发小记

开发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 filepackage 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】