记录--VUE使用GOJS（操作数据、消除水印、导出图片等）

因为GOJS属于不能免费商用的插件，后改用antv X6来实现流程图效果，使用方法可查看我另一篇记录

GOJS官网

首先引入GOJSnpm install gojs --save
文件中引入import go from "gojs";

关于去除左上角水印网上找的方法基本查找那串数字但是我的版本为"gojs": "^2.1.48"，找遍了没有找到，最后发现一篇文章中的方法完美实现去除水印；

方法是在node_modules\gojs\release\go.js文件中找到String.fromCharCode(a.charCodeAt(g)^b[(b[c]+b[d])%256])这串代码，然后在代码后面return f前面加上if(f.indexOf('GoJS 2.1 evaluation')>-1|| f.indexOf('(c) 1998-2021 Northwoods Software')>-1|| f.indexOf('Not for distribution or production use')>-1|| f.indexOf('gojs.net')>-1){return '';}else{return f};后完美去除水印；

导出图片：

// img生成的是base64
let img = this.myDiagram.makeImageData({scale: 1 // 图片比例：为1生成整个图像并截取周围空白
});
// 下载if (window.navigator.msSaveOrOpenBlob) {var bstr = atob(img.split(",")[1]);var n = bstr.length;var u8arr = new Uint8Array(n);while (n--) {u8arr[n] = bstr.charCodeAt(n);}var blob = new Blob([u8arr]);window.navigator.msSaveOrOpenBlob(blob, "图片.png");} else {// 这里就按照chrome等新版浏览器来处理const a = document.createElement("a");a.href = img;a.setAttribute("download", "chart-download");a.click();}

下面是绘制图形（我使用的是state Chart状态图）

数据的增删改查可以参考此篇文章gojs入门笔记

初始化设置以及我所用到的一些方法：

const make = go.GraphObject.make; // 创建原型
let model = { "class": "go.GraphLinksModel","nodeKeyProperty": "id","nodeDataArray": [ // 节点数据{"id":-1, "loc":"155 -138", "category":"开始"},{"id":0, "loc":"190 15", "text":"Shopping"},{"id":1, "loc":"353 32", "text":"Browse Items"},{"id":2, "loc":"353 166", "text":"Search Items"},{"id":3, "loc":"512 12", "text":"View Item"},{"id":4, "loc":"661 17", "text":"View Cart"},{"id":5, "loc":"644 171", "text":"Update Cart"},{"id":6, "loc":"800 96", "text":"Checkout"},{"id":-2, "loc":"757 229", "category":"结束"}],"linkDataArray": [ // 连线数据{ "from": -1, "to": 0, "text": "Visit online store" },{ "from": 0, "to": 1,  "progress": "true", "text": "Browse" },{ "from": 0, "to": 2,  "progress": "true", "text": "Use search bar" },{ "from": 1, "to": 2,  "progress": "true", "text": "Use search bar" },{ "from": 2, "to": 3,  "progress": "true", "text": "Click item" },{ "from": 2, "to": 2,  "text": "Another search", "curviness": 20 },{ "from": 1, "to": 3,  "progress": "true", "text": "Click item" },{ "from": 3, "to": 0,  "text": "Not interested", "curviness": -100 },{ "from": 3, "to": 4,  "progress": "true", "text": "Add to cart" },{ "from": 4, "to": 0,  "text": "More shopping", "curviness": -150 },{ "from": 4, "to": 5,  "text": "Update needed", "curviness": -50 },{ "from": 5, "to": 4,  "text": "Update made" },{ "from": 4, "to": 6,  "progress": "true", "text": "Proceed" },{ "from": 6, "to": 5,  "text": "Update needed" },{ "from": 6, "to": -2, "progress": "true", "text": "Purchase made" }]
}
let myDiagram = make(go.Diagram, "绑定画布的ID", {"toolManager.mouseWheelBehavior": go.ToolManager.WheelZoom, // 有鼠标滚轮事件放大和缩小，而不是向上和向下滚动"undoManager.isEnabled": false, // 支持 Ctrl-Z 和 Ctrl-Y 操作 （撤回和复原）scale: 1.0, // 初始视图大小比例minScale: 0.5, // 最小视图的缩小比例maxScale: 2, // 最大视图的放大比例initialContentAlignment: go.Spot.Center, // 居中显示LinkDrawn: showLinkLabel, // 创建新连接ExternalObjectsDropped: nodeChange, // Diagram外部拖拽复制到Diagram中SelectionDeleted: deleteNodeList,"commandHandler.canDeleteSelection": deleteVerification // 判断是否是可删除项//   isReadOnly: false, // 只读，无法编辑操作//   allowMove: true, // 允许拖动画板//   allowDragOut: true, // 允许拖拽节点//   allowDelete: true, // 允许删除节点//   allowCopy: false, // 允许复制节点//   allowClipboard: false, // 允许粘贴节点//   scrollMargin: 500, // 默认下拖拽画布的时候边界是已最外的节点为边距，这个就是增加边距的，类似padding设置// fixedBounds: , //设置图表边界//   "toolManager.hoverDelay": 100, // tooltip提示显示延时//   "toolManager.toolTipDuration": 10000, // tooltip持续显示时间//   "grid.visible": true, // 显示网格
})
// 节点配置this.myDiagram.nodeTemplate = make(go.Node,"Auto", // 文字位置{locationSpot: go.Spot.Top,isShadowed: true,shadowBlur: 10,shadowOffset: new go.Point(0, 1),shadowColor: "rgba(0, 0, 0, .14)"},// 设置节点位置new go.Binding("location", "loc", go.Point.parse).makeTwoWay(go.Point.stringify),// 外部样式make(go.Shape, "RoundedRectangle", {name: "SHAPE",fill: "#ffffff",strokeWidth: 0, // 描边宽度stroke: null,portId: "",fromLinkable: true,fromLinkableSelfNode: true,fromLinkableDuplicates: true,toLinkable: true,toLinkableSelfNode: true,toLinkableDuplicates: true,cursor: "pointer"}),// 字体样式make(go.TextBlock,{font: "bold small-caps 11pt helvetica, bold arial, sans-serif",margin: 7,// width: 150,// textAlign: "center",stroke: "#000000",editable: false // 是否可编辑},new go.Binding("text").makeTwoWay()));// 设置开始节点样式this.myDiagram.nodeTemplateMap.add("开始",make(go.Node,"Spot",{desiredSize: new go.Size(75, 75)},new go.Binding("location", "loc", go.Point.parse).makeTwoWay(go.Point.stringify),make(go.Shape, "Circle", {fill: "#52ce60",/* green */stroke: null,portId: "",fromLinkable: true,fromLinkableSelfNode: true,fromLinkableDuplicates: true,toLinkable: true,toLinkableSelfNode: true,toLinkableDuplicates: true,cursor: "pointer"}),make(go.TextBlock, "开始", {font: "bold 16pt helvetica, bold arial, sans-serif",stroke: "whitesmoke"})));// 设置结束节点样式this.myDiagram.nodeTemplateMap.add("结束",make(go.Node,"Spot",{desiredSize: new go.Size(75, 75)},new go.Binding("location", "loc", go.Point.parse).makeTwoWay(go.Point.stringify),make(go.Shape, "Circle", {fill: "maroon",stroke: null,portId: "",fromLinkable: true,fromLinkableSelfNode: true,fromLinkableDuplicates: true,toLinkable: true,toLinkableSelfNode: true,toLinkableDuplicates: true,cursor: "pointer"}),make(go.Shape, "Circle", {fill: null,desiredSize: new go.Size(65, 65),strokeWidth: 2,stroke: "whitesmoke"}),make(go.TextBlock, "结束", {font: "bold 16pt helvetica, bold arial, sans-serif",stroke: "whitesmoke"})));// 连接线配置this.myDiagram.linkTemplate = make(go.Link,{curve: go.Link.Bezier,adjusting: go.Link.Stretch,reshapable: true,relinkableFrom: true,relinkableTo: true,toShortLength: 3,selectable: true// routing: go.Link.AvoidsNodes // 绕行节点},// 线样式make(go.Shape,{strokeWidth: 1.5},new go.Binding("stroke", "progress", function(progress) {return progress == "true" ? "#52ce60" : "maroon";}),new go.Binding("strokeWidth", "progress", function(progress) {return progress == "true" ? 2.5 : 1.5;})),// 箭头样式make(go.Shape,{toArrow: "standard",stroke: null},new go.Binding("fill", "progress", function(progress) {return progress == "true" ? "#52ce60" : "maroon";})),// 显示配置make(go.Panel,"Auto",make(go.TextBlock,{textAlign: "center",font: "12pt helvetica, arial, sans-serif",margin: 7,editable: false // 是否可编辑},new go.Binding("text").makeTwoWay())));
this.myDiagram.model = go.Model.fromJson(data);
function showLinkLabel(e){console.log(e.subject.data)
}// 监听新增连线
function nodeChange(e){e.subject.each(function(p) {console.log(p.data)}
}// 监听新增节点
function deleteNodeList(e){e.subject.each(function(p) {console.log(p.data)}
}// 监听删除节点
function deleteVerification(e){return myDiagram.selection.all(nodeOrLink => {if (nodeOrLink.data.text == "开始" ||nodeOrLink.data.text == "结束") {return false;} else {return true;}});
}// 判断是否可以删除

记录--VUE使用GOJS（操作数据、消除水印、导出图片等）相关推荐

vue截取页面一部分内容并导出图片
安装插件 npm install html2canvas --save 引入当前需要的vue文件 import html2canvas from "html2canvas"; 全部 ...
originPro2021（4）origin导出图片且去除demo水印
目录导出图片到word中且可编辑去除水印导出图片到word中且可编辑右键复制页面或者ctrl+J 页面空白处ctrl+C加ctrl+V 粘贴到word中,出现虚线去除水印 1.找到Origi ...
2.1 版本gojs 消除水印各种版本gojs 同理
2.1 版本gojs 消除水印 a.Vr=b.Y[Ra("7eba17a4ca3b1a8346")]Ra("78a118b7"); 等修改为 a.Vr=func ...
vue上传图片加水印；js上传图片添加水印；vue给图片添加水印；canvas图片添加水印；canvas画布导出图片
uni-app微信小程序图片加水印,点击看这篇需求场景: 要求上传图片,并给图片添加水印.传给后端的也是有水印的图片. 逻辑步骤: 通过input上传图片,拿到图片的信息和base64,将图片绘制到 ...
TeeChart WPF DLL消除水印
TeeChart WPF DLL消除水印准备工作 Steema TeeChart for .NET 2017 Evaluation 4.1.2017.03147 DNSPY(X86) 一些代码: T ...
origin2021导出图片时有水印解决
项目场景: origin2021导出图片时有水印,过一段时间就出现一次这种情况. 解决方案: 提示:假设你下载的安装包解压后有crack文件夹,crack文件夹的东西也没有删除: 如上:打开Crack ...
三维荧光平行因子学习记录--（四）平行因子组件导出--（一）
三维荧光平行因子学习记录–(四)平行因子组件导出–(一) 注:本文仅作为自己的学习记录以备以后复习查阅本文参考博客链接: https://zhuanlan.zhihu.com/p/377996430 ...
咖啡汪日志——JAVA导出pdf文件加水印文字+图片、文字
咖啡汪日志--JAVA导出pdf文件加水印文字和图片.文字 hello,又大家见面了! 作为一只不是在戏精就是在戏精路上的哈士奇,今天要展示给大家的就是如何快捷地给pdf文件增加各种水印.嗷呜呜,前 ...
origin导出图片有水印
导出图片去除水印方法: 1.进入安装目录,打开"C:\Program Files\OriginLab\Origin2017"目录. 2.将破解文件夹中的"Origin.e ...

记录--VUE使用GOJS（操作数据、消除水印、导出图片等）

记录--VUE使用GOJS（操作数据、消除水印、导出图片等）相关推荐

最新文章

热门文章