“定制”无疑是TWaver中最大的一特色,无论是node,link,attachment,就连tooltip也同样可以定制,“定制”可以显示出更强更复杂的一些功能,今天给大家带来了一个定制Tooltip的例子。
啥也不多说,先看看效果:
下面我们来细细分析一下这个功能的实现。tooltip的特点是当鼠标滑过时显示,滑出时不显示。因此我们可以定义一个tooltip组件,监听network的mouse move事件,如果鼠标下有网元,就显示tooltip组件并动态计算tooltip的位置,没有就隐藏tooltip组件。
this.network.addEventListener(MouseEvent.MOUSE_MOVE, function(e:MouseEvent):void
updateToolTip(e);
});
private function updateToolTip(e:MouseEvent):void {
var element:IElement = network.getElementByMouseEvent(e, true, 5);
if(lastElement == element){
return;
}
lastElement = element;
if(element is Link){
var point:Point = network.getLogicalPoint(e);
customTooltip.x = point.x - customTooltip.measuredWidth / 2;
customTooltip.y = point.y - customTooltip.measuredHeight - 10;
customTooltip.setText(element.getClient('message'));
customTooltip.visible = true;
}else{
customTooltip.visible = false;
}
}
我们来详细了解一下如何来实现tooltip组件,首先定义一个tooltip类,继承于canvas。这样就可以将tooltip直接加到network.topCanvas上。
public class CustomToolTip extends Canvas {}
tooltip组件上不需要交互动作和滚动条,因此可以将这些屏蔽:
public function CustomToolTip() {
this.mouseEnabled = false;
this.mouseChildren = false;
this.horizontalScrollPolicy = ScrollPolicy.OFF;
this.verticalScrollPolicy = ScrollPolicy.OFF;
this.init();
}
重点是tooltip的绘制问题,我们需要将图标和文字加到tooltip组件上,并且在添加图标和文字时,需要计算一下位置
var messageImage:Image = new Image();
messageImage.source = new messageIcon();
messageImage.x = _hmargin;
messageImage.y = _vmargin;
this.addChild(messageImage);
_message = new Label();
_message.x = _hmargin + _iconWidth + _hgap;
_message.y = _vmargin;
this.addChild(_message);
然后我们需要绘制一个如tooltip形状的图形。先来分析一个,tooltip就是一个矩形框,为了好看一点可以搞个圆角矩形,矩形下方有一个小三角的图形。接下来就可以通过画笔将这些图形绘制出来
//获取画笔
var g:Graphics = this.graphics;
//设置画笔的线宽为1
var lineWidth:Number = 1;
//设置画笔的样式
g.lineStyle(lineWidth, 0, 0.5, true, "normal", CapsStyle.ROUND, JointStyle.ROUND);
//设置填充色
Utils.beginFill(g, 0xFFFFFF, 1, 0, 0, _width, _height, Consts.GRADIENT_LINEAR_EAST, 0xCCCCCC, 1);
//绘制圆角矩形
g.drawRoundRect(lineWidth, lineWidth, _width - lineWidth * 2, _height - lineWidth * 2 - _arrowHeight, 10, 10);
//绘制矩形下的小三角
g.moveTo(_arrowStart, _height - lineWidth - _arrowHeight);
g.lineTo(_arrowStart, _height);
g.lineTo(_arrowStart + _arrowWidth, _height - lineWidth - _arrowHeight);
g.endFill();
//绘制小三角和矩形的连接线的颜色
g.lineStyle(1, 0xFFFFFF);
g.moveTo(_arrowStart, _height - lineWidth - _arrowHeight);
g.lineTo(_arrowStart + _arrowWidth, _height - lineWidth - _arrowHeight);
这样tooltip就定制好了,最后还需要将网元和tooltip上显示的内容绑定
link.setClient('message', '3333M');
customTooltip.setText(element.getClient('message'));
原文出处和原代码请参见这里。
- 大小: 13.7 KB
分享到:
相关推荐
嵌入.NET控件到托盘图标Tooltip嵌入.NET控件到托盘图标Tooltip
NULL 博文链接:https://hb0504511129-126-com.iteye.com/blog/1343847
tooltip中添加一个查看按钮,并且点击获得触发点的数据进行操作 ehcarts显示正常,并且在toopltip中添加formatter(params)函数对toopltip进行html设置显示按钮,点击跳转其他页面
Flex 自定义ToolTip源代码,可以运行的源代码
1:本套代码适合VS2008直接进行编辑编译...2:生成一个MFC窗体,在编辑框中输入桌面图标名称和要显示的文字,按确定按钮,就可以在对应桌面图标中显示聊天气泡显示文字。 3:有操作系统判定功能,有桌面图标查询功能。
CSS3垂直图标菜单 带Tooltip提示框.zip
今天我们要来分享一款CSS3菜单,菜单外观很漂亮,是垂直排列的小图标,鼠标滑过菜单项时,菜单项的背景会填充渐变的颜色,另外还会弹出该菜单项描述的Tooltip提示框。之前我们也分享过很多CSS3垂直菜单,像这款CSS3...
带有图像的ToolTip显示功能,可以显示提示信息的时候显示图像。
微信小程序-ToolTip信息提示组件导入将ToolTip文件夹复制到pages文件夹内使用在需要使用ToolTip的页面对应的.wxml文件中添加: src="../ToolTip/toolTip.wxml"/> <!-- 引入toolTip模板 --> is=...
这是一个在WPF中修改任何控件的Tooltip的样式的源代码,供大家参考获得自己想要的功能
有时候tree节点内容太长,就需要用toolTip来实现鼠标滑过时提示全部内容。用两种方式实现. 1.通过itemRollOver和itemRollOut,使用ToolTipManager自定义实现 2.树本身属性showDataTips,加了一些小优化。 ...
表格单元格自定义ToolTip组件,适用所有Flex组件的自定义提示
绝对漂亮的前台表单提交前的验证效果,带Tooltip效果,这个3分,下载的绝对值,以前都是用js在客户端页面加验证,很麻烦,有了它,方便、实用、漂亮。
纯CSS3实现的带小图标和tooltip提示框的垂直下拉菜单效果源码.zip
在vc中使用tooltip 简单明了,稍作修改可以应用到文本编辑器中,极为实用。
HTML5+CSS3源码_CSS3垂直图标菜单 带Tooltip提示框.rar.rar
一个简单的Tooltip类 方便在控件中添加
DataGrid实现tooltip功能DataGrid实现tooltip功能.txtDataGrid实现tooltip功能.txtDataGrid实现tooltip功能.txtDataGrid实现tooltip功能.txtDataGrid实现tooltip功能.txt
今天我们来分享一组非常酷的CSS3小图标,这组CSS3按钮一共有170多个小按钮,每一个按钮都有不同的小图标,鼠标滑过按钮时还会出现一个Tooltip提示框,提示框的内容可以再HTML中定义,使用起来非常方便。另外需要说明...