gojs一些实用的高级用法
更新时间:2022年1月2日 13:12 点击:304 作者:ESnail
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一些实用的高级用法,希望对大家有所帮助。在此也非常感谢大家对猪先飞网站的支持!
原文出处:https://www.cnblogs.com/EnSnail/p/15754962.html
相关文章
- using 指令有两个用途: 允许在命名空间中使用类型,以便您不必限定在该命名空间中使用的类型。 为命名空间创建别名。 using 关键字还用来创建 using 语句 定义一个范围,将在此...2020-06-25
- 最新版下载: http://www.csdn123.com/uploadfile/2015/0428/20150428062734485.zip 概要 iScroll 4 这个版本完全重写了iScroll这个框架的原始代码。这个项目的产生...2016-05-19
- 这篇文章主要介绍了C++中cin的用法详细,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧...2020-04-25
- 这篇文章主要介绍了C#中的try catch finally用法,以实例形式分析了try catch finally针对错误处理时的不同用法,具有一定的参考借鉴价值,需要的朋友可以参考下...2020-06-25
- useState 通过在函数组件里调用它来给组件添加一些内部 state,React 会在重复渲染时保留这个 state,接下来通过一个示例来看看怎么使用 useState吧...2021-06-04
- 这篇文章主要介绍了Delphi常用关键字用法,包括了各个常用的关键字及其详细用法,需要的朋友可以参考下...2020-06-30
PHP中print_r、var_export、var_dump用法介绍
文章详细的介绍了关于PHP中print_r、var_export、var_dump区别比较以及这几个在php不同的应用中的用法,有需要的朋友可以参考一下 可以看出print_r跟var_export都...2016-11-25- 在使用xml-rpc的时候,server端获取client数据,主要是通过php输入流input,而不是$_POST数组。所以,这里主要探讨php输入流php://input。 下面的例子摘取的是wordpres...2016-11-25
- 1、声明主键的方法: 您可以在创建表的时候就为表加上主键,如: CREATE TABLE tbl_name ([字段描述省略...], PRIMARY KEY(index_col_name)); 也可以更新表结构时为表加上主键,如: ALTER TABLE tbl_name ADD PRIMARY KEY (in...2015-11-24
- 本文给大家汇总介绍了C#中的几种this用法,相信大家应该有用过,但你用过几种?以下是个人总结的this几种用法,欢迎大家拍砖,废话少说,直接列出用法及相关代码。...2020-06-25
- 目前在做window.onerror时上报js错误信息的事,整理下相关资料,需要的朋友可以参考下...2016-01-29
- 这篇文章主要介绍了C语言循环结构与时间函数用法,是C语言中非常重要的一个技巧,需要的朋友可以参考下...2020-04-25
- 本文章来给大家介绍一下在php中 ->与 ==>符号的用法与区别,有需要了解的朋友可尝试参考。 “->”(减号、右尖括号) 用于类中,访问类里的函数或对象,比如:...2016-11-25
- foreach()有两种用法 1: foreach(array as $value) { 表达式; } 这里的array是你要遍历的数组名,每次循环中,array数组的当前元素的值被赋给$value,...2016-11-25
- 这篇文章主要给大家介绍了关于ES6学习教程之Promise用法的相关资料,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧...2020-11-23
- __FILE__在php是表示当前文件绝对路径哦,下面我们来看看简单的FILE的实例吧。 《?php echo __FILE__; ?> E:phpinfo.php 那么我们会看到很多cms中会这样写 dirname...2016-11-25
- sort() 方法用于对数组的元素进行排序。接下来通过本文给大家介绍Sort()函数的多种用法,对sort函数的用法相关知识感兴趣的朋友一起学习...2016-03-22
- 这篇文章主要介绍了C#分屏控件用法实例,需要的朋友可以参考下...2020-06-25
- 这篇文章主要介绍了Python Parser的用法,文中有非常详细的代码示例,对正在学习python的小伙伴们有很好地帮助,需要的朋友可以参考下...2021-05-12
- C++中的return语句是函数中一个重要的语句,return语句用于结束当前正在执行的函数,并将控制权返回给调用此函数的函数,需要的朋友可以了解下...2020-04-25