如果您显示过Tree的ToolTip,会发现这个tooltip离鼠标太远了;而且也无法跟随鼠标一起移动;最重要的是,如果想动态更改tooltip也很麻烦。
还是自定义ToolTip灵活:
1. 设置tree.toolTipFunction,关闭默认的tooltip
tree.toolTipFunction = function(element:IData):String {
return null;
}
2. 监听mousemove事件,动态显示、隐藏以及更新tooltip
tree.addEventListener(MouseEvent.MOUSE_MOVE, function(e:MouseEvent):void {
handleMouseMove(e);
});
3. 由于tree.getTreeDataByMouseEvent方法中,即使鼠标在空白处也有返回值,所以需要特殊处理一下,判断鼠标是否在icon或者text上:
private function showToolTip():Boolean {
var obj:InteractiveObject = null;
var mousePoint:Point = new Point(stage.mouseX, stage.mouseY);
var objects:Array = stage.getObjectsUnderPoint(mousePoint);
for (var i:int = objects.length-1; i>=0; i--) {
if (objects[i] is InteractiveObject) {
obj = objects[i] as InteractiveObject;
break;
} else {
if (objects[i] is Shape && (objects[i] as Shape).parent) {
obj = (objects[i] as Shape).parent;
break;
}
}
}
return obj is UIComponent || obj is UITextField;
}
效果如下:
完整代码:
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
xmlns:tw="http://www.servasoftware.com/2009/twaver/flex"
paddingLeft="0" paddingRight="0" paddingTop="0" paddingBottom="0" backgroundColor="#FFFFFF"
creationComplete="init()">
<mx:Script>
<![CDATA[
import mx.core.IToolTip;
import mx.core.UIComponent;
import mx.core.UITextField;
import mx.managers.ToolTipManager;
import twaver.DataBox;
import twaver.IData;
import twaver.Link;
import twaver.Node;
import twaver.controls.TreeData;
private var _toolTip:IToolTip;
private var _lastData:IData = null;
private var _timer:uint = 0;
private function init():void {
var box:DataBox = tree.dataBox;
tree.toolTipFunction = function(element:IData):String {
return null;
};
tree.addEventListener(MouseEvent.MOUSE_MOVE, function(e:MouseEvent):void {
handleMouseMove(e);
});
tree.callLater2(function():void {
tree.expandAll();
});
var from:Node = new Node();
from.name = "From";
from.toolTip = "From";
from.centerLocation = new Point(100, 100);
box.add(from);
var to:Node = new Node();
to.name = "To";
to.toolTip = "To";
to.centerLocation = new Point(300, 400);
box.add(to);
var link:Link = new Link(from, to);
link.name = "Link";
link.toolTip = "Link";
box.add(link);
}
private function handleMouseMove(e:MouseEvent):void {
var treeData:TreeData = tree.getTreeDataByMouseEvent(e);
var data:IData = (showToolTip() && treeData && treeData.data) ? treeData.data : null;
if(data != null){
var x:Number = tree.mouseX + 10, y:Number = tree.mouseY + 10;
if(data != _lastData){
if(_toolTip != null){
ToolTipManager.destroyToolTip(_toolTip);
}
_toolTip = ToolTipManager.createToolTip(data.toolTip, x, y);
if(_timer){
clearTimeout(_timer);
}
_timer = setTimeout(function():void {
_timer = 0;
if(_toolTip){
_toolTip.text = "test\n" + _toolTip.text;
}
}, 1000);
}else{
_toolTip.x = x;
_toolTip.y = y;
}
}else{
if(_toolTip != null){
ToolTipManager.destroyToolTip(_toolTip);
}
_toolTip = null;
}
_lastData = data;
}
private function showToolTip():Boolean {
var obj:InteractiveObject = null;
var mousePoint:Point = new Point(stage.mouseX, stage.mouseY);
var objects:Array = stage.getObjectsUnderPoint(mousePoint);
for (var i:int = objects.length-1; i>=0; i--) {
if (objects[i] is InteractiveObject) {
obj = objects[i] as InteractiveObject;
break;
} else {
if (objects[i] is Shape && (objects[i] as Shape).parent) {
obj = (objects[i] as Shape).parent;
break;
}
}
}
return obj is UIComponent || obj is UITextField;
}
]]>
</mx:Script>
<tw:Tree id="tree" width="30%" height="100%"/>
</mx:Application>
完整代码见附件:
见原文最下方
分享到:
相关推荐
在核心功能部分,手册会详细讲解如何利用Twaver Flex构建图形模型。这包括添加、编辑和删除节点与边,以及调整它们的样式和属性。同时,手册还将涵盖各种图表类型(如树图、网络图、流程图等)的创建方法,让用户...
数据管理容器,尤其是`twaver.DataBox`,在TWaver Flex中扮演着Model的角色。它可以驱动多个视图,如`twaver.controls.Tree`、`twaver.controls.Table`和`twaver.network.Network`。当`DataBox`中的数据发生变化时,...
TWaver Flex中的告警功能是该组件的一个重要组成部分,文档中讲解了告警的使用,包括告警级别、状态与统计、以及告警的呈现方式。 ### 版权声明和使用许可 文档中也明确了版权信息和版权声明,强调了文档是...
6. **源码与工具**:标签中的“源码”意味着学习和使用Twaver Flex可能涉及到查看和修改源代码,以便深入理解和定制。而“工具”可能指的是Adobe Flex Builder或其他相关开发工具,这些工具可以帮助开发者更有效地...
标题“TWaver Flex网元任意位置添加icon”指的是在使用TWaver Flex开发图形化界面时,如何在图表或网络拓扑图的各个元素(网元)上自由地添加图标(icon)。TWaver是一款强大的可视化工具,它允许开发者创建交互式的...
Twaver Flex Demo SWF格式
在压缩包文件"twaver-flex-3.6.5"中,用户可以找到关于如何在Flex项目中集成和使用Twaver库的示例代码、资源文件以及可能的文档。这通常包括: 1. **源代码**:官方Demo的AS3源码,开发者可以通过阅读和修改这些...
这些控件允许开发者在 Flex 应用程序中轻松实现复杂的网络拓扑图、表格、树形结构等图形界面,从而极大地提高了应用程序的可读性和可用性。 #### 二、TWaverFlex 快速入门 **TWaverFlex 快速上手**:为了帮助初学...
标题中的“TWaver 3D Flex 3D 实例 例子”表明这是一份关于TWaver 3D技术在Flex 3D环境下的应用实例。TWaver是一款强大的数据可视化工具,它提供了丰富的图表类型和交互功能,而Flex 3D是Adobe Flex框架的一个扩展,...
Flex与Twaver是两个在IT行业中用于图形化界面开发和数据可视化的重要工具。Flex是一种基于ActionScript和MXML的开源框架,主要用于构建富互联网应用程序(RIA),尤其是在Web上创建交互式、动态的用户界面。而Twaver...
因此,开发者需要在安装有Flex Builder 4.6的环境中进行TWaver3D的开发工作。 ### 3. 第一个3D应用程序的创建 文档介绍了如何构建第一个3D应用程序,这包括了3D应用的基本概念,如事件驱动、元素的组织、3D样式、...
**前期准备**:在开始使用 Flex Twaver 之前,需要确保已经安装了 Java 开发环境,并了解基本的 Java 编程知识。此外,还需要获取 Flex Twaver 的安装包并按照指引完成安装。 **TWAVER 组件概览**:Flex Twaver ...
TWaver-flex的库TWaver.swc
TWaver Web 的广义概念涵盖了多个版本,包括 TWaver Web SVG、TWaver Flex 和 TWaver Silverlight;而在狭义上通常指的是 TWaver Web SVG 版本。 - **TWaver SVG 快速上手**:这一章节将介绍如何快速地使用 TWaver...
- TWaver在处理大量数据时表现出了极高的效率,例如在**Java**版本中可以在1秒内呈现10,000个节点和连线;在**Flex**版本中也可以在1.5秒内完成同样的任务。 - 这样的性能优势使得TWaver非常适合于处理大规模的数据...