【GoJS使用】GoJS在vue中的入门使用教程】

最新推荐文章于 2025-06-03 10:23:47 发布

原创

最新推荐文章于 2025-06-03 10:23:47 发布 · 2.8k 阅读

9 ·

CC 4.0 BY-SA版权

文章标签：

#自增与自减的区别 #字面量与变量的区别 #HTML DOM 事件

文章目录

前言
安装和引入Go.js
画板初始化
画板配置
节点有关
监听API
其他API
- 外联HTML
- 找到设定名称的面板
节点API
连线API
- 连接线的生成事件
注意事项

前言

此使用教程的内容只是个人制作产品时，根据需要实现功能进行文档记录，需要完整的使用文档需要自行去官方文档查看。

注意：本文档适用于开发类似思维导图的功能，需要其他样式可以查看官方文档的例子。

安装和引入Go.js

先安装

npm I gojs –save

然后组件按需引入或全局main.js引入，看自己需求。

使用时要在html中用个dom容器来渲染图像

<div id="chart-wrap">
      <div id="chart-diagram"></div>
</div>

JS导入

// 在export之前
import go from 'gojs'
const MAKE = go.GraphObject.make; // 声明个全局的常量MAKE，用来“创造”所需图像配置   声明一个比较简约的模板

画板初始化

Vue中建议把初始化过程写在一个方法里，初始化内容为

init() {
   
   
    var mySelf = this // 声明个Vue的指向

    mySelf.myDiagram = MAKE(go.Diagram, 'chart-diagram', {
   
    // 创建画板并挂在Vue上（注意dom的id名称要对应）

        //这里写画板配置

    })
}

画板配置

基础配置

initialContentAlignment: go.Spot.Center, // 居中显示
isReadOnly: true, // 只读，无法编辑操作
allowMove: true, // 允许拖动画板
allowDragOut:true, // 允许拖拽节点
allowDelete: true, // 允许删除节点
allowCopy: true, // 允许复制节点
allowClipboard: true, // 允许粘贴节点
scale: 1.0, // 初始视图大小比例
minScale: 0.5, // 最小视图的缩小比例
maxScale: 1.5, // 最大视图的放大比例
scrollMargin: 500, // 默认下拖拽画布的时候边界是已最外的节点为边距，这个就是增加边距的，类似padding设置
fixedBounds: , //设置图表边界
    
'undoManager.isEnabled': true, // 支持 Ctrl-Z 和 Ctrl-Y 操作 （撤回和复原）
'toolManager.hoverDelay': 100, // tooltip提示显示延时
'toolManager.toolTipDuration': 10000, // tooltip持续显示时间
'grid.visible': true, // 显示网格
'toolManager.mouseWheelBehavior': go.ToolManager.WheelZoom, // 有鼠标滚轮事件放大和缩小，而不是向上和向下滚动
'clickCreatingTool.archetypeNodeData': {
   
    category: 'Normal', text: '新节点', notice: ''}, // 双击新建节点(可以写入节点的默认信息)；

树结构配置

mySelf.myDiagram.layout = MAKE(go.TreeLayout, {
   
    // 树结构
   angle: 0, //树结构的方向
   layerSpacing: 35, //节点之间的距离
   isOngoing: false, // 是否开启自动布局
   isTreeExpanded:false // 是否展开子节点
})

连接线的配置

mySelf.myDiagram.linkTemplate =
    MAKE(go.Link,
         {
   
    
            routing: go.Link.Orthogonal, // 线会自动90度转弯（AvoidsNodes自动绕开节点）
            curve: go.Link.JumpGap, // 线与线相交会自动不重叠（还有go.Link.Bezier贝塞尔曲线）
            corner: 3 // 拐角弧度
            toEndSegmentLength: 30, //目的点线的固定距离（如果设置了自动拐角就是最短距离）
            fromEndSegmentLength: 30, //出发点线的固定距离（如果设置了自动拐角就是最短距离）
            fromShortLength, //设置线的出发点到端口的距离
            toShortLength, //设置线的结束点到端口的距离
            zOrder: -111, //图像层级
            selectable: false, //连接线是否可选
            fromSpot: go.Spot.LeftRightSides, //连线出发点强制为（new go.Spot(0.5, 0.5, 0, -25)为自定义）
            toSpot: go.Spot.LeftRightSides, //连线目的点强制为
            reshapable: true, 
            resegmentable: true,
            relinkableFrom: true,  //出发点是否可以改变
            relinkableTo: true,  //目标点是否可改变 
            adjusting: go.Link.Stretch，
            fromMaxLinks: 1,  //限制一个连接点的连接次数
            toMaxLinks: 1,  //限制一个连接点的连接次数
		},
         
         // 如果link数据有fromSpot，toSpot属性则可绑定
         new go.Binding("fromSpot", "fromSpot", go.Spot.parse),
         new go.Binding("toSpot", "toSpot", go.Spot.parse),
      
         MAKE(go.Shape, {
   
   
          strokeWidth: