gojs一些实用的高级用法
更新时间：2022年01月01日 13:01:59 作者：ESnail
gojs是一个非常强大的可视化关系的js库。本文介绍的是在使用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一些实用的高级用法，希望对大家有所帮助。在此也非常感谢大家对脚本之家网站的支持！
相关文章
lock 关键字是用于在多线程编程中实现同步和互斥访问的关键字，它的作用是确保共享资源在任意时刻只能被一个线程访问，从而避免出现竞态条件（race condition）和数据不一致的问题，这篇文章主要介绍了string类型可以作为lock的锁对象吗,需要的朋友可以参考下2023-06-06
本文主要详述ASP.NET中页面之间传递参数的方法,共介绍了三种方法,有需要的朋友可以来了解一下。2016-10-10
Entity Framework使用Code First模式管理存储过程
本文详细讲解了Entity Framework使用Code First模式管理存储过程的方法，文中通过示例代码介绍的非常详细。对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下2022-03-03
这里给大家推荐的是一段网友分享的，使用.net实现listBox左右移动的代码，简单实用，这里记录下来，有需要的小伙伴参考下吧。2015-03-03
本篇文章主要介绍了ASP.NET 页面之间传值的几种方式，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-01-01
这篇文章主要为大家详细介绍了ASP.net实现简易聊天室功能，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2022-02-02
这篇文章介绍了.Net Core静态文件资源的使用方法，文中通过示例代码介绍的非常详细。对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下2022-07-07
这篇文章主要介绍了Json日期格式问题的四种解决方法,非常不错，具有参考借鉴价值，需要的朋友可以参考下2017-03-03
这篇文章主要为大家详细介绍了MVC4制作网站教程，前台栏目浏览功能实现代码，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2016-08-08
ASP.NET获取MS SQL Server安装实例实现思路及代码
在演示中，是把找到的实例显示于DropDownList控件中。首先在.aspx拉一个DropDownList控件,感兴趣的朋友可以了解下哦，或许对你有所帮助2013-01-01
最新评论