如上图，我们要实现中间两个飞机之间连线以及上面点的功能， 点如果采用twave的节点那么无法跟，线绑定所以方法是不可取的。
根据Twaver API有两种实现方式：
1.添加图标附加，图标附件可以添加多个，但是仅仅是一个图标没有其他更多的功能，比如图标上添加Label,以及添加tooltip，以及其他一些列鼠标事件。所以仅仅附件功能并不可取。
2.自定义Link和LinkUI.以及自定义更强大的附件。
我们现在采用第二种方式：
首先重写Link:
package com.zznode.iss.topo.gummonitor.components.common
{
import twaver.Link;
import twaver.Node;
public class CLink extends Link
{
public function CLink(id:Object=null, fromNode:Node=null, toNode:Node=null)
{
//TODO: implement function
super(id, fromNode, toNode);
}
override public function get elementUIClass():Class
{
return ClinkUI;
}
}
}
自定义Link中关键的是引入了自定义的CLinkUI它是负责线呈现的，简单说Link是个数据人那么CLinkUI是人的外表具体什么样的外表需要ClinkUI来实现
2.重写LinkUI
package com.zznode.iss.topo.gummonitor.components.common
{
import com.zznode.iss.common.components.topo.common.TopUtils;
import flash.display.GradientType;
import flash.display.Graphics;
import flash.display.SpreadMethod;
import flash.geom.Matrix;
import flash.geom.Point;
import mx.collections.ArrayCollection;
import spark.components.Image;
import spark.components.Label;
import twaver.ICollection;
import twaver.IData;
import twaver.Link;
import twaver.Node;
import twaver.network.Network;
import twaver.network.ui.LinkUI;
public class ClinkUI extends LinkUI
{
public var attachmentDatas:ArrayCollection=new ArrayCollection();
public var airattachments:ArrayCollection=new ArrayCollection();
private var center:Point;
private var contentCenter:Point;
public function ClinkUI(network:Network, link:Link)
{
var serviceType:String=link.getClient(TopUtils.SERVICE_TYPE);
var pArr:Array=serviceType.split("||");
for each(var pdata:String in pArr){
var pointStrArr:Array=pdata.split(",");
var attachmenetData:Object=new Object();
for each(var attribute:String in pointStrArr){
var attS:Array=attribute.split(":");
attachmenetData[attS[0]]=attS[1];
}
attachmentDatas.addItem(attachmenetData);
var ariAttachment:AirAttachmentUI=new AirAttachmentUI();
ariAttachment.data=attachmenetData;
ariAttachment.width=200;
ariAttachment.height=60;
airattachments.addItem(ariAttachment);
}
super(network, link);
}
override public function checkAttachments():void
{
super.checkAttachments();
super.checkLinkHandlerAttachment();
//this.checkLinkBundleAttachment();
}
public var fp:Point;
override protected function updateDisplayList(unscaledWidth:Number, unscaledHeight:Number):void{
super.updateDisplayList(unscaledWidth,unscaledHeight);
//将fromPoint和toPoint转为本地坐标
fp=this.contentToGlobal(new Point(0,0));
for each(var att:AirAttachmentUI in airattachments){
att.xRelativeValue=att.data.Xlocation-this.fromPoint.x;
att.x=this.fromPoint.x-fp.x-att.width/2+att.xRelativeValue+this.link.fromNode.width/2;
att.y=this.fromPoint.y-fp.y-(att.height-att.icon.height/2);
}
}
override protected function drawBody(g:Graphics):void{
var g:Graphics = this.graphics;
g.clear();
//边框 可以有
g.lineStyle(1, 0xC0C0C0,0.5);
g.drawRect( this.fromPoint.x,this.fromPoint.y-2.5, this.toPoint.x-this.fromPoint.x, 5);
//画填充
var fillType:String = GradientType.LINEAR;
var colors:Array = [0x8FCA39, 0xC0C0C0,0x5AC2FD];
var alphas:Array = [1, 0,1];
var ratios:Array = [0x32, 0x89, 0xFF];
var matr:Matrix = new Matrix();
//matr.createGradientBox(50, 50, Math.PI / 4, 0, 0);
matr.createGradientBox(50, 50, 0, 0, 0);
var spreadMethod:String = SpreadMethod.PAD;
this.graphics.beginGradientFill(fillType, colors, alphas, ratios, matr, spreadMethod);
g.drawRect( this.fromPoint.x,this.fromPoint.y-2.5, this.toPoint.x-this.fromPoint.x, 5);
g.endFill();
/*var myMatrix:Matrix = new Matrix();
myMatrix.createGradientBox(200, 200, 1.6, 50, 50);
var myColors:Array = [0xFF3300,0x666666];
var myAlphaS:Array = [100, 100];
var myRalphaS:Array = [0, 225];
graphics.beginGradientFill(GradientType.LINEAR, myColors, myAlphaS,myRalphaS, myMatrix);
graphics.drawRoundRectComplex(this.fromPoint.x,this.fromPoint.y-20,70,70,5,5,5,5);*/
}
override protected function createChildren():void{
super.createChildren();
fp=this.contentToGlobal(new Point(0,0));
for each(var att:AirAttachmentUI in airattachments){
this.addChild(att);
}
}
protected function checkLinkBundleAttachment():void
{
// this._linkBundleAttachment = new LinkBundleAttachment(this);
//this.addAttachment(this._linkBundleAttachment);
}
}
}
updateDisplayList中我们控制了图标点的移动，呈现的UI,AirAttachmentUI
<?xml version="1.0" encoding="utf-8"?>
<s:Group xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:mx="library://ns.adobe.com/flex/mx" width="200" height="60" creationComplete="vgroup1_creationCompleteHandler(event)" >
<fx:Script>
<![CDATA[
import mx.events.FlexEvent;
private var _data:Object;
[Bindable]
/**
* 附件数据项
* Xlocation
* Ylocation
* */
public function get data():Object
{
return _data;
city.setStyle("color",data.citypicturecolor);
}
/**
* @private
*/
public function set data(value:Object):void
{
_data = value;
}
private var _xRelativeValue:Number;
public function get xRelativeValue():Number
{
return _xRelativeValue;
}
public function set xRelativeValue(value:Number):void
{
if(isNaN(_xRelativeValue)){
_xRelativeValue = value;
}
}
protected function vgroup1_creationCompleteHandler(event:FlexEvent):void
{
// TODO Auto-generated method stubdata.citypicturecolor
}
]]>
</fx:Script>
<s:Label id="city" width="100%" textAlign="center" y="{data.cityLabelY}" text="{data.cityname}" color="{data.citypicturecolor}"/>
<s:VGroup width="100%" height="100%" horizontalAlign="center" verticalAlign="bottom">
<s:Image id="icon" source="{data.citypicture}" width="16" height="16" />
</s:VGroup>
<!--<s:Label id="city" y="{data.cityLabelY}" text="{data.cityname}" color="{data.citypicturecolor}"/>
<s:Image id="icon" source="{data.citypicture}" width="16" height="16" />-->
</s:Group>
再看附件LinkBundleAttachment （CLinkUI中添加附件的代码因为不需要所以被注释了）：
package com.zznode.iss.topo.gummonitor.components.common
{
import flash.display.DisplayObject;
import flash.display.Graphics;
import flash.geom.Matrix;
import flash.geom.Point;
import mx.controls.ColorPicker;
import mx.utils.ColorUtil;
import spark.components.Image;
import spark.components.Label;
import twaver.Collection;
import twaver.ICollection;
import twaver.IData;
import twaver.Link;
import twaver.Node;
import twaver.Utils;
import twaver.network.ui.Attachment;
import twaver.network.ui.ElementUI;
import twaver.network.ui.LinkUI;
public class LinkBundleAttachment extends Attachment
{
var _linkBundleWidth:*;
var _linkBundleHeight:*;
var _linkBundleColor:*;
var _linkBundleAlpha:*;
private var center:Point;
private var contentCenter:Point;
[Embed(source="/resources/images/topo/red.png")]
/**2G普通基站红**/
public var BTS_OTH_1:Class;
private var img:Image;
public function LinkBundleAttachment(elementUI:ElementUI, showOnTop:Boolean = false)
{
super(elementUI, showOnTop);
}
override public function draw(graphics:Graphics):void
{
var link:Link = Link(element);
//var fromP:Node=link.fromNode;
//var toP:Node=link.toNode;
center=new Point((LinkUI(elementUI).toPoint.x+LinkUI(elementUI).fromPoint.x)/2,(LinkUI(elementUI).toPoint.y+LinkUI(elementUI).fromPoint.y)/2);
contentCenter=LinkUI(elementUI).network.localToContent(center);
var g:Graphics=graphics;
g.lineStyle(1, 0x01f0e, 1);
g.beginFill(0x091231, 0.5);
g.drawCircle(LinkUI(elementUI).fromPoint.x,LinkUI(elementUI).fromPoint.y,30);
//g.moveTo(LinkUI(elementUI).fromPoint.x,LinkUI(elementUI).fromPoint.y);
//g.lineTo(center.x,center.y);
g.drawCircle(center.x,center.y,10);
//g.lineTo(LinkUI(elementUI).toPoint.x,LinkUI(elementUI).toPoint.y);
//g.endFill();#EE2E35
g.drawCircle(LinkUI(elementUI).toPoint.x,LinkUI(elementUI).toPoint.y,30);
//ClinkUI(elementUI).img.x=contentCenter.x-ClinkUI(elementUI).img.width/2;//-LinkUI(elementUI).x;
//ClinkUI(elementUI).img.y=contentCenter.y-ClinkUI(elementUI).img.height/2;//-LinkUI(elementUI).y;
var p:Point=ClinkUI(elementUI).contentToLocal(new Point(0,0));
var p2:Point=ClinkUI(elementUI).contentToGlobal(new Point(0,0));
for each(var att:AirAttachmentUI in ClinkUI(elementUI).airattachments){
att.x=-70;//LinkUI(elementUI).fromPoint.x-ClinkUI(elementUI).fp.x;//-att.xRelativeValue-att.width/2
att.y=-20;LinkUI(elementUI).fromPoint.y-ClinkUI(elementUI).fp.y;//-(att.height-att.icon.height/2);
}
/*for each(var attachment:AirAttachmentUI in ClinkUI(elementUI).airattachments){
//attachment.xRelativeValue=contentCenter.x-attachment.data.Xlocation;
//attachment.x=contentCenter.x-attachment.width/2-attachment.xRelativeValue;
//attachment.x=contentCenter.x-attachment.xRelativeValue;
attachment.y=contentCenter.y-(attachment.height-attachment.icon.height/2);
}*/
/*for each(var att:AirAttachmentUI in ClinkUI(elementUI).airattachments){
var iData:ICollection = network.elementBox.datas;
for(var i:Number=0;i<iData.count;i++){
var data:IData = iData.getItemAt(i) as IData;
if(data is Node){
var node:Node=Node(data);
if(node.id==att.data.enodebid){
att.x=node.x;
}
}
}
}*/
}
}
}
如上是实现可以解决放大缩小等一些列问题
相关推荐
**Twave Flex API 英文版详解** Twave Flex API 是一套专为开发基于Adobe Flex技术的交互式应用程序而设计的软件开发工具包（SDK）。2010年10月发布的版本，针对的是Flex开发者，它提供了丰富的功能和接口，帮助...
Twave 组件，可以使用，但是不是注册版得
duration of p q R S Twave in ECG beat
筛选搜索-在“Pokémon搜索”选项卡中，键入“ prankster，twave”，然后按Enter键以获取可以学习Thunder Wave的带有Prankster的Pokémon列表。 面板用户界面-单击任何内容都会将其加载到右侧的新面板中，以便于...
内容概要：本文提供了详细的MongoDB分片集群的搭建指导，涵盖了从环境准备、配置文件编写、副本集的建立、主节点的选择、配置服务器和数据分片服务器的配置到最后的路由节点的搭建与操作整个流程，以及对数据库的哈希与范围两种分片策略的应用介绍和具体命令执行。 适合人群：熟悉NoSQL数据库概念并对MongoDB有一定了解的技术人员，尤其是在大型数据管理和分布式数据库架构设计中有需求的开发者。 使用场景及目标：帮助技术人员掌握构建高效能、高可用性的MongoDB分片集群的方法，适用于处理大规模、实时性强的数据存储与读取场景。 其他说明：文中通过实例演示了每个步骤的具体操作方法，便于跟随文档实操，同时也介绍了可能遇到的问题及其解决方案，如在没有正确配置的情况下试图写入数据时出现错误等情况的处理。
CPPC++_嵌入式硬件的物联网解决方案blinker库与Arduino ESP8266 ESP32一起工作
CPPC++_逆向调用QQ Mojo IPC与WeChat XPlugin
CPPC++_现代活动指标
CPPC++_Xournal是一款手写笔记软件，支持PDF注释，使用C语言编写，支持GTK3，支持Linux，如Ubu
资源概述： 本资源提供了一套完整的学生实习管理系统解决方案，涵盖了前台小程序页面与后台管理系统两大模块。前台小程序页面设计简洁直观，用户可根据不同身份（学生或企业）进行登录。学生用户能够方便地浏览并投递感兴趣的实习岗位，而企业用户则能轻松发布实习信息，吸引优秀人才。后台管理系统功能全面，包括个人中心、首页、学生管理、教师管理、企业管理、招聘管理、评分管理以及实习管理等多个方面，为管理员提供了强大的数据管理和操作工具。 技术栈亮点： SSM框架：系统后台采用Spring、Spring MVC和MyBatis Plus（简称SSM）作为核心开发框架，确保了系统的稳定性、可扩展性和可维护性。Spring作为控制反转（IoC）和面向切面编程（AOP）的容器，为系统提供了强大的业务逻辑处理能力；Spring MVC则负责处理Web请求和响应，实现了前后端的分离；MyBatis Plus作为持久层框架，简化了数据库操作，提高了开发效率。 MySQL数据库：系统采用MySQL作为数据库存储解决方案，支持大数据量的存储和高效查询。 如有侵权请联系我删除，谢谢
微服务闪聚支付项目
博客链接 https://blog.csdn.net/weixin_47560078/article/details/143714557 文章从原理介绍出发，实现了 Rust 与 Java 的互调。利用 JNI 技术，可以充分发挥 Rust 的性能优势，同时保持 Java 的跨平台特性。这种技术组合适用于对性能要求较高的应用场景，如图像处理、数据分析和系统级编程等。
cppc++
1.版本：matlab2014/2019a/2024a 2.附赠案例数据可直接运行matlab程序。 3.代码特点：参数化编程、参数可方便更改、代码编程思路清晰、注释明细。 4.适用对象：计算机，电子信息工程、数学等专业的大学生课程设计、期末大作业和毕业设计。 替换数据可以直接使用，注释清楚，适合新手
1.版本：matlab2014/2019a/2024a 2.附赠案例数据可直接运行matlab程序。 3.代码特点：参数化编程、参数可方便更改、代码编程思路清晰、注释明细。 4.适用对象：计算机，电子信息工程、数学等专业的大学生课程设计、期末大作业和毕业设计。 替换数据可以直接使用，注释清楚，适合新手
分布式事务lcn
1.版本：matlab2014/2019a/2024a 2.附赠案例数据可直接运行matlab程序。 3.代码特点：参数化编程、参数可方便更改、代码编程思路清晰、注释明细。 4.适用对象：计算机，电子信息工程、数学等专业的大学生课程设计、期末大作业和毕业设计。
1.版本：matlab2014/2019a/2024a 2.附赠案例数据可直接运行matlab程序。 3.代码特点：参数化编程、参数可方便更改、代码编程思路清晰、注释明细。 4.适用对象：计算机，电子信息工程、数学等专业的大学生课程设计、期末大作业和毕业设计。
cppc++
安卓手机与电脑的socket通信源码