用Flex绘制带Icon的Tooltip
“定制”无疑是TWaver中最大的一特色，无论是node，link，attachment，就连tooltip也同样可以定制，“定制”可以显示出更强更复杂的一些功能，本文给大家带来了一个定制Tooltip的例子。
啥也不多说，先看看效果：
下面我们来细细分析一下这个功能的实现。tooltip的特点是当鼠标滑过时显示，滑出时不显示。因此我们可以定义一个tooltip组件，监听network的mouse move事件，如果鼠标下有网元，就显示tooltip组件并动态计算tooltip的位置，没有就隐藏tooltip组件。
1 this.network.addEventListener(MouseEvent.MOUSE_MOVE, function(e:MouseEvent):void
2 updateToolTip(e);
3 });
4
5 private function updateToolTip(e:MouseEvent):void {
6 var element:IElement = network.getElementByMouseEvent(e, true, 5);
7 if(lastElement == element){
8 return;
9 }
10 lastElement = element;
11 if(element is Link){
12 var point:Point = network.getLogicalPoint(e);
13 customTooltip.x = point.x - customTooltip.measuredWidth / 2;
14 customTooltip.y = point.y - customTooltip.measuredHeight - 10;
15 customTooltip.setText(element.getClient('message'));
16 customTooltip.visible = true;
17 }else{
18 customTooltip.visible = false;
19 }
20 }
我们来详细了解一下如何来实现tooltip组件，首先定义一个tooltip类，继承于canvas。这样就可以将tooltip直接加到network.topCanvas上
1 public class CustomToolTip extends Canvas {}
tooltip组件上不需要交互动作和滚动条，因此可以将这些屏蔽：
1 public function CustomToolTip() {
2 this.mouseEnabled = false;
3 this.mouseChildren = false;
4 this.horizontalScrollPolicy = ScrollPolicy.OFF;
5 this.verticalScrollPolicy = ScrollPolicy.OFF;
6 this.init();
7 }
重点是tooltip的绘制问题，我们需要将图标和文字加到tooltip组件上,并且在添加图标和文字时，需要计算一下位置
1 var messageImage:Image = new Image();
2 messageImage.source = new messageIcon();
3 messageImage.x = _hmargin;
4 messageImage.y = _vmargin;
5 this.addChild(messageImage);
6
7 _message = new Label();
8 _message.x = _hmargin + _iconWidth + _hgap;
9 _message.y = _vmargin;
10 this.addChild(_message);
然后我们需要绘制一个如tooltip形状的图形。先来分析一个，tooltip就是一个矩形框，为了好看一点可以搞个圆角矩形，矩形下方有一个小三角的图形。接下来就可以通过画笔将这些图形绘制出来
1 //获取画笔
2 var g:Graphics = this.graphics;
3 //设置画笔的线宽为1
4 var lineWidth:Number = 1;
5 //设置画笔的样式
6 g.lineStyle(lineWidth, 0, 0.5, true, "normal", CapsStyle.ROUND, JointStyle.ROUND);
7 //设置填充色
8 Utils.beginFill(g, 0xFFFFFF, 1, 0, 0, _width, _height, Consts.GRADIENT_LINEAR_EAST, 0xCCCCCC, 1);
9 //绘制圆角矩形
10 g.drawRoundRect(lineWidth, lineWidth, _width - lineWidth * 2, _height - lineWidth * 2 - _arrowHeight, 10, 10);
11 //绘制矩形下的小三角
12 g.moveTo(_arrowStart, _height - lineWidth - _arrowHeight);
13 g.lineTo(_arrowStart, _height);
14 g.lineTo(_arrowStart + _arrowWidth, _height - lineWidth - _arrowHeight);
15 g.endFill();
16 //绘制小三角和矩形的连接线的颜色
17 g.lineStyle(1, 0xFFFFFF);
18 g.moveTo(_arrowStart, _height - lineWidth - _arrowHeight);
19 g.lineTo(_arrowStart + _arrowWidth, _height - lineWidth - _arrowHeight);
这样tooltip就定制好了，最后还需要将网元和tooltip上显示的内容绑定
1 link.setClient('message', '3333M');
2 customTooltip.setText(element.getClient('message'));
完整代码见附件：CustomTooltipDemo
