Flex模拟时钟开发-优快云博客

本文链接：https://blog.youkuaiyun.com/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度；
        }

    }    
}