HT for Web 连线类型手册

索引

概述

HT for Web提供了默认的直线和多点的连线类型能满足大部分基本拓扑图形应用，但对于绘制流程图、组织结构图和思维导图等应用来说还需要更多类型的连线， 为此HT for Web提供了能满足更多应用需求的连线类型扩展库。

使用本章节介绍的连线类型需要在引入ht.js核心库之后，再引入一个ht-edgetype.js的连线类型插件库。

自定义

ht.Default.setEdgeType(type, func, mutual)函数可用于自定义新连线类型：

ht.Default.setEdgeType('custom', function(edge, gap, graphView, sameSourceWithFirstEdge){
    var sourcePoint = edge.getSourceAgent().getPosition(),
        targetPoint = edge.getTargetAgent().getPosition(),
        points = new ht.List();       
        points.add(sourcePoint);
        points.add({
            x: (sourcePoint.x + targetPoint.x)/2, 
            y: (sourcePoint.y + targetPoint.y)/2 + 300
        });                  
        points.add(targetPoint);                                                       

    return {
        points: points,
        segments: new ht.List([1, 3])
    };                 
});

以上自定义连线例子中，对连线在sourcePoint和targetPoint之间，插入一个中心控制点作为曲线的拐点。

该例子运用了graphView.setLayers(['nodeLayer', 'edgeLayer']);的分层功能， 通过node.setLayer('nodeLayer');和edge.setLayer('edgeLayer');分别将Node和Edge归入不同的图层， 因为默认节点会显示在连线之上，通过这样的分层后节点会呈现在连线之下。

鼠标移动到连线之上是会动态改变连线颜色，该功能是通过直接对GraphView.getView()添加mousemove事件做的特殊处理， ht.Default.isDragging()的判断是为了避免在移动节点时进行处理，通过graphView.getDataAt(e);可获取当前鼠标所在位置下图元。

var lastFocus = null;
graphView.getView().addEventListener('mousemove', function(e){ 
    if(!ht.Default.isDragging()){
        if(lastFocus){
            lastFocus.s('edge.color', 'lightgray');
        }                        
        var data = graphView.getDataAt(e);                        
        if(data instanceof ht.Edge){                            
            data.s('edge.color', 'red');
            lastFocus = data;                            
        }else{                            
            lastFocus = null;                            
        }                        
    }                    
});

连线类型

连线类型扩展包预定义了如下可选择类型：

连线箭头

以下例子和上面类型模型一致，但对所有连线增加了起始和结束箭头功能，HT未预定义连线箭头功能，用户可通过自定义矢量的方式任意扩展自己所需箭头样式。 以下代码先定义了toArrow的矢量箭头，然后通过旋转rotation: Math.PI实现fromArrow， 最后通过edge.addStyleIcon的函数分别在15和19的左右中心位置设置了两个箭头图标， 其中keepOrien: true需要设置，因为需要让箭头和连线的平行方向保持一致，无需像label的情况那样动态调节。

ht.Default.setImage('toArrow', {
    width: 100,
    height: 50,
    comps: [
        {
            type: 'shape',
            points: [2, 25, 30, 25],
            borderWidth: 4,
            borderColor: 'rgba(255, 0, 0, 0.9)'
        },
        {
            type: 'shape',
            points: [30, 10, 30, 40, 50, 25, 30, 10],
            background: 'rgba(255, 0, 0, 0.9)',
            borderWidth: 1,
            borderColor: 'red',
            gradient: 'spread.vertical',
            gradientColor: 'rgba(255, 255, 255, 0.9)'
        }
    ]
}); 
ht.Default.setImage('fromArrow', {
    width: 100,
    height: 50,
    comps: [
        {
            type: 'image',
            name: 'toArrow',
            rect: [0, 0, 100, 50],
            rotation: Math.PI
        }
    ]
}); 

function createEdge(sourceNode, targetNode, count, typeOrStyle){
    var edge;
    for(var i=0; i<count; i++){
        edge = new ht.Edge(sourceNode, targetNode);
        if(typeof typeOrStyle === 'object'){
            edge.s(typeOrStyle);
        }else{
            edge.s('edge.type', typeOrStyle);                        
        }
        edge.addStyleIcon("fromArrow", {
            position: 15,
            keepOrien: true,
            width: 40,
            height: 20,
            names: ['fromArrow']
        }); 
        edge.addStyleIcon("toArrow", {
            position: 19,
            keepOrien: true,
            width: 40,
            height: 20,                        
            names: ['toArrow']
        }); 
        dataModel.add(edge);
    }
    return edge;
}

复杂连线

前面介绍的连线类型能实现同起始和结束节点将连线的成捆布局功能，但这些连线类型布局时并不考虑起始和结束节点不同的连线存在， 因此对于复杂的拓扑图会存在连线互相重叠的问题，为此HT增加了对应的后缀为2的连线类型：ortho2，flex2，extend.north2、 extend.south2、extend.west2，extend.east2，v.h2和h.v2。

欢迎交流 service@hightopo.com