我的编程空间,编程开发者的网络收藏夹
学习永远不晚

gojs一些实用的高级用法

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

北京

  • 北京
  • 上海
  • 天津
  • 重庆
  • 河北
  • 山东
  • 辽宁
  • 黑龙江
  • 吉林
  • 甘肃
  • 青海
  • 河南
  • 江苏
  • 湖北
  • 湖南
  • 江西
  • 浙江
  • 广东
  • 云南
  • 福建
  • 海南
  • 山西
  • 四川
  • 陕西
  • 贵州
  • 安徽
  • 广西
  • 内蒙
  • 西藏
  • 新疆
  • 宁夏
  • 兵团
手机号立即预约

请填写图片验证码后获取短信验证码

看不清楚,换张图片

免费获取短信验证码

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一些实用的高级用法,希望对大家有所帮助。在此也非常感谢大家对编程网网站的支持!

免责声明:

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

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

gojs一些实用的高级用法

下载Word文档到电脑,方便收藏和打印~

下载Word文档

猜你喜欢

gojs的高级用法有哪些

本篇内容主要讲解“gojs的高级用法有哪些”,感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷,实用性强。下面就让小编来带大家学习“gojs的高级用法有哪些”吧!1. 取消更新动画问题:更新数据的时候,会触发渲染,有渲染动画,用户体验不好
2023-06-22

python的一些高级语法

1.python 可迭代对象的写法a.循环版-迭代器通过实现类的属性方法实现class Fab(object):     def __init__(self, max):         self.max = max         sel
2023-01-31

Python的高级用法有哪些

本篇内容主要讲解“Python的高级用法有哪些”,感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷,实用性强。下面就让小编来带大家学习“Python的高级用法有哪些”吧!Lambda 函数Lambda 函数是一种比较小的匿名函数&mdas
2023-06-16

聊一聊 QMessageBox 的高级用法

设置消息框的窗口模式,确定其在应用程序中的行为。窗口模式控制了消息框对其他窗口的交互影响。

Flutter之Navigator的高级用法有哪些

本篇内容介绍了“Flutter之Navigator的高级用法有哪些”的有关知识,在实际案例的操作过程中,不少人都会遇到这样的困境,接下来就让小编带领大家学习一下如何处理这些情况吧!希望大家仔细阅读,能够学有所成!named routes虽然
2023-07-05

有哪些C语言的高级用法

本篇内容主要讲解“有哪些C语言的高级用法”,感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷,实用性强。下面就让小编来带大家学习“有哪些C语言的高级用法”吧!整形溢出和提升大部分 C 程序员都以为基本的整形操作都是安全的其实不然,看下面这
2023-06-16

MySQL一些常用高级SQL语句

MySQL高级SQL语句use kgc; create table location (Region char(20),store_name char(20)); insert into location values ('East','B
2022-05-11

在 Java 中,unshift 方法的高级使用技巧有哪些?(java中unshift方法的高级用法)

在Java编程中,unshift方法是数组对象的一个重要方法,它用于在数组的开头添加一个或多个元素,并返回新数组的长度。虽然unshift方法在日常的数组操作中较为常见,但它还有一些高级用法,可以帮助我们更灵活地处理数组数据。
在 Java 中,unshift 方法的高级使用技巧有哪些?(java中unshift方法的高级用法)
Java2024-12-15

一日一技:Python类型标注的高级用法

如果传入的参数是int类型的文章id,那么就返回这篇文章的详情ArticleDetail对象。如果传入的是文章列表,那么就返回ArticleDetail对象列表。

java枚举高级用法有哪些

Java枚举的高级用法包括:1. 枚举的自定义方法:可以为枚举类型添加自定义方法,使其具有更多的功能。2. 枚举的构造函数和属性:可以给枚举类型添加构造函数和属性,使其具有更多的属性和行为。3. 枚举的静态方法和实例方法:可以为枚举类型添加
2023-08-21

Vim高级使用方法有哪些

这篇文章主要介绍了Vim高级使用方法有哪些的相关知识,内容详细易懂,操作简单快捷,具有一定借鉴价值,相信大家阅读完这篇Vim高级使用方法有哪些文章都会有所收获,下面我们一起来看看吧。你会发现,使用 Vim 非常方便的的场景几乎总是涉及到运行
2023-06-27

编程热搜

  • Python 学习之路 - Python
    一、安装Python34Windows在Python官网(https://www.python.org/downloads/)下载安装包并安装。Python的默认安装路径是:C:\Python34配置环境变量:【右键计算机】--》【属性】-
    Python 学习之路 - Python
  • chatgpt的中文全称是什么
    chatgpt的中文全称是生成型预训练变换模型。ChatGPT是什么ChatGPT是美国人工智能研究实验室OpenAI开发的一种全新聊天机器人模型,它能够通过学习和理解人类的语言来进行对话,还能根据聊天的上下文进行互动,并协助人类完成一系列
    chatgpt的中文全称是什么
  • C/C++中extern函数使用详解
  • C/C++可变参数的使用
    可变参数的使用方法远远不止以下几种,不过在C,C++中使用可变参数时要小心,在使用printf()等函数时传入的参数个数一定不能比前面的格式化字符串中的’%’符号个数少,否则会产生访问越界,运气不好的话还会导致程序崩溃
    C/C++可变参数的使用
  • css样式文件该放在哪里
  • php中数组下标必须是连续的吗
  • Python 3 教程
    Python 3 教程 Python 的 3.0 版本,常被称为 Python 3000,或简称 Py3k。相对于 Python 的早期版本,这是一个较大的升级。为了不带入过多的累赘,Python 3.0 在设计的时候没有考虑向下兼容。 Python
    Python 3 教程
  • Python pip包管理
    一、前言    在Python中, 安装第三方模块是通过 setuptools 这个工具完成的。 Python有两个封装了 setuptools的包管理工具: easy_install  和  pip , 目前官方推荐使用 pip。    
    Python pip包管理
  • ubuntu如何重新编译内核
  • 改善Java代码之慎用java动态编译

目录