文章目录

前言
1. Gojs的安装
2. 在vue项目中的引用
3. js导入
4. 画布初始化
- 画布基础配置
- 主画布layout配置
- 右侧画布配置
5. 连接线的配置
6. 节点的配置
7. 节点数据
- 第一种
- 第二种
- 第三种
8 保存
9 源代码
总结

前言

使用GOJS在vue项目中实现拖拉拽的图形化需求，记录了常用功能的实现，需要完整使用的可以去官方文档查看。

1. Gojs的安装

首先通过npm命令添加go.js插件

npm install gojs --save

2. 在vue项目中的引用

使用时需要在html用dom容器来挂载渲染图像，这里我通常使用div元素

<template><div id="wrap"><div id="chart-wrap"><div id="myPalette"></div><div id="myDiagramDiv"></div></div><div><button type="button" id="SaveButton" @click="save()" class="save-Botton">SAVE</button></div></div>
</template>

然后看心情在全局main.js文件或在组件中引用

3. js导入

  import go from 'gojs' //在export default前const $ = go.GraphObject.make;

4. 画布初始化

在methods方法中创建init()函数

init() {var mySelf = this;mySelf.myDiagram =$(go.Diagram, "myDiagramDiv",//为DIV.HTML元素创建一个画布{//设置画布配置});}

画布基础配置

isReadOnly: true, // 只读，无法编辑操作
allowMove: true, // 允许拖动画板
allowDragOut:true, // 允许拖拽节点
allowDelete: true, // 允许删除节点
allowCopy: true, // 允许复制节点
allowClipboard: true, // 允许粘贴节点
allowLink: true,//是否可以绘制新链接。
allowRelink: true,//是否可以重新连接现有链接
initialContentAlignment: go.Spot.Center, // 居中显示
initialAutoScale: go.Diagram.Uniform,  // 缩放以使所有内容都适合"grid.visible": true, //显示网格
"undoManager.isEnabled": true, // 支持 Ctrl-Z 和 Ctrl-Y 操作
"toolManager.hoverDelay": 100, //tooltip提示显示延时
"toolManager.toolTipDuration": 10000, //tooltip持续显示时间
"toolManager.mouseWheelBehavior": go.ToolManager.WheelZoom, //有鼠标滚轮事件放大和缩小，而不是向上和向下滚动
"clickCreatingTool.archetypeNodeData": { text: "node258", color: "white" },//允许在后台双击以创建新node258节点

主画布layout配置

本文配置的是雪花关系图，代码段同样放在init()函数中

        class DemoForceDirectedLayout extends go.ForceDirectedLayout {makeNetwork(coll) {const net = super.makeNetwork(coll);net.vertexes.each(vertex => {const node = vertex.node;if (node !== null) vertex.isFixed = node.isSelected;});return net;}}

然后在画布中配置layout，这样不会出现新节点产生时与原节点重合的情况

layout: new DemoForceDirectedLayout()

右侧画布配置

initPalette() 放在 methods中，在init()函数中用 mySelf.initPalette();即可显示。

      initPalette() {var mySelf = this;window.myPalette = $(go.Palette,"myPalette", // 必须命名或引用DIV.HTML元素{scrollsPageOnFocus: false,nodeTemplateMap: mySelf.myDiagram.nodeTemplateMap, // 共享myDiagram使用的模板model: new go.GraphLinksModel([// 指定调色板的内容{category: "node258",text: "规则"},{category: "node258",text: "计划1"},{category: "node258",text: "执行2"}])});}

5. 连接线的配置

        mySelf.myDiagram.linkTemplate = $(go.Link, {selectable: true, //连接线是否可选relinkableFrom: true,//出发点是否可以改变relinkableTo: true,//目标点是否可以改变},new go.Binding("location", "loc", go.Point.parse).makeTwoWay(go.Point.stringify),//记录loc$(go.Shape, {strokeWidth: 2,//节点连接线宽度stroke: "#F60"//颜色}),$(go.Shape, {toArrow: "Standard",fill: "red",//箭头填充色stroke: "blue"//外边框颜色})//箭头);

6. 节点的配置

   mySelf.myDiagram.nodeTemplateMap.add(//创建名为node258的节点"node258",$(go.Node,"auto",{//节点配置movable:true,//是否可拖动deletable:true,//是否可删除selectable:true, //是否可选择selectionAdorned:false, //显示选中边框// reshapable:true, // 重塑(改变shape形状边界时使用，将影响节点大小)// resizable: true, // 可调整大小的(手动调整节点大小时，节点内容显示区域时使用)},new go.Binding("location", "loc", go.Point.parse).makeTwoWay(go.Point.stringify),$(go.Panel, //表明需要创建一个panel面板对象//声明创建一个新的面板对象,自定义方式可参考mySelf.myDiagram.nodeTemplate"Auto", //页面布局为自动$(go.Shape,//声明构建一个圆形"Circle", {fill: "#44CCFF",//内填充色cursor: "pointer",//指针stroke: null,//外框颜色nullportId: "",fromLinkable: true,fromLinkableSelfNode: false,fromLinkableDuplicates: true,toLinkable: true,toLinkableSelfNode: false,toLinkableDuplicates: false,},new go.Binding("figure", "figure") //声明并创建一个新的图形),$(go.TextBlock, {//声明一个可编辑文本域font: "12pt Helvetica, Arial, sans-serif",width: 50,maxSize: new go.Size(360, NaN),wrap: go.TextBlock.WrapFit, //文本域换行editable: true, //是否可编辑margin: 12,},new go.Binding("text").makeTwoWay()),),{//  悬浮提示toolTip:$("ToolTip",$(go.TextBlock, { margin: 4 },new go.Binding("text", "text"))),}));

7. 节点数据

第一种

this.myDiagram.model.nodeDataArray = [] //节点数据 格式为[{ key: "Alpha", color: "lightblue", loc: "400 0" }]
this.myDiagram.model.linkDataArray = [] //连线数据 格式为[{ from: "Beta", to: "Alpha" }]

第二种

或者在data中

data() {return {nodeData: [],linkData: [],}
}

节点与连接线保存的数据格式

        nodeData: [{"category":"node258","text":"规则","key":-1,"loc":"-605.5896437273716 -214.50164873808765"},{"category":"node258","text":"计划1","key":-2,"loc":"-173.03724493296755 -192.24882726306356"},],linkData: [{"from":-1,"to":-2},],

mySelf.myDiagram.model.nodeDataArray = mySelf.nodeData;
mySelf.myDiagram.model.linkDataArray = mySelf.linkData;

第三种

let myModel = $(go.GraphLinksModel); //也可以创建link model;需要配置myModel.linkDataArray 如下
myModel.nodeDataArray = mySelf.nodeData;
myModel.linkDataArray = mySelf.linkData;

8 保存

监听画布是否修改

        mySelf.myDiagram.addDiagramListener("Modified", e => { //监听画布是否修改const button = document.getElementById("SaveButton");if (button) button.disabled = !mySelf.myDiagram.isModified;const idx = document.title.indexOf("*");if (mySelf.myDiagram.isModified) {if (idx < 0) document.title += "*";} else {if (idx >= 0) document.title = document.title.slice(0, idx);}});

在方法中创建save()函数

      save(){var mySelf = this;console.log(mySelf.myDiagram.model.toJson());mySelf.myDiagram.isModified = false;},

这是里是把修改后的函数打印出来了，如果想存到后端的话也是可以的。

9 源代码

<template><div id="wrap"><div id="chart-wrap"><div id="myPalette"></div><div id="myDiagramDiv"></div></div><div><button type="button" id="SaveButton" @click="save()" class="save-Botton">SAVE</button></div></div>
</template>

<script>import go from 'gojs' //在export default前const $ = go.GraphObject.make;export default {data() {return {nodeData: [{"category":"node258","text":"规则","key":-1,"loc":"-605.5896437273716 -214.50164873808765"},{"category":"node258","text":"计划1","key":-2,"loc":"-173.03724493296755 -192.24882726306356"},],linkData: [{"from":-1,"to":-2},],}},mounted() {this.init()},methods: {save(){var mySelf = this;console.log(mySelf.myDiagram.model.toJson());mySelf.myDiagram.isModified = false;},init() {class DemoForceDirectedLayout extends go.ForceDirectedLayout { //布局makeNetwork(coll) {const net = super.makeNetwork(coll);net.vertexes.each(vertex => {const node = vertex.node;if (node !== null) vertex.isFixed = node.isSelected;});return net;}}var mySelf = this;mySelf.myDiagram =$(go.Diagram, "myDiagramDiv",  // 为DIV.HTML元素创建一个画布{//设置画布配置initialContentAlignment: go.Spot.Center, // 居中显示"undoManager.isEnabled": true, // 支持 Ctrl-Z 和 Ctrl-Y 操作"toolManager.hoverDelay": 100, //tooltip提示显示延时"toolManager.toolTipDuration": 10000, //tooltip持续显示时间//isReadOnly:true,//只读"grid.visible": true, //显示网格allowMove: true, //允许拖动allowDragOut:true,allowDelete: true,allowCopy: true,allowClipboard: true, initialAutoScale: go.Diagram.Uniform,  // 缩放以使所有内容都适合"toolManager.mouseWheelBehavior": go.ToolManager.WheelZoom, //有鼠标滚轮事件放大和缩小，而不是向上和向下滚动'clickCreatingTool.archetypeNodeData': { category: 'node258', text: '新节点', notice: ''}, // 双击新建节点(可以写入节点的默认信息)；layout: new DemoForceDirectedLayout()});mySelf.myDiagram.linkTemplate = $(go.Link, {selectable: true, //连接线是否可选relinkableFrom: true,//出发点是否可以改变relinkableTo: true,//目标点是否可以改变},new go.Binding("location", "loc", go.Point.parse).makeTwoWay(go.Point.stringify),$(go.Shape, {strokeWidth: 2,//节点连接线宽度stroke: "#F60"//颜色}),$(go.Shape, {toArrow: "Standard",fill: "red",//箭头填充色stroke: "blue"//外边框颜色})//箭头);mySelf.myDiagram.nodeTemplateMap.add(//创建名为node258的节点"node258",$(go.Node,"auto",{movable:true,//是否可拖动deletable:true,//是否可删除selectable:true, //是否可选择selectionAdorned:false, //显示选中边框// reshapable:true, // 重塑(改变shape形状边界时使用，将影响节点大小)// resizable: true, // 可调整大小的(手动调整节点大小时，节点内容显示区域时使用)},new go.Binding("location", "loc", go.Point.parse).makeTwoWay(go.Point.stringify),$(go.Panel, //表明需要创建一个panel面板对象//声明创建一个新的面板对象,自定义方式可参考mySelf.myDiagram.nodeTemplate"Auto", //页面布局为自动$(go.Shape,//声明构建一个圆形"Circle", {fill: "#44CCFF",//内填充色cursor: "pointer",//指针stroke: null,//外框颜色nullportId: "",fromLinkable: true,fromLinkableSelfNode: false,fromLinkableDuplicates: true,toLinkable: true,toLinkableSelfNode: false,toLinkableDuplicates: false,},new go.Binding("figure", "figure") //声明并创建一个新的图形),$(go.TextBlock, {//声明一个可编辑文本域font: "12pt Helvetica, Arial, sans-serif",width: 50,maxSize: new go.Size(360, NaN),wrap: go.TextBlock.WrapFit, //文本域换行editable: true, //是否可编辑margin: 12,},new go.Binding("text").makeTwoWay()),),{//  悬浮提示toolTip:$("ToolTip",$(go.TextBlock, { margin: 4 },new go.Binding("text", "text"))),}));// let myModel = $(go.GraphLinksModel); //也可以创建link model;需要配置myModel.linkDataArray 如下// myModel.nodeDataArray = mySelf.nodeData;// myModel.linkDataArray = mySelf.linkData;// mySelf.myDiagram.model = myModel;mySelf.myDiagram.model.nodeDataArray = mySelf.nodeData;mySelf.myDiagram.model.linkDataArray = mySelf.linkData;mySelf.initPalette();mySelf.myDiagram.addDiagramListener("Modified", e => { //监听画布是否修改const button = document.getElementById("SaveButton");if (button) button.disabled = !mySelf.myDiagram.isModified;const idx = document.title.indexOf("*");if (mySelf.myDiagram.isModified) {if (idx < 0) document.title += "*";} else {if (idx >= 0) document.title = document.title.slice(0, idx);}});},initPalette() {var mySelf = this;window.myPalette = $(go.Palette,"myPalette", // 必须命名或引用DIV.HTML元素{scrollsPageOnFocus: false,nodeTemplateMap: mySelf.myDiagram.nodeTemplateMap, // 共享myDiagram使用的模板model: new go.GraphLinksModel([// 指定调色板的内容{category: "node258",text: "规则"},{category: "node258",text: "计划1"},{category: "node258",text: "执行2"}])});},}}
</script>

<style lang="less" scoped>#form-wrap {padding: 20px 40px;border: solid 1px rgb(244, 244, 244);}#submit {width: 102px;height: 40px;float: right;margin: 20px 5px 16px 0;}#chart-wrap {width: 100%;display: flex;justify-content: space-between;margin-bottom: 22px;#myPalette {width: 180px;margin-right: 30px;background-color: white;border: solid 1px rgb(244, 244, 244);}#myDiagramDiv {flex-grow: 1;height: 720px;background-color: white;border: solid 1px rgb(244, 244, 244);}}#SaveButton{position: relative;height: 60px;width: 100px;top: -60px;margin-left: 800px;background: #82ff90;}</style>

总结

至此，就能在vue项目中使用Gojs实现简单的双画布托拉拽雪花图需求。

在Vue项目中使用Gojs相关推荐

canvas java 上传截图_在Vue项目中使用html2canvas生成页面截图并上传
使用方法项目中引入 npm install html2canvas html代码 //html代码 js代码 // 引入html2canvas import html2canvas from 'ht ...
如何在Vue项目中使用vw实现移动端适配(转)
有关于移动端的适配布局一直以来都是众说纷纭,对应的解决方案也是有很多种.在<使用Flexible实现手淘H5页面的终端适配>提出了Flexible的布局方案,随着viewport单位越来越 ...
实战：vue项目中导入swiper插件
版本选择 swiper是个常用的插件,现在已经迭代到了第四代:swiper4. 常用的版本是swiper3和swiper4,我选择的是swiper3. 安装安装swiper3的最新版本3.4.2: ...
vue ajax highcharts,在vue项目中引入highcharts图表的方法(详解)
npm进行highchars的导入,导入完成后就可以进行highchars的可视化组件开发了 npm install highcharts --save 1.components目录下新建一个char ...
VUE项目中使用this.$forceUpdate()；解决页面v-for中修改item属性值后页面v-if不改变的问题
VUE项目中使用this.$forceUpdate();解决页面v-for中修改item属性值后页面v-if不改变的问题参考文章: (1)VUE项目中使用this.$forceUpdate();解决 ...
在vue项目中：统一封装 Axios 接口与异常处理
在vue项目中:统一封装 Axios 接口与异常处理参考文章: (1)在vue项目中:统一封装 Axios 接口与异常处理 (2)https://www.cnblogs.com/itgezhu/p/ ...
vue php跨域,Vue 项目中遇到的跨域问题及解决方法(后台php)
问题描述前端 vue 框架,后台 php,百度跨域问题后台加这段代码 header("Access-Control-Allow-Origin: *"); 加了之后报这个错: Th ...
Typescript在Vue项目中的使用
最近尝试了一下Typescript在Vue项目中的使用,中间遇到了一些问题,把遇到的问题记录一下,以防被忘. 如何让Typescript识别Vue.JSON文件因为Typescript默认不能识别. ...
vue项目中使用echarts实现词云
0.先上效果图 1.安装插件 -- vue项目中 npm install echartsnpm install echarts-wordcloud 2.vue页面中引入组件 <word-clou ...

在Vue项目中使用Gojs