JavaScript?TWaver使用中間點畫折線的方法
前言
TWaver的圖形組件庫中提供了拓撲組件、地圖組件、設(shè)備圖組件，以及表格、樹圖、屬性表、圖表等豐富的通用圖形界面組件，為電信運營支撐系統(tǒng)（OSS）的開發(fā)提供“一站式”的組件產(chǎn)品和解決方案，是快速設(shè)計、開發(fā)和部署OSS的利器。
問題描述：
使用官方的ShapeLink畫折線會不符合我的需求，比如連線中間的name標簽不居中，以及沒辦法繪制多條，由同一節(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');這里我們需要告訴它點的新坐標，然后將其添加進去就可以了，以這種方式形成自動形成折線，操作起來比較簡單方便，
效果如圖：
從這里面也可以看出問題，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);最終效果圖：
關(guān)于折疊的問題，只要link.bundle.id屬性設(shè)置一樣的ID就可以進行雙擊折疊和關(guān)閉，然后通過link.bundle.expanded屬性，來控制默認是展開還是折疊狀態(tài)。
到此這篇關(guān)于JavaScript TWaver使用中間點畫折線的方法的文章就介紹到這了,更多相關(guān)JS TWaver畫折線內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
這篇文章主要給大家介紹了關(guān)于javascript實現(xiàn)搜索篩選功能的相關(guān)資料，文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-11-11
JSON.parse處理非標準Json數(shù)據(jù)出錯的解決
這篇文章主要介紹了JSON.parse處理非標準Json數(shù)據(jù)出錯的解決，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-09-09
這篇文章主要為大家詳細介紹了原生js輪播特效，簡單實用的代碼，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-05-05
JavaScript頁面實時顯示當(dāng)前時間實例代碼
最近因為項目需要，有個需求是讓實時顯示當(dāng)前時間，然后想想這不簡單嗎，自己就動手敲代碼，但是發(fā)現(xiàn)一個問題，通過getMonth()得到月份，總是會比當(dāng)前月份少1，深深覺得實踐出真知啊…之前覺得Date對象挺簡單的，有很多細節(jié)都沒有注意。下面這篇文章就給大家詳細介紹下。2016-10-10
這篇文章主要介紹的是通過js來制作復(fù)選框的全選和不選效果,需要的朋友可以參考下2014-05-05
關(guān)于Getter與Setter大家一定不會陌生,下面簡單介紹幾種我所知道的在JavaScript中實現(xiàn)G/S的方法.2010-12-12
javascript 上下banner替換具體實現(xiàn)
這篇文章介紹了javascript 上下banner替換具體實現(xiàn)，有需要的朋友可以參考一下2013-11-11
Openlayers+EasyUI Tree動態(tài)實現(xiàn)圖層控制
這篇文章主要為大家詳細介紹了Openlayers+EasyUI Tree動態(tài)實現(xiàn)圖層控制，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2020-09-09
這篇文章主要介紹了JavaScript 值類型和引用類型的初次研究,需要的朋友可以參考下2017-07-07
Javascript循環(huán)刪除數(shù)組中元素的幾種方法示例
這篇文章主要給大家介紹了關(guān)于Javascript循環(huán)刪除數(shù)組中元素的幾種方法，文中給出了詳細的示例代碼供大家參考學(xué)習(xí)，對大家具有一定的參考學(xué)習(xí)價值，需要的朋友們下面來一起看看吧。2017-05-05