视频监控的web观看端有视频回放这一块，需要做一个时间轴，下面是根据Graphics画的时间轴的例子
例子做的只是把时间轴网格，时间轴填充和会移动的时间画出来了，，很多细节没有，例子中有用Flex画文字的两种实现方式，画时间刻度那种实现不知道怎么改样式
代码如下：
<?xml version="1.0" encoding="utf-8"?><s:Application xmlns:fx=""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;//开始时间转成datevar startDate:Date = new Date(Number(startTime)*1000);//开始时间的秒var startSecond:Number = startDate.hours*3600 + startDate.minutes*60 + startDate.seconds;//结束时间转成datevar 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>
要铭记在心;每天都是一年中最美好的日子
