flex两种方式画出一个动态时钟

最新推荐文章于 2019-07-18 11:49:33 发布
最新推荐文章于 2019-07-18 11:49:33 发布
阅读量1k 收藏
点赞数
分类专栏： flex
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/yuqixiansheng/article/details/48263269
版权

flex在画图方面有着得天独厚的条件.它的前身是flash,让画图和动画变得更加容易.打败了java的applet.另外就算在windows编程

这一块.flex也要比java的swing更容易编写.网上看到有人写了个java的时钟,我觉得写的太艰难,于是用flex的两种方式简单实现了一下:


方式一

采用的是画布的方式实现,利用画布中的graphics调用基础的画图API. 
<?xml version="1.0" encoding="utf-8"?>
<s:WindowedApplication xmlns:fx="http://ns.adobe.com/mxml/2009" 
					   xmlns:s="library://ns.adobe.com/flex/spark" 
					   xmlns:mx="library://ns.adobe.com/flex/mx"
					   creationComplete="init(event)">
 <fx:Script>
	 <![CDATA[
		 import mx.events.FlexEvent;
		 private var g:Graphics;
		 private var middlePointX:Number = 200;//中心点位置
		 private var middlePointY:Number = 200;
		 private var hourCursorLength:Number = 120;//各表针长度
		 private var minuteCursorLength:Number = 160;
		 private var secCursorLength:Number = 180;
		 private var hangle:Number = 0;//各表针相对于0点的角度
		 private var mangle:Number = 0;
		 private var sangle:Number = 0;
		 private var nowDate:Date;//当前时间
		 [Bindable]
		 private var hour:Number;//当前时,分,秒
		 [Bindable]
		 private var min:Number;
		 [Bindable]
		 private var sec:Number;
		 private var R:Number = 200;//表盘半径
		 
		 protected function init(event:FlexEvent):void
		 {
			 g = canvas.graphics;
			 var timer:Timer = new Timer(1000);//1秒刷新一次界面
			 timer.addEventListener(TimerEvent.TIMER,drawClock);
			 timer.start();
		 }
		 
		 private function drawClock(e:TimerEvent):void
		 {
			 g.clear();//先擦除
			 //画个表盘
			 for(var i:int = 0; i < 60; i++)//表盘上有60个点
			 {
				 var r:Number = 10;
				 if(i % 5 == 0)//每5个点是一个钟头
				 {
					 g.beginFill(0x00cc00,1);
					 r = 10;
				 }
				 else
				 {
					 g.beginFill(0xcc0000,1);
					 r = 5;
				 }
				 g.drawCircle(
				  middlePointX + R*Math.cos(Math.PI/2 - Math.PI/30*i),
				  middlePointY + R*Math.sin(Math.PI/2 - Math.PI/30*i),
				  r
				 );
				 g.endFill();
			 }
			 ///
			 nowDate = new Date;
			 hour = nowDate.getHours();
			 min = nowDate.getMinutes();
			 sec = nowDate.getSeconds();
			 //秒
			 sangle = Math.PI/2 - sec*Math.PI/30;//以90度为0点,逆时针旋转
			 drawCursor(1,0xff0000,1,secCursorLength,sangle);
			 //分
			 mangle = Math.PI/2 - (min + sec/60)*Math.PI/30;//分针的旋转角度是分和秒在分上的积累
			 drawCursor(3,0x00ff00,1,minuteCursorLength,mangle);
			 //时
			 hangle =  Math.PI/2 - (hour+min/60+sec/3600)*Math.PI/6;
			 drawCursor(6,0x0000ff,1,hourCursorLength,hangle);
		 }
		 
		 private function drawCursor(thickness:Number,color:uint,alpha:Number,cursorLen:Number,angle:Number):void
		 {
			 g.lineStyle(thickness,color,alpha);
			 g.moveTo(middlePointX,middlePointY);
			 g.lineTo(
				middlePointX + cursorLen*Math.cos(angle),
				middlePointY - cursorLen*Math.sin(angle)
			 );
		 }
	 ]]>
 </fx:Script>
	<mx:Canvas id="canvas" width="100%" height="100%" top="20" left="30"/>
</s:WindowedApplication>

方式二:

采用矢量图形的办法,这种方式在flex4之后才有.可以很方便的用现有的图形来组合出想要的效果 
<?xml version="1.0" encoding="utf-8"?>
<s:WindowedApplication xmlns:fx="http://ns.adobe.com/mxml/2009" 
					   xmlns:s="library://ns.adobe.com/flex/spark" 
					   xmlns:mx="library://ns.adobe.com/flex/mx"
					   backgroundColor="green" width="800" height="600"
					   creationComplete="init(event)">
	<fx:Script>
		<![CDATA[
			import mx.events.FlexEvent;
			
			private var increament:Number = 0;
			
			protected function init(event:FlexEvent):void
			{
				var timer:Timer = new Timer(1000);
				timer.addEventListener(TimerEvent.TIMER,function(e:TimerEvent):void
				{
					run("timer");
				});
				timer.start();  
			}
			
			private function run(mode:String = "clock"):void
			{
				var nowDate:Date = new Date;
				var hour:Number = mode == "clock" ? nowDate.hours : 0;
				var min:Number = mode == "clock" ? nowDate.minutes : 0;
				var sec:Number = mode == "clock" ? nowDate.seconds : ++increament;
				
				var sangle:Number = sec*6 - 90;
				var mangle:Number = (min + sec/60)*6 - 90 ;
				var hangle:Number =  (hour+min/60+sec/3600)*30 - 90;
				
				secNeedle.rotation = sangle;
				minNeedle.rotation = mangle;
				hourNeedle.rotation = hangle;
			}
			
		]]>
	</fx:Script>
	
	<s:Group top="30" left="50">
		
		<s:Ellipse width="300" height="300">
			<s:stroke>
				<s:SolidColorStroke color="black" weight="4"/>
			</s:stroke>
		</s:Ellipse>
		
		<s:Ellipse width="10" height="10" x="145" y="145">
			<s:stroke>
				<s:SolidColorStroke color="black" weight="2"/>
			</s:stroke>
			<s:fill>
				<s:SolidColor color="white"/>
			</s:fill>
		</s:Ellipse>
		
		<s:Line x="150" y="150" width="140" id="secNeedle" rotation="-90">
			<s:stroke>
				<s:SolidColorStroke color="red" weight="1"/>
			</s:stroke>
		</s:Line>
		
		<s:Line x="150" y="150" width="110" id="minNeedle" rotation="-90">
			<s:stroke>
				<s:SolidColorStroke color="yellow" weight="2"/>
			</s:stroke>
		</s:Line>
		
		<s:Line x="150" y="150" width="70" id="hourNeedle" rotation="-90">
			<s:stroke>
				<s:SolidColorStroke color="blue" weight="3"/>
			</s:stroke>
		</s:Line>
	</s:Group>
</s:WindowedApplication>

对第一种方式的正确理解:

<?xml version="1.0" encoding="utf-8"?>
<s:WindowedApplication xmlns:fx="http://ns.adobe.com/mxml/2009" 
<span style="white-space:pre">					</span>   xmlns:s="library://ns.adobe.com/flex/spark" 
<span style="white-space:pre">					</span>   xmlns:mx="library://ns.adobe.com/flex/mx"
<span style="white-space:pre">					</span>   creationComplete="init(event)">
 <fx:Script>
<span style="white-space:pre">	</span> <![CDATA[
<span style="white-space:pre">		</span> import mx.events.FlexEvent;
<span style="white-space:pre">		</span> 
<span style="white-space:pre">		</span> private var g:Graphics;
<span style="white-space:pre">		</span> 
<span style="white-space:pre">		</span> private var middlePointX:Number = 200;//中心点位置
<span style="white-space:pre">		</span> private var middlePointY:Number = 200;
<span style="white-space:pre">		</span> 
<span style="white-space:pre">		</span> private var hourCursorLength:Number = 120;//各表针长度
<span style="white-space:pre">		</span> private var minuteCursorLength:Number = 160;
<span style="white-space:pre">		</span> private var secCursorLength:Number = 180;
<span style="white-space:pre">		</span> 
<span style="white-space:pre">		</span> private var R:Number = 200;//表盘半径
<span style="white-space:pre">		</span> 
<span style="white-space:pre">		</span> protected function init(event:FlexEvent):void
<span style="white-space:pre">		</span> {
<span style="white-space:pre">			</span> g = canvas.graphics;
<span style="white-space:pre">			</span> var timer:Timer = new Timer(1000);//1秒刷新一次界面
<span style="white-space:pre">			</span> timer.addEventListener(TimerEvent.TIMER,drawClock);
<span style="white-space:pre">			</span> timer.start();
<span style="white-space:pre">		</span> }
<span style="white-space:pre">		</span> 
<span style="white-space:pre">		</span> private function drawClock(e:TimerEvent):void
<span style="white-space:pre">		</span> {
<span style="white-space:pre">			</span> g.clear();//先擦除
<span style="white-space:pre">			</span> //画个表盘
<span style="white-space:pre">			</span> for(var i:int = 0; i < 60; i++)//表盘上有60个点
<span style="white-space:pre">			</span> {
<span style="white-space:pre">				</span> var r:Number = 10;
<span style="white-space:pre">				</span> if(i % 5 == 0)//每5个点是一个钟头
<span style="white-space:pre">				</span> {
<span style="white-space:pre">					</span> g.beginFill(0x00cc00,1);
<span style="white-space:pre">					</span> r = 10;
<span style="white-space:pre">				</span> }
<span style="white-space:pre">				</span> else
<span style="white-space:pre">				</span> {
<span style="white-space:pre">					</span> g.beginFill(0xcc0000,1);
<span style="white-space:pre">					</span> r = 5;
<span style="white-space:pre">				</span> }
<span style="white-space:pre">				</span> g.drawCircle(
//<span style="white-space:pre">					</span> 由于整好画满一个圆周,所以从哪里画并不重要,结果都是一致的
//<span style="white-space:pre">					</span> middlePointX + R*Math.cos(Math.PI/2 - Math.PI/30*i),
//<span style="white-space:pre">					</span> middlePointY + R*Math.sin(Math.PI/2 - Math.PI/30*i),
<span style="white-space:pre">				</span>  middlePointX + R*Math.cos(Math.PI/30*i),
<span style="white-space:pre">				</span>  middlePointY + R*Math.sin(Math.PI/30*i),
<span style="white-space:pre">				</span>  r
<span style="white-space:pre">				</span> );
<span style="white-space:pre">				</span> g.endFill();
<span style="white-space:pre">			</span> }
<span style="white-space:pre">		</span>
<span style="white-space:pre">			</span> var nowDate:Date = new Date;
<span style="white-space:pre">			</span> var hour:Number = nowDate.getHours();
<span style="white-space:pre">			</span> var min:Number = nowDate.getMinutes();
<span style="white-space:pre">			</span> var sec:Number = nowDate.getSeconds();
<span style="white-space:pre">			</span> 
<span style="white-space:pre">			</span> //在PC坐标中角度递增是顺时针旋转,与笛卡尔坐标相反
<span style="white-space:pre">			</span> //另外0刻所在的角度是90度,所以要减去90度
<span style="white-space:pre">			</span> var sangle:Number = sec*Math.PI/30 - Math.PI/2 ;
<span style="white-space:pre">			</span> drawCursor(1,0xff0000,1,secCursorLength,sangle);
<span style="white-space:pre">			</span> var mangle:Number = (min + sec/60)*Math.PI/30 - Math.PI/2 ;
<span style="white-space:pre">			</span> drawCursor(3,0x00ff00,1,minuteCursorLength,mangle);
<span style="white-space:pre">			</span> var hangle:Number = (hour + min/60 + sec/3600)*Math.PI/6 - Math.PI/2 ;
<span style="white-space:pre">			</span> drawCursor(6,0x0000ff,1,hourCursorLength,hangle);
<span style="white-space:pre">		</span> }
<span style="white-space:pre">		</span> 
<span style="white-space:pre">		</span> private function drawCursor(thickness:Number,color:uint,alpha:Number,cursorLen:Number,angle:Number):void
<span style="white-space:pre">		</span> {
<span style="white-space:pre">			</span> g.lineStyle(thickness,color,alpha);
<span style="white-space:pre">			</span> g.moveTo(middlePointX,middlePointY);
<span style="white-space:pre">			</span> g.lineTo(
<span style="white-space:pre">				</span> middlePointX + cursorLen*Math.cos(angle),
<span style="white-space:pre">				</span> middlePointY + cursorLen*Math.sin(angle)
<span style="white-space:pre">			</span> );
<span style="white-space:pre">		</span> }
<span style="white-space:pre">	</span> ]]>
 </fx:Script>
<span style="white-space:pre">	</span><mx:Canvas id="canvas" width="100%" height="100%" top="20" left="30"/>
</s:WindowedApplication>

======================================================================================================================

我觉得第一种方式代码写分离性不如第二种高.第一种是要进行整体的考虑,每次都要对每个指针进行擦除和绘制.而第二种布局好了固定不变的
图形安排后.剩下的任务就是编写指针的运动逻辑.这样便于代码的阅读和维护.


结尾补充:

计算机坐标系是笛卡尔坐标系y轴区间对x轴的镜像.或者说相当于笛卡尔坐标系沿着x轴翻转180度.
笛卡尔坐标系中的顺时针,在PC坐标系看来是顺时针的,反之亦然.

Hi_JohnsonYu
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
用Flex做的时钟
05-17
一个用Flex做的取得当前系统时间的可视化时钟
flex简单时钟制作（flex学习）
03-24
NULL 博文链接：https://jonsion.iteye.com/blog/1104205
flex 写的时钟
minn84的专栏
02-11 107
俗话说，做一天和尚，撞一天钟，我就用flex做了个简单的钟表，代码如下： 12) { hourse=30*(currenthourse-12); }else { hourse=30*currenthourse; ...
flex 数字时钟
weixin_30258027的博客
08-11 88
prviate var timer:Timer; private function timeInit():void //时钟 { timer = new Timer(1000); timer.addEventListener(TimerEvent.TIMER, resetNow); //每秒执行一次resetNow timer.start();...
FLEX:数字时钟
lk215215
12-19 213
首先，需要建一个Flex工程，打开mxml文件加入代码如下： [code] [/code] 即可实现数字时钟的效果，更新时间设置为1000ms（1s）...
flex显示数字时钟和日期
wangangie11
07-02 135
　　private function init():void{ 　　var timer:Timer = new Timer(1000); 　　timer.addEventListener(TimerEvent.TIMER, this.resetTime); 　　timer.start(); 　　} 　　private function resetTime(event:Tim...
Flex数字时钟
05-14
这是一个用flex做的数字时钟，可以查看时间，时针会自动转动
flex_使用Timer类模拟时钟；
cenyebao的专栏
04-24 1524
最终效果： =>钟面类ClockFace.as package com.cen.programmingas3.simpleclock {     import flash.display.Shape;     import flash.text.TextField;     import flash.text.TextFormat;          import mx.c
用flex如何显示数字时钟
Arthur0088的专栏
11-27 2637
 通过Flex中的Timer可是实现数字时钟的效果，其效果图如下：  实现的代码如下：  <!--[CDATA[ import mx.formatters.DateFormatter; import flash.utils.Timer; import flash.events.
Flex 手绘百分比圆盘、三色渐变
03-29
Flex 手绘百分比圆盘、三色渐变，具有动态效果！
Flex中Timer的使用
wuxiaokaixinguo的专栏
12-30 5172
Flex中Timer的使用 注意：1.Timer对象不会自动开始，必须调用start()方法启动            2. 默认情况下只有调用stop()方法才会停下来.不过可以通过传递Timer构造函数的第二个参数使其运行一定次数停下来。0代表一直运行。如下          var v_timer:Timer = new Timer(2000,1);  小例子：  xmlns:
Flex4之定时器之setInterval应用（定时至某个时间发起，可循环）
haha_mingg的专栏
11-11 2889
Flex4定时器我们用得最多的是Timer定时器，但Timer一初始化的时候就会调用，这里我们使用一个比较好的定时器，让其经过指定时间后再进行某项操作，比如刷新界面的操作。 下面我来介绍它的实现，不用多说，附上代码。 首先在init函数中进行初始化。 public function initFunc():void { count = 0; interval = set
Flex版本时钟开发小记
吴林
12-16 479
开发Flex的时钟是很久的事了，当时刚开始学习Flex组件，觉得好玩，就随手做了一个，当时还是蛮开心的，今天拿出以前的代码来看。感觉蛮好的，所以分享出来供大家一起参考。由于注释的内容比较清晰。所以直接上代码：先是我的代码结构： MyClock.mxml:<?xml version="1.0" encoding="utf-8"?> <mx:Application xmlns:mx="http://w
Flex制作八方位圆盘导航控件
不会飞的鱼的专栏
11-15 3601
首先我们先新建一个MXML COMPONENT , 假设名字叫NavCircle.mxml然后我们制作导航需要的图片，如下所示： 把这个图片放入项目中，并指定其click事件：mx:Image styleName="Btns" x="0" y="0" source="user.jpg"  click="clickrect(event)"/>好啦，界面基本完成，下面就是代
flex 幸运大转盘 代码
pbrp68pbrp
07-01 136
　　 Array = [0xFFFFFF,0xFF0000,0x00FF00,0x0000FF,0xFFFF00,0x00 FFFF,0xFF00FF,0x663399]; public var ls:Shape = new Shape(); /** *圆盘半径长度 */ public var length:Number = 100; public function init():void...
【CSS】Flex布局
等时钟成长
07-18 163
Flex 这是一篇阮一峰Flex博客的阅读笔记 原文在此 1. 设置flex 任何一个容器 display: flex; 行内元素 display: inline-flex; 设置flex后，float，clear，vertical-align将失效 2. 概念 flex container 容器 容器成员称为 flex item 项目 水平轴 main axis （main start ...
flex 一行两个
最新发布
05-31
你可以使用 flex 布局中的 `flex-wrap` 属性来实现一行两个元素的效果。具体做法如下： 1. 将父元素的 `display` 属性设置为 `flex`，这样子元素就可以按照 flex 布局排列了。 2. 设置父元素的 `flex-wrap` 属性为 `wrap`，表示子元素换行排列。 3. 将子元素的宽度设置为固定值或百分比，并且设置 `flex-grow` 属性为 `0`，这样子元素就不会自动放大占满整行，而是按照宽度排列在一行上，一行最多放两个。 以下是示例代码： ```css .parent { display: flex; flex-wrap: wrap; } .child { width: 50%; /* 一行最多放两个，所以每个子元素的宽度为 50% */ flex-grow: 0; /* 禁止子元素自动放大 */ } ```

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值