gojs一些實用的高級用法
1. 取消更新動畫
問題:更新數據的時候,會觸發渲染,有渲染動畫,用戶體驗不好。
方案:初始數據繪制,有動畫;更新數據繪制,無動畫。
代碼實現:
// 後面所用到的 diagram 都是 gojs 創建的實例 // 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 = [], hasAnimation = true ) { if (hasAnimation) { diagram.model = new go.GraphLinksModel(nodeArr, linkArr); } else { diagram.model.nodeDataArray = nodeArr diagram.model.linkDataArray = linkArr diagram.animationManager.stopAnimation() } }
方案三:
// 綁定數據至 diagram,繪制圖 function updateData (nodeArr = [], linkArr = [], 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. 導出圖(含可視區外的部分)
問題:導出圖,利用原生 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.CommandHandler.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 loop = () { 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, 129, 255, 0.5)', strokeWidth: 2 }));
以上所述是小編給大傢介紹的gojs一些實用的高級用法,希望對大傢有所幫助。在此也非常感謝大傢對WalkonNet網站的支持!