`

TWaver网元动态转动效果

阅读更多

最近有客户提了一个网元动态旋转的需求,用TWaver实现起来还是很方便的,效果如下图所示:
主要实现功能:
1:网元动态旋转
2:网元选中效果,被选中网元快速转到最前端后停止旋转,取消选中自动重启旋转
3:根据鼠标位置自动调整旋转方向
4:可以在程序中修改fw/bw/fh/bh调整图片显示效果。

代码如下所示:

 

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
				layout="absolute"
				creationComplete="test()"
				width="100%"
				height="100%"
				xmlns:ns="http://www.servasoftware.com/2009/twaver/flex">
	<mx:Script>
		<![CDATA[
			import mx.events.ResizeEvent;

			import twaver.Collection;
			import twaver.Consts;
			import twaver.ElementBox;
			import twaver.IData;
			import twaver.IElement;
			import twaver.Layer;
			import twaver.Node;
			import twaver.SelectionChangeEvent;
			import twaver.SelectionModel;
			import twaver.Styles;
			import twaver.SubNetwork;
			import twaver.Utils;
			import twaver.core.util.l.u;
			private var box:ElementBox = new ElementBox();

			private var _rotationList:Collection = new Collection();
			private var rectIndexMap:Object = {};
			private var indexRectMap:Object = {};
			private var rList:Collection = new Collection();
			private var _startAngle:Number = 90;
			private var timer:Timer;
			private var _selectNode:Node;

			private var _clockSise:Boolean = false;

			private var _stopAngle:Number = 0;
			private var _needStop:Boolean = false;

			[Embed(source="images/1.png")]
			public static const p1:Class;
			[Embed(source="images/2.png")]
			public static const p2:Class;
			[Embed(source="images/3.png")]
			public static const p3:Class;
			[Embed(source="images/4.png")]
			public static const p4:Class;
			[Embed(source="images/5.png")]
			public static const p5:Class;
			[Embed(source="images/6.png")]
			public static const p6:Class;
			[Embed(source="images/7.png")]
			public static const p7:Class;
			[Embed(source="images/8.png")]
			public static const p8:Class;

			public function get clockSise():Boolean
			{
				return _clockSise;
			}

			public function set clockSise(value:Boolean):void
			{
				if(this.clockSise==value){
					return;
				}
				_clockSise = value;
			}
			private function resetClockSize( point:Point):void {
				if (_needStop == true) {
					return;
				}
				if (point.x > this.network.width / 2) {
					clockSise = false;
				} else {
					clockSise = true;
				}
			}

			public function get selectNode():Node
			{
				return _selectNode;
			}

			public function set selectNode(value:Node):void
			{
				if(this.selectNode==value){
					return;
				}
				_selectNode = value;
				if(this.selectNode==null){
					_needStop = false;
					timer.delay = 30;
					if(!timer.running){
						timer.start();
					}
				}else{
					var rect:Rectangle = indexRectMap[this.selectNode] as Rectangle;
					var left:Boolean = (rect.x+rect.width/2)<network.width/2;
					if(left){
						clockSise = false;
					}else{
						clockSise = true;
					}
					var index:int = rotationList.getItemIndex(this.selectNode);

					var size:int = this.rotationList.count;
					var step:Number = 360/size;
					_stopAngle = 90 - index * step;
					_needStop = true;
					timer.delay = 5;
					if(!timer.running){
						timer.start();
					}
				}
			}

			public function start():void{
				timer.start();
			}
			public function stop():void{
				if(timer!=null){
					timer.stop();
				}
			}

			public function get startAngle():Number
			{
				return _startAngle;
			}

			public function set startAngle(value:Number):void
			{
				_startAngle = (value+360)%360;
				this.measureRotation();
			}

			public function get rotationList():Collection
			{
				return _rotationList;
			}

			public function set rotationList(value:Collection):void
			{
				_rotationList = value;
				this.box.layerBox.clear();
				var size:int = this.rotationList.count;
				for(var i:int = 0;i<size;i++){
					var l:Layer = new Layer("r:"+i);
					box.layerBox.add(l);
				}
				this.measureRotation();
			}
			private function measureRotation():void{
				rectIndexMap = {};
				indexRectMap = {};
				rList.clear();
				var size:int = this.rotationList.count;
				if(size==0){
					return;
				}
				var w:Number = this.network.width;
				var h:Number = this.network.height;

				var fw:Number = 1.0 / 3 * w;
				var bw:Number = 1.0 / 6 * w;
				var fh:Number = h / 2.5;
				var bh:Number = h / 7.0;

				var m:Number = (fw - bw) / 4;
				var cw:Number = m * 2 + bw;
				var halfcw:Number = cw / 2;
				var x:Number = halfcw + 15;
				w = w - halfcw * 2 - 30;
				var y:Number = bh / 2 + 10;
				h = h - fh / 2 - bh / 2 - 20;

				var step:Number = 360.0 / size;
				for(var i:int = 0;i<size;i++){
					var n:Node =  this.rotationList.getItemAt(i) as Node;
					var p:Point = this.getPointAtEllipse(x,y,w,h,startAngle+step*i);
					var px:Number = p.x;
					var py:Number = p.y;
					var pm:Number = (py - y) / h * (fw - bw) / 2;
					var ww:Number = pm * 2 + bw;
					var hh:Number = (py - y) / h * (fh - bh) + bh;
					var rect:Rectangle = new Rectangle(px - ww / 2, py - hh / 2, ww, hh);
					n.setSize(rect.width,rect.height);
					n.setCenterLocation(px,py);
					rectIndexMap[rect] = n;
					indexRectMap[n] = rect;
					rList.addItem(rect);
				}
				rList.sort(rectSort);

				for(var j:int = 0;j<size;j++){
					var rr:Rectangle = rList.getItemAt(j) as Rectangle;
					var nn:Node = rectIndexMap[rr];
					nn.layerID = "r:"+j;
				}
			}

			private function rectSort(r1:Rectangle,r2:Rectangle):int{
				if (r1.width> r2.width) {
					return 1;
				}
				if (r1.width < r2.width) {
					return -1;
				}
				return 0;
			}

			public function  getPointAtEllipse(x:Number,   y:Number,   w:Number,   h:Number,   angled:Number):Point {
				var angle:Number =angled / 180.0 * Math.PI;
				var px:Number = x + (Math.cos(angle) * 0.5 + 0.5) * w;
				var py:Number = y + (Math.sin(angle) * 0.5 + 0.5) * h;
				return new Point(px, py);
			}

			private function init():void{
				timer=new Timer(30);
				timer.addEventListener(TimerEvent.TIMER,function():void{
					if(clockSise){
						startAngle = startAngle+1;
					}else{
						startAngle = startAngle-1;
					}
					if(_needStop){
						var abs:Number = Math.abs(startAngle-(_stopAngle+360)%360);
						if(abs<2){
							timer.stop();
						}
					}
				});
				network.addEventListener(MouseEvent.MOUSE_MOVE,function(e:MouseEvent):void{
					var p:Point = network.getLogicalPoint(e);
					resetClockSize(p);
				});
				network.addEventListener(MouseEvent.MOUSE_DOWN,function(e:MouseEvent):void{
					var p:Point = network.getLogicalPoint(e);
					var element:IElement = network.getElementByMouseEvent(e);
					selectNode = element as Node;
					resetClockSize(p);
				});
				network.addEventListener(ResizeEvent.RESIZE,function():void{
					measureRotation();
				});
			}

			private function test():void{
				init();
				Utils.registerImageByClass("p1", p1);
				Utils.registerImageByClass("p2", p2);
				Utils.registerImageByClass("p3", p3);
				Utils.registerImageByClass("p4", p4);
				Utils.registerImageByClass("p5", p5);
				Utils.registerImageByClass("p6", p6);
				Utils.registerImageByClass("p7", p7);
				Utils.registerImageByClass("p8", p8);
				var list:Collection = new Collection();
				for(var i:int = 1;i<9;i++){
					var sub:Node = new Node();
					sub.setStyle(Styles.SELECT_STYLE,Consts.SELECT_STYLE_BORDER);
					sub.setStyle(Styles.IMAGE_STRETCH,Consts.STRETCH_FILL);
					sub.setStyle(Styles.SELECT_COLOR,"0x00ff00");

					sub.setStyle(Styles.LABEL_POSITION,Consts.POSITION_CENTER);
					sub.image = "p"+i;
					sub.name = "sub"+i
					list.addItem(sub);
					box.add(sub);
				}
				this.rotationList = list;
				network.elementBox = box;
				this.start();
			}

		]]>
	</mx:Script>
	<ns:Network id="network" width="100%" height="100%" backgroundColor="0xffffff">

	</ns:Network>
</mx:Application>
 
分享到:
评论

相关推荐

    TWaver Flex网元任意位置添加icon

    标题“TWaver Flex网元任意位置添加icon”指的是在使用TWaver Flex开发图形化界面时,如何在图表或网络拓扑图的各个元素(网元)上自由地添加图标(icon)。TWaver是一款强大的可视化工具,它允许开发者创建交互式的...

    TWaver-java-4.1最新 官网试用版jar包及Demo

    【标题】"TWaver-java-4.1最新 官网试用版jar包及Demo" 涉及的核心知识点是TWaver,一个基于Java的图形可视化库,主要用于数据的图表展示和交互。这个版本是4.1,是官方提供的试用版,包含jar包和演示示例。 【描述...

    twaver.js使用示例

    通过这个文件,我们可以学习到如何利用twaver.js来设计和实现报警系统的图形界面,包括节点的动态更新、状态显示、事件触发等。 **综合知识点:** 1. **Twaver.js库介绍**:Twaver.js是一个用于图形化建模和可视化...

    twaver-flex中文用户手册

    《Twaver Flex中文用户手册》是一本详尽的指南,专为使用Twaver Flex图形库在Flex平台上构建可视化应用的开发者设计。Twaver是一个强大的工具,用于创建数据可视化、网络图表、流程图以及复杂的交互式应用程序。这个...

    TWaver HTML5 开发指南代码

    TWaver不仅支持静态图表的展示,还支持动态数据更新和用户交互,使得在网页上展现动态变化的系统状态成为可能。 二、拓扑工具开发 在IT运维和管理中,拓扑图是一种直观的表示网络或系统结构的方式。TWaver提供了一...

    TWaver的3d图形组件库,小demo

    10. **自定义样式**:TWaver允许开发者通过CSS和JavaScript自定义图形的样式和视觉效果,以满足特定的设计需求。 通过这个"TWaver的3d图形组件库,小demo",开发者不仅可以学习到如何使用TWaver库创建3D图形,还能...

    twaver-html5-5.9.0-api_html5_-5.9.0-api_twaver_

    3. **data.json**:可能存储了关于API的元数据,如类、方法、属性等的描述,用于动态生成文档或提供数据驱动的示例。 4. **elements**:这个目录可能包含与图形元素相关的文件,比如图形模板、样式定义等。 5. **...

    flex Twaver组件使用

    此外,TWaver Flex还预定义了丰富的业务对象,如告警(`twaver.IAlarm`)和告警容器(`twaver.AlarmBox`),图层(`twaver.ILayer`)和图层管理容器(`twaver.LayerBox`),以及拓扑网元(`twaver.IElement`)和拓扑...

    twaver拓扑

    【描述】提到"支持各种常见类型的图形",意味着twaver具备绘制不同形状和符号的能力,包括但不限于节点、链路、多边形、圆形、矩形、线段等。这些图形可以代表服务器、路由器、交换机、传感器等硬件设备,也可以代表...

    twaver-java-4.1

    2. `demo.jar`:这是一个包含TWaver演示程序的Java可执行文件,可以直接运行查看TWaver的各种图表和交互效果。 3. `License.txt`:这是授权协议文件,详细列出了使用TWaver开发包的条款和限制,包括商业使用、开源...

    TWaver 4.1最新试用jar包 及Demo

    - 运行`demo.bat`或`demo.sh`启动示例程序,观察TWaver的各种图表效果。 - 阅读`License.txt`以了解软件的许可协议,确保合法合规使用。 **应用场景** TWaver广泛应用于数据分析、监控系统、决策支持等领域,特别...

    twaver-java-3.7

    Twaver是一款用于创建动态、交互式图表和网络拓扑图的Java库。它支持多种图表类型,如流程图、网络图、组织结构图等,广泛应用于网络管理、系统监控、业务流程建模等领域。在3.7版本中,开发者可以期待一系列性能...

    twaver web实例源码

    【标签】"twaver"强调了该资源的核心技术是Twaver,这意味着源码将重点展示如何使用Twaver的API进行图形化建模和数据绑定,实现复杂图形的动态更新和自定义布局。同时,它也可能涉及到Twaver的各种特性,如图表类型...

    twaver for flex 开发手册

    ### TWaver for Flex 开发手册知识点总结 #### 一、TWaver for Flex 概述 TWaver for Flex 是一款由 Serva Software 开发的高级图形组件库,它为 Flex 应用程序提供了一系列丰富的图形控件和服务。这些控件允许...

    Twaver-html5.zip

    Twaver学习案例的例子

    Twaver 3.7性能测试报告

    ### Twaver 3.7性能测试报告分析 #### 概述 Twaver是一款由Serva Software开发的强大软件工具,主要用于支持复杂网络环境中的数据管理和处理。本次报告主要针对Twaver Java版本(Twaver Java)在不同节点配置及连接...

    twaver 官方文档

    【标题】"TWaver 官方文档"指出的是TWaver这一技术的相关官方资料,它代表了一个专注于数据可视化和图表绘制的工具。TWaver是用于创建交互式图表、网络图、流程图、地图等复杂可视化应用的JavaScript库。通过官方...

    twaver 教程

    6. **动画和效果**:了解如何添加动画和视觉效果,使可视化更生动、更具吸引力。 7. **API和插件开发**:深入研究Twaver的Java API,学习如何扩展和定制功能,创建自己的插件。 8. **国际化和多语言支持**:如果你的...

    twaver-flex-3.6.5 官方demo

    【标签】"twaver" 指的是这个软件的核心部分,即Twaver图形库,它提供了丰富的图表类型,如网络图、拓扑图、流程图等,支持动态交互和自定义样式。"flex" 标签表明了该Demo是基于Flex技术实现的,这包括使用...

Global site tag (gtag.js) - Google Analytics