JavaScript TWaver使用中间点画折线的方法

更新时间：2022年07月15日 09:39:54 作者：桃子蘸酱

这篇文章主要介绍了JavaScript TWaver使用中间点画折线的方法，TWaver的图形组件库中提供了拓扑组件、地图组件、设备图组件，以及表格、树图、属性表、图表等丰富的通用图形界面组件

前言

TWaver的图形组件库中提供了拓扑组件、地图组件、设备图组件，以及表格、树图、属性表、图表等丰富的通用图形界面组件，为电信运营支撑系统（OSS）的开发提供“一站式”的组件产品和解决方案，是快速设计、开发和部署OSS的利器。

问题描述：

使用官方的ShapeLink画折线会不符合我的需求，比如连线中间的name标签不居中，以及没办法绘制多条，由同一节点出发的连线。

原始写法

var link = new twaver.ShapeLink(nodeA, nodeB);
link.setName('shapeLink');
box.add(nodeA);
box.add(nodeB);
box.add(link);
link.addPoint({x:150,y:250});
link.addPoint({x:300,y:250});
link.addPoint({x:500,y:450});
link.setStyle('shapelink.type','lineto');

这里我们需要告诉它点的新坐标，然后将其添加进去就可以了，以这种方式形成自动形成折线，操作起来比较简单方便，

效果如图：

从这里面也可以看出问题，name显示的位置是连线的中间处，从官方给的参数来说，并没有办法设置它在哪条上居中显示。如果用于发某些结构图的话，连线的中间处的位置并不合适。

我的方案

可能是我的需求的原因，有些东西需要居中显示，导致不得已采用中间点的方式绘制。

主要实现功能：

从A到Z可能有多条连线，只是业务不同
name必须居中显示在横线的中间位置
多条连线时允许双击折叠

伪代码如下：

// 临时点tempNode
let tempNode = new Node();
tempNode.setSize(2, 2);
tempNode.setStyle('body.type', 'vector');
tempNode.setStyle('vector.shape', 'circle');
tempNode.setStyle('vector.fill.color', this.lineColor);
tempNode.setStyle('vector.outline.color', this.lineColor);
tempNode.setStyle('vector.outline.width', 1);

// 起点start-->tempNode
let link1 = new Link(start, tempNode);
link1.setFromNode(start);
link1.setToNode(tempNode);

// tempNode --> 终点
let link2 = new Link(tempNode, end);
link2.setFromNode(tempNode);
link2.setToNode(end);

// 如果有多条tempNode --> 终点
let link3 = new Link(tempNode, end);
link3.setFromNode(tempNode);
link3.setToNode(end);

最终效果图：

关于折叠的问题，只要link.bundle.id属性设置一样的ID就可以进行双击折叠和关闭，然后通过link.bundle.expanded属性，来控制默认是展开还是折叠状态。

到此这篇关于JavaScript TWaver使用中间点画折线的方法的文章就介绍到这了,更多相关JS TWaver画折线内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:

JavaScript canvas绘制折线图

javascript实现搜索筛选功能实例代码
这篇文章主要给大家介绍了关于javascript实现搜索筛选功能的相关资料，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2020-11-11
JSON.parse处理非标准Json数据出错的解决
这篇文章主要介绍了JSON.parse处理非标准Json数据出错的解决，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
2022-09-09
原生js轮播特效
这篇文章主要为大家详细介绍了原生js轮播特效，简单实用的代码，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2017-05-05
JavaScript页面实时显示当前时间实例代码
最近因为项目需要，有个需求是让实时显示当前时间，然后想想这不简单吗，自己就动手敲代码，但是发现一个问题，通过getMonth()得到月份，总是会比当前月份少1，深深觉得实践出真知啊…之前觉得Date对象挺简单的，有很多细节都没有注意。下面这篇文章就给大家详细介绍下。
2016-10-10
通过js来制作复选框的全选和不选效果
这篇文章主要介绍的是通过js来制作复选框的全选和不选效果,需要的朋友可以参考下
2014-05-05
JavaScript Accessor实现说明
关于Getter与Setter大家一定不会陌生,下面简单介绍几种我所知道的在JavaScript中实现G/S的方法.
2010-12-12
javascript 上下banner替换具体实现
这篇文章介绍了javascript 上下banner替换具体实现，有需要的朋友可以参考一下
2013-11-11
Openlayers+EasyUI Tree动态实现图层控制
这篇文章主要为大家详细介绍了Openlayers+EasyUI Tree动态实现图层控制，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2020-09-09
JavaScript 值类型和引用类型的初次研究(推荐)
这篇文章主要介绍了JavaScript 值类型和引用类型的初次研究,需要的朋友可以参考下
2017-07-07
Javascript循环删除数组中元素的几种方法示例
这篇文章主要给大家介绍了关于Javascript循环删除数组中元素的几种方法，文中给出了详细的示例代码供大家参考学习，对大家具有一定的参考学习价值，需要的朋友们下面来一起看看吧。
2017-05-05