HT for Web 自动布局手册

索引


概述

HT for Web提供了自动布局的功能,即根据节点和连线关系,提供多种类型算法进行自动排布节点位置。 自动布局常用于图元较多,或连接关系教复杂时,不易于人工拖拽摆放的场景。

使用自动布局功能需要在引入ht.js核心库之后,再引入一个ht-autolayout.js的自动布局插件库。

自动布局不是银弹,复杂的情况还是需要手工布局,或业务上做必要的妥协,甚至根据业务编写特殊的排布算法才能达到最佳效果。

自动布局

ht.layout.AutoLayout类提供2D的自动布局,即3Dxz面的布局, 构造函数原型为:

AutoLayout(modelOrView, options)

默写情况下ht.layout.AutoLayout将对所有图元进行布局,当部分图元被选中时则仅对选中的图元进行布局, 如果构造函数参数为GraphViewGraph3dView时,则会考虑View上的isMovable(data)函数最终决定图元是否需要布局, 也可以通过重载ht.layout.AutoLayoutisLayoutable(data)自定义图元可否布局规则。

自动布局时根据getNodeSize(node)函数的返回值,如{width: 100, height: 100}结构决定图元大小,并且加入布局器构造函数传入的 options 中gaphgapvgap的影响。 单独的node节点可以通过以下属性来单独干预自己的布局间距:

也可通过重载该函数改变返回尺寸,返回尺寸越大图元布局会离得松散些,越小则图元布局更紧凑。

自动布局可通过setAnimate(true/false)控制布局过程是否进行动画,默认isAnimate()的值为true启用动画。 还可通过setFrames(20)设置帧数和setInterval(16)设置帧间隔毫秒数控制Frame-Based的动画效果, 也可通过setDuration(1000)设置动画周期毫秒数控制Time-Based的动画效果。

ht.layout.AutoLayout类最重要的函数就是layout(type, finishFunc)自动布局函数, 其中type类型可为circular|symmetric|towardnorth|towardsouth|towardeast|towardwest|hierarchical七种自动布局类型, finishFunc为结束函数,一般用于启动动画的自动布局结束后做些后续处理。以下代码构建了一个自动布局对象,进行了circular类型的自动布局, 并且在自动布局动画结束后,调用graphView.fitContent(true)实现整体图元缩放到适配窗口的大小。

autoLayout = new ht.layout.AutoLayout(graphView);
autoLayout.layout('circular', function(){
    graphView.fitContent(true);
});

circular

圆形布局,图元以圆形方式进行布局,该类型布局效率较高,但围绕中心图元较多时布局占用空间较大。

function layout(animate){
    autoLayout.setAnimate(animate);
    autoLayout.layout('circular', function(){
        graphView.fitContent(animate);
    });                  
}

symmetric

对称布局,图元以对称方式布局,该类型布局效率较低,但比circular布局占用空间更少更紧凑。

function layout(animate){
    autoLayout.setAnimate(animate);
    autoLayout.layout('symmetric', function(){
        graphView.fitContent(animate);
    });                  
}

towardnorth

朝北布局,图元以树层次结构朝北的方向布局,该类型要求进行布局的拓扑结构必须为树层次关系。

function layout(animate){
    autoLayout.setAnimate(animate);
    autoLayout.layout('towardnorth', function(){
        graphView.fitContent(animate);
    });                  
}

towardsouth

朝南布局,图元以树层次结构朝南的方向布局,该类型要求进行布局的拓扑结构必须为树层次关系。

function layout(animate){
    autoLayout.setAnimate(animate);
    autoLayout.layout('towardsouth', function(){
        graphView.fitContent(animate);
    });                  
}

towardeast

朝东布局,图元以树层次结构朝东的方向布局,该类型要求进行布局的拓扑结构必须为树层次关系。

function layout(animate){
    autoLayout.setAnimate(animate);
    autoLayout.layout('towardeast', function(){
        graphView.fitContent(animate);
    });                  
}

towardwest

朝西布局,图元以树层次结构朝西的方向布局,该类型要求进行布局的拓扑结构必须为树层次关系。

function layout(animate){
    autoLayout.setAnimate(animate);
    autoLayout.layout('towardwest', function(){
        graphView.fitContent(animate);
    });                  
}

hierarchical

层次布局,该类型对树结构拓扑的布局效果类似towardsouth类型,但hierarchical类型不要求拓扑为树结构,可对复杂网状结构进行布局。

function layout(animate){
    autoLayout.setAnimate(animate);
    autoLayout.layout('hierarchical', function(){
        graphView.fitContent(animate);
    });                  
}

欢迎交流 service@hightopo.com