Flex Graphics 画时间轴测试例子

2024-01-16 15:08
文章标签 测试 例子 flex graphics 时间轴

本文主要是介绍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;//开始时间转成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>


这篇关于Flex Graphics 画时间轴测试例子的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！


http://www.chinasem.cn/article/612984。

相关文章

[vivado]例子中的glbl文件

[vivado]例子中的glbl文件

答疑帖：https://www.xilinx.com/support/answers/6537.html
阅读更多...
将一维机械振动信号构造为训练集和测试集（Python）

将一维机械振动信号构造为训练集和测试集（Python）

从如下链接中下载轴承数据集。 https://www.sciencedirect.com/science/article/pii/S2352340918314124 import numpy as npimport scipy.io as sioimport matplotlib.pyplot as pltimport statistics as statsimport pandas
阅读更多...
flex布局学习笔记（flex布局教程）

flex布局学习笔记（flex布局教程）

前端笔试⾯试经常会问到：不定宽⾼如何⽔平垂直居中。最简单的实现⽅法就是flex布局，⽗元素加上如下代码即 可： display: flex; justify-content: center; align-items :center; 。下⾯详细介绍下flex布局吧。 　　2009年，W3C提出了 Flex布局，可以简便⼂完整⼂响应式地实现各种页⾯布局。⽬前已得到了所有浏览器的⽀持，这意味着，现
阅读更多...
Flex 布局教程：语法篇

Flex 布局教程：语法篇

网页布局（layout）是 CSS 的一个重点应用。 布局的传统解决方案，基于盒状模型，依赖 display 属性 + position属性 + float属性。它对于那些特殊布局非常不方便，比如，垂直居中就不容易实现。 20
阅读更多...
编译测试后出现“发现不明确的匹配”错误

编译测试后出现“发现不明确的匹配”错误

原文链接：http://blog.163.com/zhaoyanping_1125/blog/static/201329153201204218533/ 错误提示： 【“/”应用程序中的服务器错误。  分析器错误 说明: 在分析向此请求提供服务所需资源时出错。请检查下列特定分析错误详细信息并适当地修改源文件。  分析器错误信息: 发现不明确的匹配。】   这个问题发生原因一般情况是
阅读更多...
RODNet安装测试

RODNet安装测试

项⽬地址： GitHub - yizhou-wang/RODNet: RODNet: Radar object detection network 搭建环境并配置RODNet 1. 参考README.md搭建并配置环境 准备数据集 1. 本实验使⽤ ROD2021 dataset. 百度⽹盘链接：百度网盘 请输入提取码 密码：slxy 2. 使⽤这个script来重新组织文件。 具体形
阅读更多...
Mockito测试

Mockito测试

Mockito 一 mockito基本概念 Mock测试是单元测试的重要方法之一，而Mockito作为一个流行的Mock框架，简单易学，且有非常简洁的API，测试代码的可读性很高。 Mock测试就是在测试过程中，对于一些不容易构造(如HttpServletRequest必须在Servlet容器中才能构造出来)或者说获取比较复杂的对象(如JDBC中的ResultSet对象)
阅读更多...
jmeter测试https请求

jmeter测试https请求

公司最近在搞全站HTTPS改造，进一步提高网站的安全性，防止运营商劫持。那么，改造完成后，所有前后端的URL将全部为https。 So ，研究下怎么用Jmeter访问https请求呢。 其实很简单， 第一步在jmeter中创建HTTP请求，如下图进行配置，https端口为443； 第二步，在本机浏览器，如Chrome中导入该域名证书，在更多工具-设置-管理证书的地方，找到该证书，导出到本地。然后在
阅读更多...
pytest测试框架flaky插件重试失败用例

pytest测试框架flaky插件重试失败用例

Pytest提供了丰富的插件来扩展其功能，本章介绍下插件flaky ，用于在测试用例失败时自动重新运行这些测试用例。与前面文章介绍的插件pytest-rerunfailures功能有些类似，但是功能上不如pytest-rerunfailures插件丰富。 flaky官方并没有明确python和pytest版本限制。 flaky安装 使用pip命令安装: pip install flaky
阅读更多...
Selenium进行Web自动化测试

Selenium进行Web自动化测试

Selenium进行Web自动化测试 Selenium+Python实现Web自动化测试一、环境配置 Selenium+Python实现Web自动化测试 一、环境配置 环境基于win10（X64） 安装Python；安装PyCham安装chomedriver chomedriver下载地址 可以查看本地chrome软件版本下载对应的chomedriver，如果没有则下载最新
阅读更多...

Copyright China编程 23002807@qq.com

沪ICP备2023033072号-2