文章详情

短信预约-IT技能 免费直播动态提醒

请输入下面的图形验证码

提交验证

短信预约提醒成功

gojs的高级用法有哪些

2023-06-22 07:44

关注

本篇内容主要讲解“gojs的高级用法有哪些”,感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷,实用性强。下面就让小编来带大家学习“gojs的高级用法有哪些”吧!

1. 取消更新动画

问题:更新数据的时候,会触发渲染,有渲染动画,用户体验不好。

方案:初始数据绘制,有动画;更新数据绘制,无动画。

代码实现:

// 后面所用到的 diagram 都是 gojs 创建的实例// diagram_container 为图容器dom iddiagram = $(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. 给图元素加动画

代码实现:

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的高级用法有哪些”有了更深的了解,不妨来实际操作一番吧!这里是编程网网站,更多相关内容可以进入相关频道进行查询,关注我们,继续学习!

阅读原文内容投诉

免责声明:

① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的,并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据,供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。

② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

软考中级精品资料免费领

  • 历年真题答案解析
  • 备考技巧名师总结
  • 高频考点精准押题
  • 2024年上半年信息系统项目管理师第二批次真题及答案解析(完整版)

    难度     813人已做
    查看
  • 【考后总结】2024年5月26日信息系统项目管理师第2批次考情分析

    难度     354人已做
    查看
  • 【考后总结】2024年5月25日信息系统项目管理师第1批次考情分析

    难度     318人已做
    查看
  • 2024年上半年软考高项第一、二批次真题考点汇总(完整版)

    难度     435人已做
    查看
  • 2024年上半年系统架构设计师考试综合知识真题

    难度     224人已做
    查看

相关文章

发现更多好内容

猜你喜欢

AI推送时光机
位置:首页-资讯-后端开发
咦!没有更多了?去看看其它编程学习网 内容吧
首页课程
资料下载
问答资讯