快捷導(dǎo)航

JavaScript?TWaver使用中間點畫折線的方法

更新時間：2022年07月15日 09:39:54 作者：??桃子蘸醬?

這篇文章主要介紹了JavaScript?TWaver使用中間點畫折線的方法，TWaver的圖形組件庫中提供了拓?fù)浣M件、地圖組件、設(shè)備圖組件，以及表格、樹圖、屬性表、圖表等豐富的通用圖形界面組件

前言

TWaver的圖形組件庫中提供了拓?fù)浣M件、地圖組件、設(shè)備圖組件，以及表格、樹圖、屬性表、圖表等豐富的通用圖形界面組件，為電信運營支撐系統(tǒng)（OSS）的開發(fā)提供“一站式”的組件產(chǎn)品和解決方案，是快速設(shè)計、開發(fā)和部署OSS的利器。

問題描述：

使用官方的ShapeLink畫折線會不符合我的需求，比如連線中間的name標(biāo)簽不居中，以及沒辦法繪制多條，由同一節(jié)點出發(fā)的連線。

原始寫法

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');

這里我們需要告訴它點的新坐標(biāo)，然后將其添加進(jìn)去就可以了，以這種方式形成自動形成折線，操作起來比較簡單方便，

效果如圖：

從這里面也可以看出問題，name顯示的位置是連線的中間處，從官方給的參數(shù)來說，并沒有辦法設(shè)置它在哪條上居中顯示。如果用于發(fā)某些結(jié)構(gòu)圖的話，連線的中間處的位置并不合適。

我的方案

可能是我的需求的原因，有些東西需要居中顯示，導(dǎo)致不得已采用中間點的方式繪制。

主要實現(xiàn)功能：

從A到Z可能有多條連線，只是業(yè)務(wù)不同
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);

最終效果圖：