视频监控的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>
时间： 2024-11-12 17:19:21