Twaver-HTML5基础学习(14)连线(Link)连线类型(直线、延伸直线、正交直线)

Link连线类型

连线用于连接两个节点，可表示为链路，管线等业务对象。
TWaver HTML5中的连线类为twaver.Link，由之扩展出来的ShapeLink,这种连线是由一系列控制点决定连线走向的。
如果起始和结束点为同一节点，也就是节点A连向节点A,这种情况我们称之为自环。

普通的连线(Link)提供了几种走向类型,主要为三类：

🤔直线：直接连接起始结束节点

常用的样式有：’arc’、’triangle’、’parallel’。

😊延伸直线:先从端点的水平或者垂直方向延伸，然后再直线连接

常用的样式有: ‘flexional’, ‘flexional.horizontal’, ‘flexional.vertical’。

😉正交直线:这种连线最为丰富，可以通过一个控制点控制正交连线

常用的样式有:’orthogonal’, ‘orthogonal.vertical’, ‘orthogonal.H.V’,’orthogonal.V.H’,’extend.top’,’extend.left’,’extend.bottom’,’extend.right’。

类型不一样其实就是link.type这个属性值不一样

//方式一
link.setStyle('link.type','orthogonal');
//方式二
link.s('link.type','orthogonal');

表格展示：

1.直线
2.延伸直线

3.正交直线



属性太多，不一一尝试，需要哪一种，到之后直接看使用即可。

例子

工具js：

const twaver = require('twaver');
// 设置每个图元name的颜色
twaver.Styles.setStyle('label.color', '#ec6c00');
// 设置每个图元name2的颜色
twaver.Styles.setStyle('label2.color', '#57ab9a');
twaver.Styles.setStyle('select.color', '#ef8200');
//TWaver内部预定义六中告警级别
twaver.AlarmSeverity.CRITICAL = twaver.AlarmSeverity.add(500, 'Critical', 'C', "#FF0000");
twaver.AlarmSeverity.MAJOR = twaver.AlarmSeverity.add(400, 'Major', 'M', "#FFA000");
twaver.AlarmSeverity.MINOR = twaver.AlarmSeverity.add(300, 'Minor', 'm', "#FFFF00");
twaver.AlarmSeverity.WARNING = twaver.AlarmSeverity.add(200, 'Warning', 'W', "#00FFFF");
twaver.AlarmSeverity.INDETERMINATE = twaver.AlarmSeverity.add(100, 'Indeterminate', 'N', "#C800FF");
twaver.AlarmSeverity.CLEARED = twaver.AlarmSeverity.add(0, 'Cleared', 'R', "#00FF00");

const {
    CRITICAL, MAJOR, WARNING, MINOR, INDETERMINATE, CLEARED } = twaver.AlarmSeverity
export const ALARM1 = CLEARED
export const ALARM2 = INDETERMINATE
export const ALARM3 = MINOR
export const ALARM4 = MAJOR
export const ALARM5 = CRITICAL

/**
 * 创建一个dataBox容器
 * 容器中可以add图元
 */
export const returnElementBoxFun = () => new twaver.ElementBox()


/**
 * 创建一个画布 network对象
 * @param {ElementBox} box  创建一个画布 network对象
 */
export const returnNetworkFun = (box) => new twaver.vector.Network(box)

/**
 * 创建一个Group
 * 用于包裹图元
 */
export const returnGroupFun = (box, obj = {
   }) => {
   
    let group = new twaver.Group(obj)
    box.add(group)
    return group
}



/**
 * 创建一个容器dataBox和一个画布
 * 并将容器实例化画布
 * @returns [box,network] box network
 */
export const returnElementBoxAndNetworkFun = () => {
   
    let box = returnElementBoxFun();
    let network = returnNetworkFun(box);
    return [box, network]
}

/**
 * 用于创建一个节点
 * @param {ElementBox} box dataBox 
 * @param {String} name 当前节点的name
 * @param {Number} x   当前节点的x坐标
 * @param {Number} y 当前节点的y坐标
 * @returns {Node} Node
 */
export const returnNodeFun = (box, Obj = {
   }) => {
   
    let node = new twaver.Node(Obj);
    // node.setName(name);
    // node.setLocation(x, y);
    box.add(node);
    return node
}

/**
 * 
 * @param {Node} node1 节点1
 * @param {Node} node2 节点2
 */
export const returnLineFun = (node1, node2) => new twaver.Link(node1, node2)

/**
 * 注册图片 用于设置图元的img setImage
 * @param {String} url 图片 url
 * @param {NetWork} svg  NetWork对象
 */
export function returnRegisterImage(url, svg) {
   
    var image = new Image();
    image.src = url;
    var views = arguments;
    image.onload = function () {
   
        // getImageName 获取到的图片name用做 node节点的显示img
        twaver.Util.registerImage(getImageName(url), image, image.width, image.height, svg === true);
        image.onload = null;
        for (var i = 1; i < views.length; i++) {
   
            var view = views[i];
            if (view.invalidateElementUIs) {
   
                view.invalidateElementUIs();
            }
            if (view.invalidateDisplay) {
   
                view.invalidateDisplay();
            }
        }
    };
    // getImageName 获取到的图片name用做 node节点的显示img
    const getImageName = (url) => {
   
        var index = url.lastIndexOf('/');
        var name = url;
        if (index >= 0) {
   
            name = url.substring(index + 1);
        }
        index = name.lastIndexOf('.');
        if (index >= 0) {
   
            name = name.substring(0, index);
        }
        return name;
    }
}


/*
 * @param {*} 告警的Id 
 * @param {*} 告警网元的Id 
  * @param {*} 告警级别 
 * @param {*} alarmBox 网元容器.getAlarmBox()
 */
export const returnAlarmFun = (alarmID, elementID, alarmSeverity, alarmBox) => {
   
    var alarm = new twaver.Alarm(alarmID, elementID, alarmSeverity);
    alarmBox.add(alarm);
}

/**
 * 
 * @param {*} box 容器dataBox
 * @param {*} layer layer对象
 * @param {*} shape 图层的形状
 * @param {*} x node点的坐标
 * @param {*} y node点的坐标
 * @param {*} width 图层的宽高
 * @param {*} height 图层的宽高
 * @param {*} fillColor  图层填充颜色
 */
/**
 * 
 * shape 
 * circle 圆形
 * diamond 菱形
 * rectangle 长方形
 */
export const createNode = (box, layer, shape, x, y, width, height, fillColor, ) => {
   
    var node = new twaver.Node();
    node.setLayerId(layer.getId());
    node.setName('layer-' + layer.getId());
    node.setStyle('body.type', 'vector');
    node.setStyle('vector.fill.alpha', 0.7);
    node.setStyle('vector.shape', shape);
    node.setSize(width, height);
    node.setLocation(x, y);
    node.setStyle('vector.fill.color', fillColor);
    box.add(node); return node;
}
/**
 * 
 * @param {*} table 
 * @param {*} name 
 * @param {*} propetyName 
 * @param {*} propertyType 
 * @param {*} valueType 
 */
export const returnCreateColumn = (table, name, propetyName, propertyType, valueType) => {
   
    var column = new twaver.Column(name);
    column.setName(name);
    column.setPropertyName(propetyName);
    column.setPropertyType(propertyType);
    if (valueType) {
   
        column.setValueType(valueType);
    }
    table.getColumnBox().add(column);
    return column;
}

export const returnRandomColor = () => {
   
    var r = randomInt(255);
    var g = randomInt(255);
    var b = randomInt(255);
    return '#' + formatNumber((r << 16) | (g << 8) | b);
}
function randomInt(n) {
   
    return Math.floor(Math.random() * n);
}

function formatNumber(value) {
   
    var result = value.toString(16);
    while (result.length < 6) {
    result = '0' + result; } return result;
}

react页面：

/*
 * @Descripttion: 
 * @version: 
 * @Author: ZhangJunQing
 * @Date: 2022-04-18 14:44:05
 * @LastEditors: ZhangJunQing
 * @LastEditTime: 2022-04-20 14:54:01
 */
import React, {
    useEffect, useState } from 'react'
import {
   
    returnElementBoxAndNetworkFun,
    returnNodeFun,
    returnLineFun,
} from './utils'
const twaver = require('twaver');
// const demo = require('demo');
const Demo = () => {
   
    const [network, setnetwork] = useState({
   })
    const init = () => {
   
        const [box, network] = returnElementBoxAndNetworkFun()
        setnetwork(_ => network)
        network.invalidateElementUIs();
        document.getElementById("testID").appendChild(network.getView());
        // 设置最初的大小
        network.adjustBounds({
    x: 0, y: 0, width: 1000, height: 1000 });
        var from = returnNodeFun(box, {
    name: 'from', location: {
    x: 100, y: 100 } });
        var to = returnNodeFun(box, {
    name: 'to', location: {
    x: 300, y: 300 } });
        // 代理Link
        returnCreateGroupLink(from, to, 'g1_1', 1, "#57ab9a");
        returnCreateGroupLink(from, to, 'g1_2', 1, "#57ab9a");
        returnCreateGroupLink(from, to, 'g1_3', 1, "#57ab9a");
        // 代理Link
        returnCreateGroupLink(from, to, 'g2_1', 2, "#ec6c00");
        returnCreateGroupLink(from, to, 'g2_2', 2, "#ec6c00");
        returnCreateGroupLink(from, to, 'g2_3', 2, "#ec6c00");

        // 水平方向：orthogonal.horizontal
        // 垂直方向：orthogonal.vertical
        returnCreateGroupLink(from, to, 'g3_1', 1, '#0089c1', 'orthogonal.H.V');
        returnCreateGroupLink(from, to, 'g3_2', 1, '#0089c1', 'orthogonal.H.V');
        returnCreateGroupLink(from, to, 'g3_3', 1, '#0089c1', 'orthogonal.H.V');
        returnCreateGroupLink(from, to, 'g4_1', 2, '#238475', 'orthogonal.V.H', true);
        returnCreateGroupLink(from, to, 'g4_2', 2, '#238475', 'orthogonal.V.H', true);
        returnCreateGroupLink(from, to, 'g4_3', 2, '#238475', 'orthogonal.V.H', true);
        // returnCreateGroupLink(from, to, 'g5_1', 3, '#238475', 'orthogonal.V.H', true);
        // returnCreateGroupLink(from, to, 'g5_2', 4, '#238475', 'orthogonal.V.H', true);
        // returnCreateGroupLink(from, to, 'g5_3', 5, '#238475', 'orthogonal.V.H', true);
        // 点击组内任何一条Link，都可以使组展开或者闭合
        function returnCreateGroupLink(from, to, name, groupID, color, type, groupIndependent, gap, offset, bundleEnable) {
   
            var link = new twaver.Link(from, to);
            link.setName(name);
            if (type) {
   
                link.setStyle('link.type', type);
            }
            if (color) {
   
                link.setStyle('link.color', color);
            }
            if (groupID >= 0) {
   
                link.setStyle('link.bundle.id', groupID);
            }
            // "link.bundle.gap": 连线之间的间隙
            // link.setStyle('link.bundle.gap', 40);

            if (gap > 0) {
   
                link.setStyle('link.bundle.gap', gap);
            }
            if (offset > 0) {
   
                link.setStyle('link.bundle.offset', offset);
            }

            // "link.bundle.independent": 分组是否独立，存在多个连线分组时，是否独立绑定
            // 当为true的时候 两个组互不干扰 会造成重合的效果
            link.setStyle('link.bundle.independent', groupIndependent);
            // true  Link组为展开状态  false 闭合状态
            // 最终会在代理Link展开 点击当前组任意闭合
            link.setStyle('link.bundle.expanded', false);
            // 是否参与绑定
            link.setStyle('link.bundle.enable', bundleEnable ? bundleEnable : true);

            box.add(link);
            return link;
        }

    }
    useEffect(init, [])
    return (
        <>
            <p style={
   {
    fontSize: "20px", paddingLeft: "50px", poaddingTop: "50px" }}>tips: </p>
            <ul style={
   {
    fontSize: "20px", paddingLeft: "50px" }}>
                <li>连线(Link)连线类型</li>
            </ul>
            {
   /* 画布元素需要开启定位 不然生成的图元坐标点会偏移 */}
            <div id="testID" style={
   {
    width: "800px", height: "800px", border: "1px solid #ccc", position: "relative" }}></div>
        </>
    )
}
export default Demo

学习参考：TWaver Documents