HT for Web 自动布局手册

索引

概述

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

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

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

自动布局

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

AutoLayout(modelOrView, options)

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

自动布局时根据getNodeSize(node)函数的返回值，如{width: 100, height: 100}结构决定图元大小，并且加入布局器构造函数传入的 options 中gap、hgap、vgap的影响。 单独的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