最近有客户提了一个网元动态旋转的需求,用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是一款强大的可视化工具,它允许开发者创建交互式的...
【标题】"TWaver-java-4.1最新 官网试用版jar包及Demo" 涉及的核心知识点是TWaver,一个基于Java的图形可视化库,主要用于数据的图表展示和交互。这个版本是4.1,是官方提供的试用版,包含jar包和演示示例。 【描述...
通过这个文件,我们可以学习到如何利用twaver.js来设计和实现报警系统的图形界面,包括节点的动态更新、状态显示、事件触发等。 **综合知识点:** 1. **Twaver.js库介绍**:Twaver.js是一个用于图形化建模和可视化...
《Twaver Flex中文用户手册》是一本详尽的指南,专为使用Twaver Flex图形库在Flex平台上构建可视化应用的开发者设计。Twaver是一个强大的工具,用于创建数据可视化、网络图表、流程图以及复杂的交互式应用程序。这个...
TWaver不仅支持静态图表的展示,还支持动态数据更新和用户交互,使得在网页上展现动态变化的系统状态成为可能。 二、拓扑工具开发 在IT运维和管理中,拓扑图是一种直观的表示网络或系统结构的方式。TWaver提供了一...
10. **自定义样式**:TWaver允许开发者通过CSS和JavaScript自定义图形的样式和视觉效果,以满足特定的设计需求。 通过这个"TWaver的3d图形组件库,小demo",开发者不仅可以学习到如何使用TWaver库创建3D图形,还能...
3. **data.json**:可能存储了关于API的元数据,如类、方法、属性等的描述,用于动态生成文档或提供数据驱动的示例。 4. **elements**:这个目录可能包含与图形元素相关的文件,比如图形模板、样式定义等。 5. **...
此外,TWaver Flex还预定义了丰富的业务对象,如告警(`twaver.IAlarm`)和告警容器(`twaver.AlarmBox`),图层(`twaver.ILayer`)和图层管理容器(`twaver.LayerBox`),以及拓扑网元(`twaver.IElement`)和拓扑...
【描述】提到"支持各种常见类型的图形",意味着twaver具备绘制不同形状和符号的能力,包括但不限于节点、链路、多边形、圆形、矩形、线段等。这些图形可以代表服务器、路由器、交换机、传感器等硬件设备,也可以代表...
2. `demo.jar`:这是一个包含TWaver演示程序的Java可执行文件,可以直接运行查看TWaver的各种图表和交互效果。 3. `License.txt`:这是授权协议文件,详细列出了使用TWaver开发包的条款和限制,包括商业使用、开源...
- 运行`demo.bat`或`demo.sh`启动示例程序,观察TWaver的各种图表效果。 - 阅读`License.txt`以了解软件的许可协议,确保合法合规使用。 **应用场景** TWaver广泛应用于数据分析、监控系统、决策支持等领域,特别...
Twaver是一款用于创建动态、交互式图表和网络拓扑图的Java库。它支持多种图表类型,如流程图、网络图、组织结构图等,广泛应用于网络管理、系统监控、业务流程建模等领域。在3.7版本中,开发者可以期待一系列性能...
【标签】"twaver"强调了该资源的核心技术是Twaver,这意味着源码将重点展示如何使用Twaver的API进行图形化建模和数据绑定,实现复杂图形的动态更新和自定义布局。同时,它也可能涉及到Twaver的各种特性,如图表类型...
### TWaver for Flex 开发手册知识点总结 #### 一、TWaver for Flex 概述 TWaver for Flex 是一款由 Serva Software 开发的高级图形组件库,它为 Flex 应用程序提供了一系列丰富的图形控件和服务。这些控件允许...
Twaver学习案例的例子
### Twaver 3.7性能测试报告分析 #### 概述 Twaver是一款由Serva Software开发的强大软件工具,主要用于支持复杂网络环境中的数据管理和处理。本次报告主要针对Twaver Java版本(Twaver Java)在不同节点配置及连接...
【标题】"TWaver 官方文档"指出的是TWaver这一技术的相关官方资料,它代表了一个专注于数据可视化和图表绘制的工具。TWaver是用于创建交互式图表、网络图、流程图、地图等复杂可视化应用的JavaScript库。通过官方...
6. **动画和效果**:了解如何添加动画和视觉效果,使可视化更生动、更具吸引力。 7. **API和插件开发**:深入研究Twaver的Java API,学习如何扩展和定制功能,创建自己的插件。 8. **国际化和多语言支持**:如果你的...
【标签】"twaver" 指的是这个软件的核心部分,即Twaver图形库,它提供了丰富的图表类型,如网络图、拓扑图、流程图等,支持动态交互和自定义样式。"flex" 标签表明了该Demo是基于Flex技术实现的,这包括使用...