gojs一些實用的高階用法
阿新 • • 發佈:2022-01-05
目錄
- 1. 取消更新動畫
- 2. 匯出圖(含可視區外的部分)
- 3. 禁用 ctrl 相關快捷鍵
- 4. 畫布滾動模式,無限滾動 or 區域性滾動
- 5. 展開收起多層巢狀的組
- 6. 給圖元素加動畫
- 7. 修改框選的樣式
1. 取消更新動畫
問題:更新資料的時候,會觸發渲染,有渲染動畫,使用者體驗不好。
方案:初始資料繪製,有動畫;更新資料繪製,無動畫。
程式碼實現:
// 後面所用到的 diagram 都是 go 建立的例項 // diagram_container 為圖容器dom id diagram = $(go.Diagram,'diagram_container')
方案一:
function updateData (nodeArr = [],linkArr = [],hasAnimation = true ) { if (hasAnimation) { diagram.model = new go.GraphLinksModel(nodeArr,linkArr); } else { diagram.model.nodeDataArray = nodeArr diagram.model.linkDataArray = linkArr } } // 初始化例項後處理,只用一次 diagram.animationManager.canStart = function(reason) { if (reason === 'Model') return false return true }
方案二:
// 繫結資料至 diagram,繪製圖 function updateData (nodeArr = [],linkArr = [],linkArr); } else { diagram.model.nodeDataArray = nodeArr diagram.model.linkDataArray = linkArr diagram.animationManager.stopAnimation() } }
方案三:
// 繫結資料至 diagram,繪製圖 function updateData (nodeArr = [],hasAnimation = true) { diagram.model = new go.GraphLinksModel(nodeArr,linkArr); if (diagram.animationManager) { // Default 有動畫,None 沒有動畫 diagram.animationManager.initialAnimationStyle = hasAnimation ? go.AnimationManager.Default : go.AnimationManager.None; } }
2. 匯出圖(含可視區外的部分)
問題:匯出圖,利用原生http://www.cppcns.com canvas 相關 api 實現的匯出圖片,只包含可視區內的
解決:利用 gojs 提客棧供的 api 處理
背後原理:利用資料重新繪製一份圖,所有資料節點都在的圖可視區內,然後利用原生 canvas 相關 api 實現匯出圖片
程式碼實現:
function downloadImg = ({ imgName = 'dag',bgColor = 'white',imgType = 'image/png' }= {}) { diagram.makeImageData({ scale: 2,padding: new go.Margin(50,70),maxSize: new go.Size(Infinity,Infinity),background: bgColor,type: imgType,returnType: 'blob',callback: (blob: any) => { const url = window.URL.createObjectURL(blob) const fileName = imgName + '.png' const aEl = document.createElement('a') aEl.style.display = 'none' aEl.href = url aEl.download = fileName // IE 11 if (window.navigator.msSaveBlob !== undefined) { window.navigator.msSaveBlob(blob,fileName) return } document.body.appendChild(aEl) requestAnimationFrame(function() { aEl.click() window.URL.revokeObjectURL(url) document.body.removeChild(aEl) }) } }) }
3. 禁用 ctrl 相關快捷鍵
// 禁用 ctl 相關操作 diagram.commandHandler.doKeyDown = function() { const e = diagram.lastInput const control = e.control || e.meta const key = e.key // 取消 Ctrl+A/Z/Y/G A-全選、Z-撤銷、Y-重做、G-分組 if (control && ['A','Z','Y','G'].includes(key)) return // 取消 Del/Backspace 刪除鍵 if (key === 'Del' || key === 'Backspace') return go.CommandHandlePERIHpr.prototype.doKeyDown.call(this) }
4. 畫布滾動模式,無限滾動 or 區域性滾動
問題:mac 上 觸控鍵能左滑右滑控制瀏覽器頁面前進後退,很容易觸發
方案:開啟無限滾動,避免使用者不小心觸發了瀏覽器的前進後退
程式碼實現:
function infiniteScroll = (infiniteScroll) { this.diagram.scrollMode = infiniteScroll ? go.Diagram.InfiniteScroll : go.Diagram.DocumentScroll }
5. 展開收起多層巢狀的組
問題:組多層巢狀,全部展開後,點選單個組收起第一次無效,第二次點選才生效
程式碼實現:
方式一:nodeArr 沒有繫結 展開收起 屬性
// groupIds 為所有 group 的ids,從外到內。 一開始遍歷組裝資料的時候就收集好 // groupIdsReverse 為所有 group 的ids,從內到外 // 全部展開,從外到內 // 全部收起,從內到外 function setExpandCollapse (isExpand,groupIds,groupIdsReverse) { // 展開和摺疊需要從兩個方向處理,再次展開摺疊互動才正常,否則第一次點無效,需要點第二次材有限 let arr = isExpand ? groupIds : groupIdsReverse; let group; arr.forEach(id => { group = diagram.findNodeForKey(id); group.isSubGraphExpanded = isExpand; }) },
方式二:nodeArr 繫結 展開收起 屬性isExpanded
function setExpandCollapse (isExpand) { const { nodeDataArray,linkDataArray } = diagram.model const newNodeArr = nodeDataArray.map(v => { if (v.isGroup) { return {...v,isExpanded: isExpand} } return v }) // 上面的方法 updateData(newNodeArr,linkArr,false) }
6. 給圖元素加動畫
- 虛線動畫
- icon loading 旋轉動畫
程式碼實現:
function loopPERIHp = () { const animationTimer = setTimeout(() => { clearTimeout(animationTimer) const oldskips = diagram.skipsUndoManager; diagram.skipsUndoManager = true; // 虛線動畫 diagram.links.each((link: any) => { const dashedLinkShape = link.findObject("dashedLink"); if (dashedLinkShape) { const off = dashedLinkShape.strokeDashOffset - 3; // 設定(移動)筆劃划動畫 dashedLinkShape.strokeDashOffset = (off <= 0) ? 60 : off; } }); // loading 旋轉 diagram.nodes.each((node: any) => { const loadingShape = node.findObject("loading"); if (loadingShape) { const angle = loadingShape.angle + 20; // 設定(移動)筆劃划動畫 loadingShape.angle = (angle == 0) ? 360 : angle; } }); diagram.skipsUndoManager = oldskips; loop(); },180); } loop()
7. 修改框選的樣式
問題:框選樣式:預設是紅色的,和自定義的圖顏色不匹配
diagram.toolManager.dragSelectingTool.box = $(go.Part,{ layerName: "Tool",selectable: false },$(go.Shape,{ name: "SHAPE",fill: 'rgba(104,129,255,0.2)',stroke: 'rgba(104,0.5)',strokeWidth: 2 }));
以上所述是小編給大家介紹的gojs一些實用的高階用法,希望對大家有所幫助。在此也非常感謝大家對我們的支援!