`

TWaver局部自动布局及嵌套Group处理

阅读更多

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中处理警报或事件管理的实例。通过这个文件,我们可以学习到如何利用twaver.js来设计和实现报警系统的图形界面,包括节点的动态更新、状态显示、事件触发等。 **综合知识点:** 1. *...

    基于TWaver实现的3D机房Demo

    2. 设备布局:TWaver支持自动布局算法,可以智能地排列和连接设备,减少手动调整的工作量。 3. 交互性:用户可以通过鼠标或触摸屏进行交互,例如拖动设备、选择设备查看详细信息等。 4. 数据绑定:每个设备都可绑定...

    twaver web实例源码

    - 自定义布局:研究如何使用Twaver的布局算法或自定义布局策略来排列图形元素。 总之,这个"Twaver Web实例源码"是一个宝贵的学习资源,帮助开发者深入理解如何利用这两个强大工具进行Web可视化开发。通过实际操作...

    flex Twaver组件使用

    总的来说,TWaver Flex组件是构建富互联网应用的强大工具,它简化了图形界面的开发,提高了数据管理的灵活性,尤其在处理复杂网络和业务逻辑时表现突出。通过深入理解和熟练运用TWaver Flex,开发者能够快速创建出...

    TWaver-java-4.1最新 官网试用版jar包及Demo

    【标题】"TWaver-java-4.1最新 官网试用版jar包及Demo" 涉及的核心知识点是TWaver,一个基于Java的图形可视化库,主要用于数据的图表展示和交互。这个版本是4.1,是官方提供的试用版,包含jar包和演示示例。 【描述...

    TWaver的3d图形组件库,小demo

    4. **3D图形组件**:TWaver提供的3D图形组件包括但不限于3D图表(如3D柱状图、3D饼图)、3D网络图、3D空间布局等,可用于数据可视化和复杂的场景模拟。 5. **基本代码示例**:压缩包中的"twaver"文件可能包含一个或...

    twaver-html5-5.9.0-api_html5_-5.9.0-api_twaver_

    通过这些文件,开发者可以学习如何在HTML5环境中集成Twaver,创建交互式的可视化界面,包括添加图形元素、处理用户交互、响应事件、定制样式和布局等。同时,了解API文档可以帮助开发者掌握如何利用Twaver提供的类和...

    TWaver文档

    - 这样的性能优势使得TWaver非常适合于处理大规模的数据集,尤其在需要实时更新或频繁操作的场景下表现更为突出。 #### 轻量化 - TWaver的各个版本都非常轻量级,例如**Java**版本的大小仅为1.8MB,而**HTML5**版本...

    twaver for flex 开发手册

    - **twaver.Group**:用于组织一组节点,可以作为一个整体进行操作。 - **twaver.ShapeNode**:可以定义具有特定形状的节点,如圆形、矩形等。 - **twaver.Grid**:网格组件用于显示网格背景,便于定位节点位置...

    Twaver 3.7性能测试报告

    本次报告主要针对Twaver Java版本(Twaver Java)在不同节点配置及连接条件下的性能表现进行了详细评估。 #### 测试背景与目的 随着网络技术的不断发展以及数据量的日益增长,对于能够高效管理、处理大规模数据的...

    TWaver HTML5 开发指南代码

    综上,TWaver HTML5开发指南代码是开发人员构建高效、互动的拓扑工具和机房展示应用的重要资源,它简化了HTML5环境下的可视化开发,使得复杂的图形和网络展示变得触手可及。通过深入理解并熟练运用TWaver,开发者...

    twaver 教程

    2. **网络拓扑**:学习如何创建和编辑网络拓扑图,包括自动布局、手动拖放、缩放和平移操作。 3. **交互性**:理解Twaver的事件处理机制,如点击、拖动、双击等,以及如何添加自定义交互功能。 4. **动态更新**:...

    TWaver 4.1最新试用jar包 及Demo

    **TWaver 4.1:可视化工具包的深度解析** TWaver是一款强大的数据可视化库,主要面向企业级应用,提供丰富的图表类型和交互功能。在最新的4.1版本中,它进一步提升了性能和用户体验,为开发者带来了更多定制化选项...

    Twaver-html5.zip

    Twaver学习案例的例子

    twaver-java-4.1

    【标题】"TWaver-java-4.1" 是一个针对Java平台的TWaver最新开发包,旨在帮助开发者创建更加生动且具有吸引力的用户界面。TWaver是一个强大的数据可视化工具,它提供了丰富的图表类型和交互功能,让数据展示更加直观...

    twaver-api

    - 布局算法可以根据数据结构自动调整节点的位置,使图表更加清晰。 6. **事件处理(Event Handling)**: - API支持监听和响应各种图表事件,如添加、删除元素,或者用户交互事件。 - 可以通过事件处理来实现...

    twaver-java-3.7

    **标题:“twaver-java-3.7”** **描述:“twaver-java-3.7 文档”** **标签:“twaver java 3.7”** 本文将深入探讨Twaver Java 3.7版本的相关知识,这是一个强大的数据可视化库,特别适用于Java开发人员。...

    twaver拓扑

    此外,"颜色及样式均可配置"这一特性让用户可以根据需要自定义图形的颜色、大小、边框、填充等视觉属性,从而突出显示关键信息或区分不同类别。 【标签】"拓扑"表明twaver的核心功能是拓扑图的构建和管理。在IT领域...

Global site tag (gtag.js) - Google Analytics