在Flex版本中，用于也可以通过以下方式实现在网元上显示icon的功能
1
server1.setStyle(Styles.ICONS_NAMES, ["att5","att6", "att7","att8"]);
2
server1.setStyle(Styles.ICONS_POSITION, Consts.POSITION_BOTTOMRIGHT_TOPRIGHT);
3
server1.setStyle(Styles.ICONS_ORIENTATION, Consts.ORIENTATION_TOP);
4
server1.setStyle(Styles.ICONS_XOFFSET, 5);
Flex版本的默认实现并没有提供在多个postion添加icon的功能
但是借助FlexMVC设计非常好的灵活性，可以很容易的扩展出这个功能，如下图所示
主要借助了TWaver中的Attachment机制，可以创建多个iconAttachment用来显示不同位置的图标
代码下载
attachment
有兴趣的同学也可以实现下不同位置不同方向的attachment
主要修改CustomIconAttachment的以下两个方法即可
private function getIconsSize(names:Array, orientation:String, xgap:Number, ygap:Number):Size
override public function draw(graphics:Graphics):void
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
creationComplete="init();"
layout="absolute"
width="100%"
height="100%"
xmlns:tw="http://www.servasoftware.com/2009/twaver/flex">
<mx:Script>
<![CDATA[
import attachment.CustomNode;
import twaver.Consts;
import twaver.Node;
import twaver.Styles;
import twaver.Utils;
[Embed(source="images/1.png")]
public static const image1:Class;
[Embed(source="images/2.png")]
public static const image2:Class;
[Embed(source="images/3.png")]
public static const image3:Class;
[Embed(source="images/4.png")]
public static const image4:Class;
[Embed(source="images/5.png")]
public static const image5:Class;
[Embed(source="images/6.png")]
public static const image6:Class;
[Embed(source="images/7.png")]
public static const image7:Class;
private function init():void {
Utils.registerImageByClass("image1", image1);
Utils.registerImageByClass("image2", image2);
Utils.registerImageByClass("image3", image3);
Utils.registerImageByClass("image4", image4);
Utils.registerImageByClass("image5", image5);
Utils.registerImageByClass("image6", image6);
Utils.registerImageByClass("image7", image7);
var n:CustomNode=new CustomNode();
n.width=100;
n.height=100;
createAttachment(n, Consts.POSITION_BOTTOM);
createAttachment(n, Consts.POSITION_TOP);
createAttachment(n, Consts.POSITION_LEFT);
createAttachment(n, Consts.POSITION_RIGHT);
network.elementBox.add(n);
}
private function createAttachment(n:CustomNode, p:String):void {
var c:int=int(Math.random() * 4 + 3);
for (var i:int=1; i < c; i++) {
n.addIconAttachment("image" + i, p);
}
}
]]>
</mx:Script>
<tw:Network id="network"
backgroundColor="0xFFFFFF"
width="100%"
height="100%"/>
</mx:Application>
package attachment {
import flash.display.Graphics;
import flash.geom.Matrix;
import flash.geom.Point;
import flash.geom.Rectangle;
import twaver.*;
import twaver.network.ui.Attachment;
import twaver.network.ui.ElementUI;
public class CustomIconAttachment extends Attachment {
private var _icons:ICollection;
private var _postion:String;
public function CustomIconAttachment(elementUI:ElementUI, showInAttachmentCanvas:Boolean=false) {
super(elementUI, showInAttachmentCanvas);
}
public function get postion():String {
return _postion;
}
public function set postion(value:String):void {
_postion=value;
}
public function get icons():ICollection {
return _icons;
}
public function set icons(value:ICollection):void {
_icons=value;
}
private function getIconsSize(names:Array, orientation:String, xgap:Number, ygap:Number):Size {
var x:Number=0;
var y:Number=0;
var rect:Rectangle=null;
var imageAsset:IImageAsset=null;
var unionRect:Rectangle=null;
for each (var name:String in names) {
imageAsset=Utils.getImageAsset(name, false);
if (imageAsset == null) {
continue;
}
if (orientation == Consts.ORIENTATION_RIGHT) {
rect=new Rectangle(x, y, imageAsset.width, imageAsset.height);
x+=rect.width + xgap;
} else if (orientation == Consts.ORIENTATION_LEFT) {
rect=new Rectangle(x - imageAsset.width, y, imageAsset.width, imageAsset.height);
x-=rect.width + xgap;
} else if (orientation == Consts.ORIENTATION_TOP) {
rect=new Rectangle(x, y - imageAsset.height, imageAsset.width, imageAsset.height);
y-=rect.height + ygap;
} else if (orientation == Consts.ORIENTATION_BOTTOM) {
rect=new Rectangle(x, y, imageAsset.width, imageAsset.height);
y+=rect.height + ygap;
} else {
throw new Error("Can not resolve '" + orientation + "' orientation");
}
if (unionRect == null) {
unionRect=rect;
} else {
unionRect=unionRect.union(rect);
}
}
if (unionRect != null) {
return new Size(Math.abs(unionRect.width), Math.abs(unionRect.height));
}
return null;
}
/**
* @inheritDoc
*
*/
override public function draw(graphics:Graphics):void {
super.draw(graphics);
if (icons == null || icons.count == 0) {
return;
}
var orientation:String=element.getStyle(Styles.ICONS_ORIENTATION);
var xoffset:Number=element.getStyle(Styles.ICONS_XOFFSET);
var yoffset:Number=element.getStyle(Styles.ICONS_YOFFSET);
var xgap:Number=5;
var ygap:Number=5;
var iconsSize:Size=getIconsSize(icons.toArray(), orientation, xgap, ygap);
var location:Point=this.network.getPosition(this.postion, this.elementUI, iconsSize, xoffset, yoffset);
if (orientation == Consts.ORIENTATION_TOP) {
location.y+=iconsSize.height;
} else if (orientation == Consts.ORIENTATION_LEFT) {
location.x+=iconsSize.width;
}
var x:Number=0;
var y:Number=0;
var index:int=0;
for each (var name:String in icons.toArray()) {
var rect:Rectangle=null;
var imageAsset:IImageAsset=Utils.getImageAsset(name, false);
if (imageAsset == null) {
continue;
}
if (orientation == Consts.ORIENTATION_RIGHT) {
rect=new Rectangle(x, y, imageAsset.width, imageAsset.height);
x+=rect.width + xgap;
} else if (orientation == Consts.ORIENTATION_LEFT) {
rect=new Rectangle(x - imageAsset.width, y, imageAsset.width, imageAsset.height);
x-=rect.width + xgap;
} else if (orientation == Consts.ORIENTATION_TOP) {
rect=new Rectangle(x, y - imageAsset.height, imageAsset.width, imageAsset.height);
y-=rect.height + ygap;
} else if (orientation == Consts.ORIENTATION_BOTTOM) {
rect=new Rectangle(x, y, imageAsset.width, imageAsset.height);
y+=rect.height + ygap;
} else {
throw new Error("Can not resolve '" + orientation + "' orientation");
}
rect.x+=location.x;
rect.y+=location.y;
var matrix:Matrix=new Matrix();
matrix.translate(rect.x, rect.y);
graphics.lineStyle();
graphics.beginBitmapFill(imageAsset.getBitmapData(), matrix, false);
graphics.drawRect(rect.x, rect.y, rect.width, rect.height);
graphics.endFill();
}
}
}
}
package attachment {
import flash.utils.Dictionary;
import twaver.Collection;
import twaver.Consts;
import twaver.ICollection;
import twaver.Node;
public class CustomNode extends Node {
private var attMap:Dictionary=new Dictionary();
public function CustomNode(id:Object=null) {
super(id);
}
public function addIconAttachment(icon:String, position:String):void {
var list:ICollection=attMap[position] as Collection;
if (list == null) {
list=new Collection();
attMap[position]=list;
}
list.addItem(icon);
this.dispatchPropertyChangeEvent("iconAttachment", true, false);
}
public function removeIconAttachment(icon:String, position:String):void {
var list:ICollection=attMap[position] as Collection;
if (list == null) {
return;
}
if (list.contains(icon)) {
list.removeItem(icon);
this.dispatchPropertyChangeEvent("iconAttachment", true, false);
}
}
public function get iconAttachments():Dictionary {
return attMap;
}
override public function get elementUIClass():Class {
return CustomNodeUI;
}
}
}
package attachment {
import flash.utils.Dictionary;
import twaver.Collection;
import twaver.ICollection;
import twaver.Node;
import twaver.network.Network;
import twaver.network.ui.NodeUI;
public class CustomNodeUI extends NodeUI {
public function CustomNodeUI(network:Network, node:Node) {
super(network, node);
}
override public function checkAttachments():void {
super.checkAttachments();
checkIconAttachment();
}
private var attMap:Dictionary=new Dictionary();
private function checkIconAttachment():void {
var cNode:CustomNode=node as CustomNode;
var atts:Dictionary=cNode.iconAttachments;
var key:Object;
for (key in atts) {
var attList:ICollection=atts[key] as Collection;
createAttachment(attList, key.toString());
}
for (key in attMap) {
if (atts[key] == null) {
var att:CustomIconAttachment=attMap[key];
this.removeAttachment(att);
}
}
}
private function createAttachment(icons:ICollection, position:String):CustomIconAttachment {
var iconAtt:CustomIconAttachment
if (attMap[position] != null) {
iconAtt=attMap[position];
iconAtt.icons=icons;
iconAtt.postion=position;
} else {
iconAtt=new CustomIconAttachment(this);
iconAtt.icons=icons;
iconAtt.postion=position;
attMap[position]=iconAtt;
this.addAttachment(iconAtt);
}
return iconAtt;
}
}
}