TWaver提供了一些布局算法帮助我们快速为网元设置位置,很多情况下已经够用了,但是对于一些复杂的布局还需要我们自己做一些处理,看下面这个例子:
运行截图:
这个时候直接使用TNetwork#doLayout就不好使了,因为doLayout会对network中所有网元使用同一种布局算法,但是截图中Group下多个子Group各有自己的布局方式,我的解决办法是,先对最外层的Group整个布局,然后递归遍历子Group,单独对他们进行布局。
代码实现:
TWaver中实现局部布局可以通过两种方式:
- 将要布局的Element加入到一个新的TNetwork中,然后用新的TNetwork布局
- TWaver默认只对选中的Element布局,所以可以将要布局的Element加入到SelectionModel中
在这个demo中,首先用第一种方式对最外层的Group进行布局:
//layoutNetwork是用来布局的临时network
//生成Group时,已经将布局方式存入ClientProperty
layoutDatabox.addElementWithDescendant(group1);
layoutNetwork.doLayout((Integer)group1.getClientProperty("layout"),false);
然后递归遍历group,为子group布局
recursionChild(group1);
............................................
private void recursionChild(Group group){
for(int i=0;i<group.getChildren().size();i++){
Element element= (Element) group.getChildren().get(i);
if(element instanceof Group){
Group childGroup=((Group)element);
recursionChild(childGroup);//如果有子Group,会一直递归
//使用两种方式结合,将要布局的子group加入到layoutNetwork的SelectionModel
layoutDatabox.getSelectionModel().clearSelection();
layoutDatabox.getSelectionModel().appendSelection(childGroup.getChildren());
layoutNetwork.doLayout((Integer) ((Group) element).getClientProperty("layout"), false);
layoutDatabox.getSelectionModel().clearSelection();
}
}
}
最后附上全部代码
public class LayoutTest extends JPanel {
TDataBox layoutDatabox=new TDataBox();
TNetwork layoutNetwork=new TNetwork(layoutDatabox);
public LayoutTest(){
TNetwork network=new TNetwork();
ResizableNode gatewayNode=new ResizableNode();
gatewayNode.putCustomDraw(true);
gatewayNode.putCustomDrawShapeFactory(TWaverConst.SHAPE_ROUND_RECTANGLE_HALF);
gatewayNode.putCustomDrawGradient(false);
gatewayNode.putCustomDrawFillColor(new Color(254, 254, 206));
gatewayNode.setSize(70, 30);
gatewayNode.setName("Gateway");
gatewayNode.putLabelPosition(TWaverConst.POSITION_CENTER);
Group group1=createGroup(4,TWaverConst.LAYOUT_TREE);
Group group1_1=createGroup(12,TWaverConst.LAYOUT_CIRCULAR);
Group group1_2=createGroup(5,TWaverConst.LAYOUT_EAST);
Link group1_2Link=new Link((Node)group1.getChildren().get(0),(Node)group1_2.getChildren().get(0));
setLinkStyle(group1_2Link);
group1.addChild(group1_2);
group1.addChild(group1_2Link);
Link group1_1Link=new Link((Node)group1.getChildren().get(0),(Node)group1_1.getChildren().get(0));
setLinkStyle(group1_1Link);
group1.addChild(group1_1);
group1.addChild(group1_1Link);
//layoutNetwork是用来布局的临时network
//生成Group时,已经将布局方式存入ClientProperty
layoutDatabox.addElementWithDescendant(group1);
layoutNetwork.doLayout((Integer)group1.getClientProperty("layout"),false);
recursionChild(group1);
TDataBox box=new TDataBox();
box.addElementWithDescendant(group1);
box.addElement(gatewayNode);
group1.putGroupOpaque(true);
group1.putGroupFillColor(new Color(154,206,254));
network.setDataBox(box);
this.setLayout(new GridLayout(1,3));
this.add(network);
Layer layer=new Layer();
box.getLayerModel().addLayer(layer);
box.getLayerModel().moveToTop(layer);
Link link1=new Link(group1,gatewayNode);
setLinkStyle(link1);
link1.setLinkType(TWaverConst.LINK_TYPE_ORTHOGONAL);
link1.setLayerID(layer.getID());
box.addElement(link1);
}
/**
* 递归Group设置布局
* @param group
*/
private void recursionChild(Group group){
for(int i=0;i<group.getChildren().size();i++){
Element element= (Element) group.getChildren().get(i);
if(element instanceof Group){
Group childGroup=((Group)element);
recursionChild(childGroup);//如果有子Group,会一直递归
//使用两种方式结合,将要布局的子group加入到layoutNetwork的SelectionModel
layoutDatabox.getSelectionModel().clearSelection();
layoutDatabox.getSelectionModel().appendSelection(childGroup.getChildren());
layoutNetwork.doLayout((Integer) ((Group) element).getClientProperty("layout"), false);
layoutDatabox.getSelectionModel().clearSelection();
}
}
}
/**
* 产生测试Group及Node
* @param childCount
* @param layout
* @return
*/
private Group createGroup(int childCount,int layout){
Group group=new Group();
group.setExpand(true);
group.putClientProperty("layout",layout);
ResizableNode router=new ResizableNode();
router.putCustomDraw(true);
router.putCustomDrawShapeFactory(TWaverConst.SHAPE_RECTANGLE);
router.putCustomDrawGradient(false);
router.putCustomDrawFillColor(new Color(254, 254, 206));
router.setSize(60, 20);
router.setName("Router");
router.putLabelPosition(TWaverConst.POSITION_CENTER);
group.addChild(router);
for(int i=0;i<childCount;i++){
Node childNode=new Node();
Link link=new Link(router,childNode);
childNode.putCustomDraw(true);
childNode.putCustomDrawShapeFactory(TWaverConst.SHAPE_RECTANGLE);
childNode.putCustomDrawGradient(false);
childNode.putCustomDrawFillColor(new Color(254,202,2));
childNode.setName("C"+i);
childNode.putLabelPosition(TWaverConst.POSITION_CENTER);
setLinkStyle(link);
group.addChild(childNode);
group.addChild(link);
}
return group;
}
/**
* 设置link样式
* @param link
*/
public void setLinkStyle(Link link){
link.putLinkColor(Color.black);
link.putLinkOutlineWidth(0);
link.putLinkWidth(1);
link.putLinkAntialias(true);
link.putLinkToArrow(true);
link.putLinkToArrowOutline(false);
}
public static void main(String[] args){
SwingUtilities.invokeLater(new Runnable() {
@Override
public void run() {
JFrame frame=new JFrame("布局");
frame.setSize(1000,700);
frame.setContentPane(new LayoutTest());
frame.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
frame.setLocationRelativeTo(null);
frame.setVisible(true);
}
});
}
}
代码和思路都很简单,希望能抛砖引玉,大家有建议或好的想法也可以交流一下
分享到:
相关推荐
可能是用于展示如何在twaver.js中处理警报或事件管理的实例。通过这个文件,我们可以学习到如何利用twaver.js来设计和实现报警系统的图形界面,包括节点的动态更新、状态显示、事件触发等。 **综合知识点:** 1. *...
2. 设备布局:TWaver支持自动布局算法,可以智能地排列和连接设备,减少手动调整的工作量。 3. 交互性:用户可以通过鼠标或触摸屏进行交互,例如拖动设备、选择设备查看详细信息等。 4. 数据绑定:每个设备都可绑定...
6. **布局算法**:讨论内置的各种自动布局算法,如力导向布局、树状布局、环形布局等,以及如何自定义布局策略。 7. **事件处理**:说明如何监听和响应图形元素及图表的事件,实现复杂的用户交互逻辑。 8. **动画...
- 自定义布局:研究如何使用Twaver的布局算法或自定义布局策略来排列图形元素。 总之,这个"Twaver Web实例源码"是一个宝贵的学习资源,帮助开发者深入理解如何利用这两个强大工具进行Web可视化开发。通过实际操作...
总的来说,TWaver Flex组件是构建富互联网应用的强大工具,它简化了图形界面的开发,提高了数据管理的灵活性,尤其在处理复杂网络和业务逻辑时表现突出。通过深入理解和熟练运用TWaver Flex,开发者能够快速创建出...
【标题】"TWaver-java-4.1最新 官网试用版jar包及Demo" 涉及的核心知识点是TWaver,一个基于Java的图形可视化库,主要用于数据的图表展示和交互。这个版本是4.1,是官方提供的试用版,包含jar包和演示示例。 【描述...
4. **3D图形组件**:TWaver提供的3D图形组件包括但不限于3D图表(如3D柱状图、3D饼图)、3D网络图、3D空间布局等,可用于数据可视化和复杂的场景模拟。 5. **基本代码示例**:压缩包中的"twaver"文件可能包含一个或...
通过这些文件,开发者可以学习如何在HTML5环境中集成Twaver,创建交互式的可视化界面,包括添加图形元素、处理用户交互、响应事件、定制样式和布局等。同时,了解API文档可以帮助开发者掌握如何利用Twaver提供的类和...
- 这样的性能优势使得TWaver非常适合于处理大规模的数据集,尤其在需要实时更新或频繁操作的场景下表现更为突出。 #### 轻量化 - TWaver的各个版本都非常轻量级,例如**Java**版本的大小仅为1.8MB,而**HTML5**版本...
- **twaver.Group**:用于组织一组节点,可以作为一个整体进行操作。 - **twaver.ShapeNode**:可以定义具有特定形状的节点,如圆形、矩形等。 - **twaver.Grid**:网格组件用于显示网格背景,便于定位节点位置...
本次报告主要针对Twaver Java版本(Twaver Java)在不同节点配置及连接条件下的性能表现进行了详细评估。 #### 测试背景与目的 随着网络技术的不断发展以及数据量的日益增长,对于能够高效管理、处理大规模数据的...
综上,TWaver HTML5开发指南代码是开发人员构建高效、互动的拓扑工具和机房展示应用的重要资源,它简化了HTML5环境下的可视化开发,使得复杂的图形和网络展示变得触手可及。通过深入理解并熟练运用TWaver,开发者...
2. **网络拓扑**:学习如何创建和编辑网络拓扑图,包括自动布局、手动拖放、缩放和平移操作。 3. **交互性**:理解Twaver的事件处理机制,如点击、拖动、双击等,以及如何添加自定义交互功能。 4. **动态更新**:...
**TWaver 4.1:可视化工具包的深度解析** TWaver是一款强大的数据可视化库,主要面向企业级应用,提供丰富的图表类型和交互功能。在最新的4.1版本中,它进一步提升了性能和用户体验,为开发者带来了更多定制化选项...
Twaver学习案例的例子
【标题】"TWaver-java-4.1" 是一个针对Java平台的TWaver最新开发包,旨在帮助开发者创建更加生动且具有吸引力的用户界面。TWaver是一个强大的数据可视化工具,它提供了丰富的图表类型和交互功能,让数据展示更加直观...
- 布局算法可以根据数据结构自动调整节点的位置,使图表更加清晰。 6. **事件处理(Event Handling)**: - API支持监听和响应各种图表事件,如添加、删除元素,或者用户交互事件。 - 可以通过事件处理来实现...
**标题:“twaver-java-3.7”** **描述:“twaver-java-3.7 文档”** **标签:“twaver java 3.7”** 本文将深入探讨Twaver Java 3.7版本的相关知识,这是一个强大的数据可视化库,特别适用于Java开发人员。...