MyException - 我的异常网
当前位置:我的异常网» Flex » Flex Graphics 画时间轴测试事例

Flex Graphics 画时间轴测试事例

www.myexceptions.net  网友分享于:2015-02-11  浏览:0次
Flex Graphics 画时间轴测试例子

视频监控的web观看端有视频回放这一块,需要做一个时间轴,下面是根据Graphics画的时间轴的例子


下图是应用到项目中:


例子做的只是把时间轴网格,时间轴填充和会移动的时间画出来了,很多细节没有,例子中有用Flex画文字的两种实现方式,画时间刻度那种实现不知道怎么改样式

代码如下:

<?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:smf="com.smithfox.components.*"
			   xmlns:mx="library://ns.adobe.com/flex/mx" xmlns:components="components.*"
			   creationComplete="application1_creationCompleteHandler(event)" mouseUp="timeLineBg_mouseUpHandler(event)">
	
	<fx:Declarations>
	</fx:Declarations>
	<fx:Style>
		@namespace s "library://ns.adobe.com/flex/spark";
		@namespace mx "library://ns.adobe.com/flex/mx";

	</fx:Style>
	<fx:Script>
		<![CDATA[
			import flash.filters.BitmapFilter;
			import flash.filters.BitmapFilterQuality;
			import flash.filters.BitmapFilterType;
			import flash.filters.GlowFilter;
			import flash.filters.GradientGlowFilter;
			import flash.utils.setInterval;
			
			import mx.controls.Alert;
			import mx.core.INavigatorContent;
			import mx.core.UITextField;
			import mx.events.FlexEvent;
			import mx.graphics.ImageSnapshot;
			
			private var currentTime:String = "12:55:55";

			protected function application1_creationCompleteHandler(event:FlexEvent):void
			{
				this.drawTimeline(24, 3, 24);
				
			}
			
			/**
			 * 画时间轴网格
			 * @param col 列
			 * @param row 行
			 * @param h 当前显示的时段
			 **/
			private function drawTimeline(col:Number, row:Number, h:Number):void{
				timeLine.graphics.lineStyle(1, 0x6B6B6B);
				//画横线
				for(var i:int = 0; i < row; i++){
					timeLine.graphics.moveTo(0, 20+(20*i)+i);
					timeLine.graphics.lineTo(timeLineBg.width-2, 20+(20*i)+i);
				}
				//画竖线
				var colX:Number = timeLineBg.width/col;
				for(var j:int = 1; j < col; j++){
					timeLine.graphics.moveTo(colX*j, 0);
					timeLine.graphics.lineTo(colX*j, timeLineBg.height-2);
				}
				timeLine.graphics.endFill();
				//画刻度
				drawTimeTick(col, h, currentTime);
			}
			
			//切换小时显示
			private function changeHourShow(col:Number, row:Number, h:Number):void{
				timeLine.graphics.clear();
				var timeArr:Array = new Array({startTime:1422900000, endTime:1422910800},
					{startTime:1422911800, endTime:1422921000},{startTime:1422921600, endTime:1422940600});
				var timeArr1:Array = new Array({startTime:1422892800, endTime:1422979199});
				this.fillTimeLine(0, col, h, timeArr1);
				this.fillTimeLine(1, col, h, timeArr);
				this.fillTimeLine(2, col, h, timeArr1);
				this.fillTimeLine(3, col, h, timeArr);
				this.drawTimeline(col, row, h);
			}
			
			/**
			 * 画时间刻度值
			 * @param col 时间对应多少列
			 * @param h 当前显示的时段
			 * @param playTime 当前播放的时间
			 **/
			private function drawTimeTick(col:Number, h:Number, playTime:String):void{
				var arr:Array = getTickArr(h, playTime);
				var uit:UITextField = null;
				for(var i:int = 0; i < arr.length; i++){
					uit = new UITextField(); 
					var timeStr:String = arr[i];
					uit.text = timeStr;
					var textBitmapData:BitmapData = ImageSnapshot.captureBitmapData(uit); 
					var matrix:Matrix = new Matrix(); 
					var x:int = i*(timeLineBg.width/col); 
					var offSet:Number = 0; //偏移位置
					//中间刻度值的位置
					if(timeStr.length == 1){
						offSet = 5;
					} else if(timeStr.length == 2){
						offSet = 8;
					} else if(timeStr.length == 3){
						offSet = 11;
					} else if(timeStr.length == 4){
						offSet = 11;
					} else if(timeStr.length == 5){
						offSet = 15;
					}
					if(i > 0 && i < arr.length - 1){
						x = x - offSet; //设置中间的刻度值的位置
					}
					if(i == arr.length - 1){
						//最后一个刻度值的位置
						if(timeStr.length == 1){
							offSet = 12;
						} else if(timeStr.length == 2){
							offSet = 17;
						} else if(timeStr.length == 3){
							offSet = 11;
						} else if(timeStr.length == 4){
							offSet = 26;
						} else if(timeStr.length == 5){
							offSet = 31;
						}
						x = x - offSet;
					}
					var y:int = -20; //向上20个像素
					matrix.tx = x; 
					matrix.ty = y; 
					timeLine.graphics.lineStyle();
					timeLine.graphics.beginBitmapFill(textBitmapData,matrix,false); 
					timeLine.graphics.drawRect(x,y,uit.measuredWidth,uit.measuredHeight); 
					timeLine.graphics.endFill(); 
				}
			}
			
			private function getTickArr(h:Number, time:String):Array{
				var arr:Array = new Array();
				var timeArr:Array = time.split(":");
				var hour:Number = timeArr[0]; 
				var min:Number = timeArr[1];
				var sec:Number = timeArr[2];
				if(h == 24){ //24小时直接添加所有刻度
					arr.push(0,1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20,21,22,23,24);
				} else if(h == 2){ //两小时的刻度开始结束时间都为偶数
					if(hour%2 == 0){
						arr.push(hour.toString());
						arr.push(hour+":10",hour+":20",hour+":30",hour+":40",hour+":50");
						hour += 1;
						arr.push(hour.toString());
						arr.push(hour+":10",hour+":20",hour+":30",hour+":40",hour+":50");
						arr.push((hour + 1).toString());
					} else{
						arr.push((hour-1).toString());
						arr.push(hour+":10",hour+":20",hour+":30",hour+":40",hour+":50");
						arr.push(hour.toString());
						arr.push(hour+":10",hour+":20",hour+":30",hour+":40",hour+":50");
						arr.push((hour + 1).toString());
					}
				} else if(h == 1){
					arr.push(hour.toString());
					arr.push(hour+":05",hour+":10",hour+":15",hour+":20",hour+":25",hour+":30");
					arr.push(hour+":35",hour+":40",hour+":45",hour+":50",hour+":55",(hour+1).toString());
					
				} else{
					if(min < 30){
						arr.push(hour.toString());
						arr.push(hour+":03",hour+":06",hour+":09",hour+":12",hour+":15");
						arr.push(hour+":18",hour+":21",hour+":24",hour+":27",hour+":30");
					} else{
						arr.push(hour+":30",hour+":33",hour+":36",hour+":39",hour+":42");
						arr.push(hour+":45",hour+":48",hour+":51",hour+":54",hour+":57");
						arr.push((hour + 1).toString());
					}
				}
				return arr;
			}
			
			/**
			 * 填充时间
			 * @param index 填充第几行
			 * @param col 小时对应的列
			 * @param h 当前所在的时段
			 * @param timeArr 要填充的时间段
			 **/
			private function fillTimeLine(index:Number, col:Number, h:Number, timeArr:Array):void{
				for(var i:int = 0; i < timeArr.length; i++){
					var startTime:String = timeArr[i].startTime; //开始时间
					var endTime:String = timeArr[i].endTime; //结束时间
					var tickArr:Array = this.getTickArr(h, currentTime); //时间刻度数组
					var tickStart:String = tickArr[0]; //时间刻度第一个值
					var tickEnd:String = tickArr[tickArr.length-1]; //时间刻度最后一个值
					//分别获取到时间刻度开始和最后一个值的时和分
					var tickStartH:int = 0;
					var tickStartM:int = 0;
					var tickEndH:int = 0;
					var tickEndM:int = 0;
					if(tickStart.indexOf(":") != -1){
						tickStartH = int(tickStart.substring(0, tickStart.indexOf(":"))); //取第一个用来比较
						tickStartM = int(tickStart.substring(tickStart.indexOf(":") + 1, tickStart.length));
					} else{
						tickStartH = int(tickStart);
					}
					if(tickEnd.indexOf(":") != -1){
						tickEndH = int(tickEnd.substring(0, tickEnd.indexOf(":"))); //取第一个用来比较
						tickEndM = int(tickEnd.substring(tickEnd.indexOf(":") + 1, tickEnd.length));
					} else{
						tickEndH = int(tickEnd);
					}
					
					//开始刻度值的秒
					var startTickSecond:Number = tickStartH*3600 + tickStartM*60;
					//结束刻度值的秒
					var endTickSecond:Number = tickEndH*3600 + tickEndM*60;
					//开始时间转成date
					var startDate:Date = new Date(Number(startTime)*1000); 
					//开始时间的秒
					var startSecond:Number = startDate.hours*3600 + startDate.minutes*60 + startDate.seconds;
					//结束时间转成date
					var endDate:Date = new Date(Number(endTime)*1000); 
					//结束时间的秒
					var endSecond:Number = endDate.hours*3600 + endDate.minutes*60 + endDate.seconds;
					
					//时间轴的宽减去两像素的边框
					var timeLineWidth:Number = timeLine.width;
					//开始时间的位置
					var startPositon:Number = (timeLineWidth*(startSecond-startTickSecond))/(h*3600);
					//结束时间的位置
					var endPosition:Number = (timeLineWidth*(endSecond-startTickSecond))/(h*3600);
					
					//填充的属性
					var myMatrix:Matrix = new Matrix();;
					var colors:Array = [0x427530, 0x4C9230, 0x91CC7A];
					var alphas:Array = [1, 1, 1];
					var ratios:Array = [0, 122,255];
					
					var fillW:Number = 0; //需要填充的宽
					var fillX:Number = 0; //填充的位置
					if(startSecond >= startTickSecond && endSecond <= endTickSecond){ //起始结束时间都在刻度值内
						fillX = startPositon;
						fillW = endPosition - startPositon;
					} else if(startSecond < startTickSecond && endSecond > endTickSecond){ //起始结束时间分别在两侧
						fillX = 0; 
						fillW = timeLineWidth;
					} else if((startSecond >= startTickSecond && startSecond < endTickSecond) &&
						endSecond > endTickSecond){ //起始时间在,结束时间不在
						fillX = startPositon; 
						fillW = timeLineWidth- startPositon;
					} else if((startSecond < startTickSecond && endSecond > startTickSecond) &&
						endSecond <= endTickSecond){ //起始时间不在,结束时间在
						fillX = 0; 
						fillW = endPosition;
						if(endSecond >= endTickSecond){
							fillW = endPosition;
						}
					}
					myMatrix.createGradientBox(fillW, 20, 80, fillX, (20*index)+index);
					timeLine.graphics.beginGradientFill(GradientType.LINEAR, colors, alphas, ratios, myMatrix);
					timeLine.graphics.drawRect(fillX, (20*index)+index, fillW, 20);
					timeLine.graphics.endFill();
				}
			}
			
			protected function timeLine_clickHandler(event:MouseEvent):void
			{
				
			}
			
			private function drawTimeFrame(index:Number, time:String):void{
				var timeArr:Array = time.split(":");
				var timeSecond:Number = int(timeArr[0])*3600 + int(timeArr[1])*60 + int(timeArr[2]);
				var xPositon:Number = (timeSecond*timeLine.width)/(24*3600);
				var rightPostion:Number = timeLine.width - xPositon;
				var vRuleXPostion:Number = xPositon + 1;
				var timeXPosition:Number = xPositon + 5;
				var bgXPosition:Number = xPositon + 2;
				if(rightPostion < 100){
					//vRuleXPostion += 60;
					timeXPosition -= 60;
					bgXPosition -= 60;
				}
				var drawGroup:Group = Group(timeLine.getElementAt(index));
				drawGroup.graphics.clear();
				var uit:TextField = new TextField();
				uit.text = time;
				var txtFormat:TextFormat = new TextFormat("",14,0xFFFFFF,false);
				uit.setTextFormat(txtFormat);
				var bitmapdata:BitmapData = new BitmapData(60, 20, true, 0);
				bitmapdata.draw(uit);
				var matrix:Matrix = new Matrix(); 
				matrix.tx = timeXPosition; 
				matrix.ty = (20*index)+index; 
				drawGroup.graphics.beginBitmapFill(bitmapdata,matrix,false); 
				drawGroup.graphics.drawRect(timeXPosition, (20*index)+index, 60, 20);
				drawGroup.graphics.endFill(); 
				drawGroup.graphics.beginFill(0xD5F0CA, 0.3);
				drawGroup.graphics.drawRect(bgXPosition,(20*index)+index, 60, 20);
				drawGroup.graphics.endFill(); 
				drawGroup.graphics.lineStyle(2, 0XFFDF2B);
				drawGroup.graphics.moveTo(vRuleXPostion,(20*index)+index + 1);
				drawGroup.graphics.lineTo(vRuleXPostion, (20*index)+index+20-1);
				drawGroup.graphics.endFill(); 
			}
			
			protected function testClickHandler(event:MouseEvent):void
			{
				drawTimeFrame(int(event.currentTarget.label), "05:30:0");
				setInterval(function():void{
					var date:Date = new Date();
					if(mouseDownIndex == -1){
						drawTimeFrame(0, date.hours + ":" + date.minutes + ":" + date.seconds);
					}
				}, 1000);
			}
			
			private var mouseDownIndex:int = -1;
			protected function timeLineBg_mouseDownHandler(event:MouseEvent):void
			{
				var xPosition:Number = event.localX;
				var yPosition:Number = event.localY;
				mouseDownIndex = yPosition/20;
				var timeDrawGroup:Group = timeLine.getElementAt(mouseDownIndex) as Group;
				var timeSecond:int = (xPosition*24*3600)/timeLine.width;
				var h:int = timeSecond/3600;
				var mm:int = timeSecond%3600;
				var m:int = mm/60;
				var ss:int = m%60;
				var date:Date = new Date();
				drawTimeFrame(mouseDownIndex, h + ":" + m + ":" + ss);
			}
			
			protected function timeLineBg_mouseUpHandler(event:MouseEvent):void
			{
				if(mouseDownIndex == -1){
					return;
				}
				drawTimeFrame(mouseDownIndex, "05:30:0");
				mouseDownIndex = -1;
			}
			
		]]>
	</fx:Script>
	<s:BorderContainer id="timeLineBg" width="854" height="85" verticalCenter="0" horizontalCenter="0" 
					   backgroundColor="0x383f46" borderColor="0x272a2e" click="timeLine_clickHandler(event)"
					   mouseDown="timeLineBg_mouseDownHandler(event)">
		<s:Group id="timeLine" top="0" left="0" right="0" bottom="0">
			<s:Group id="timeFrameOne"/>
			<s:Group id="timeFrameTwo"/>
			<s:Group id="timeFrameThree"/>
			<s:Group id="timeFrameFour"/>
		</s:Group>
	</s:BorderContainer>
	
	<s:HGroup verticalCenter="70" horizontalCenter="0">
		<s:Button label="24h" click="changeHourShow(24, 3, 24)"/>
		<s:Button label="2h" click="changeHourShow(12, 3, 2)"/>
		<s:Button label="1h" click="changeHourShow(12, 3, 1)"/>
		<s:Button label="30m" click="changeHourShow(10, 3, 0.5)"/>
	</s:HGroup>
	
	<s:HGroup verticalCenter="95" horizontalCenter="0">
		<s:Button label="0" click="testClickHandler(event)"/>
		<s:Button label="1" click="testClickHandler(event)"/>
		<s:Button label="2" click="testClickHandler(event)"/>
		<s:Button label="3" click="testClickHandler(event)"/>
	</s:HGroup>
	
	<s:Button label="clear" verticalCenter="125" horizontalCenter="0" click="timeFrameTwo.graphics.clear();"/>
	
</s:Application>


文章评论

程序员和编码员之间的区别
程序员和编码员之间的区别
程序猿的崛起——Growth Hacker
程序猿的崛起——Growth Hacker
编程语言是女人
编程语言是女人
不懂技术不要对懂技术的人说这很容易实现
不懂技术不要对懂技术的人说这很容易实现
看13位CEO、创始人和高管如何提高工作效率
看13位CEO、创始人和高管如何提高工作效率
5款最佳正则表达式编辑调试器
5款最佳正则表达式编辑调试器
中美印日四国程序员比较
中美印日四国程序员比较
Google伦敦新总部 犹如星级庄园
Google伦敦新总部 犹如星级庄园
10个调试和排错的小建议
10个调试和排错的小建议
程序员必看的十大电影
程序员必看的十大电影
那些争议最大的编程观点
那些争议最大的编程观点
亲爱的项目经理,我恨你
亲爱的项目经理,我恨你
要嫁就嫁程序猿—钱多话少死的早
要嫁就嫁程序猿—钱多话少死的早
聊聊HTTPS和SSL/TLS协议
聊聊HTTPS和SSL/TLS协议
初级 vs 高级开发者 哪个性价比更高?
初级 vs 高级开发者 哪个性价比更高?
当下全球最炙手可热的八位少年创业者
当下全球最炙手可热的八位少年创业者
老美怎么看待阿里赴美上市
老美怎么看待阿里赴美上市
程序员应该关注的一些事儿
程序员应该关注的一些事儿
程序员周末都喜欢做什么?
程序员周末都喜欢做什么?
2013年中国软件开发者薪资调查报告
2013年中国软件开发者薪资调查报告
程序员眼里IE浏览器是什么样的
程序员眼里IE浏览器是什么样的
代码女神横空出世
代码女神横空出世
Java 与 .NET 的平台发展之争
Java 与 .NET 的平台发展之争
为啥Android手机总会越用越慢?
为啥Android手机总会越用越慢?
每天工作4小时的程序员
每天工作4小时的程序员
老程序员的下场
老程序员的下场
写给自己也写给你 自己到底该何去何从
写给自己也写给你 自己到底该何去何从
我是如何打败拖延症的
我是如何打败拖延症的
如何成为一名黑客
如何成为一名黑客
程序员都该阅读的书
程序员都该阅读的书
一个程序员的时间管理
一个程序员的时间管理
10个帮程序员减压放松的网站
10个帮程序员减压放松的网站
十大编程算法助程序员走上高手之路
十大编程算法助程序员走上高手之路
如何区分一个程序员是“老手“还是“新手“?
如何区分一个程序员是“老手“还是“新手“?
2013年美国开发者薪资调查报告
2013年美国开发者薪资调查报告
什么才是优秀的用户界面设计
什么才是优秀的用户界面设计
程序员最害怕的5件事 你中招了吗?
程序员最害怕的5件事 你中招了吗?
程序员的一天:一寸光阴一寸金
程序员的一天:一寸光阴一寸金
那些性感的让人尖叫的程序员
那些性感的让人尖叫的程序员
 程序员的样子
程序员的样子
鲜为人知的编程真相
鲜为人知的编程真相
60个开发者不容错过的免费资源库
60个开发者不容错过的免费资源库
团队中“技术大拿”并非越多越好
团队中“技术大拿”并非越多越好
“懒”出效率是程序员的美德
“懒”出效率是程序员的美德
Java程序员必看电影
Java程序员必看电影
漫画:程序员的工作
漫画:程序员的工作
我跳槽是因为他们的显示器更大
我跳槽是因为他们的显示器更大
总结2014中国互联网十大段子
总结2014中国互联网十大段子
我的丈夫是个程序员
我的丈夫是个程序员
软件开发程序错误异常ExceptionCopyright © 2009-2015 MyException 版权所有