脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript技巧 → JS TWaver画折线

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中this的绑定你知道几种?

    JavaScript中this的绑定你知道几种?

    this对于一些有经验的JavaScript开发者来说是一种非常复杂的机制。并且很多开发者对于this的理解并不是很清晰，导致在面试的时候经常受挫。今天我们就来看一看这个this真的有那么难吗
    2023-02-02
  • 浅析js中取绝对值的2种方法

    浅析js中取绝对值的2种方法

    本篇文章是对js中取绝对值的2种方法进行了介绍说明，需要的朋友可以参考下
    2013-07-07
  • 一文详解最常见的六种跨域解决方案

    一文详解最常见的六种跨域解决方案

    跨域问题的本质是浏览器为了保证用户的一种安全拦截机制,想要解决跨域问题,只需要告诉浏览器"我是自己人,不要拦我"就行,下面这篇文章主要给大家介绍了关于最常见的六种跨域解决方案的相关资料,需要的朋友可以参考下
    2023-04-04
  • JavaScript eval()函数定义及使用方法详解

    JavaScript eval()函数定义及使用方法详解

    这篇文章主要介绍了JavaScript eval()函数定义及使用方法详解,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
    2020-07-07
  • js判断鼠标同时离开两个div的思路及代码

    js判断鼠标同时离开两个div的思路及代码

    js判断鼠标同时离开两个div想了好长时间终于出炉了，下面与大家分享下具体的实现代码，感兴趣的朋友可以参考下啊
    2013-05-05
  • TypeScript枚举的基础知识及实例

    TypeScript枚举的基础知识及实例

    使用枚举我们可以定义一些带名字的常量,使用枚举可以清晰地表达意图或创建一组有区别的用例,下面这篇文章主要给大家介绍了关于TypeScript枚举的基础知识及实际用例,需要的朋友可以参考下
    2021-10-10
  • 微信小程序 确认框的实现（附代码）

    微信小程序 确认框的实现（附代码）

    这篇文章主要介绍了微信小程序 确认框的实现（附代码）,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
    2019-07-07
  • Echarts实例教程之树形图表的实现方法

    Echarts实例教程之树形图表的实现方法

    众所周知echarts是一个纯JavaScript的图标库,下面这篇文章主要给大家介绍了关于Echarts实例之树形图表的实现方法,需要的朋友可以参考下
    2021-08-08
  • 简单实现js悬浮导航效果

    简单实现js悬浮导航效果

    这篇文章主要教大家如何简单实现js悬浮导航效果，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2017-02-02
  • JavaScript接入百度地图API的方法步骤

    JavaScript接入百度地图API的方法步骤

    在网站开发过程中，经常会调用到地图，百度地图JavaScript API可帮助您在网站中构建功能丰富、交互性强的地图应用，本文就详细的介绍一下，感兴趣的可以了解一下
    2021-07-07

最新评论