摘要：
转载自：https://www.cnblogs.com/sexintercourse/p/12456291.html步骤1：导入package.json以导入gojs依赖包--“gojs”：“^2.0.3”，（npminstallgojs--save）步骤2：运行以下代码
转载自：https://www.cnblogs.com/sexintercourse/p/12456291.html
第一步：引入package.json引入gojs依赖包-- "gojs": "^2.0.3", (npm install gojs --save)
第二步：运行下述代码
<template>
<div id="wrap">
<div id="chart-wrap">
<div id="chart-palette"></div>
<div id="chart-diagram"></div>
</div>
<button @click="onSubmit"></button>
</div>
</div>
</template>
<script>
import go from 'gojs'
const MAKE = go.GraphObject.make;
export default {
data() {
return {}
},
mounted() {
var mySelf = this;
mySelf.myDiagram = MAKE(go.Diagram, "chart-diagram", {
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,
"toolManager.mouseWheelBehavior": go.ToolManager.WheelZoom, //有鼠标滚轮事件放大和缩小，而不是向上和向下滚动
layout: MAKE(go.TreeLayout, {
angle: 0,
layerSpacing: 35
})
}); //构建gojs对象
console.log(mySelf.myDiagram);
mySelf.myDiagram.addDiagramListener("ObjectSingleClicked", function(e) {
debugger
console.log(e.subject.part);
});
mySelf.myDiagram.addDiagramListener("BackgroundSingleClicked", function(e) {
debugger
console.log("Double-clicked at" + e.diagram.lastInput.documentPoint);
});
mySelf.myDiagram.addDiagramListener("ClipboardPasted", function(e) {
debugger
console.log("Pasted" + e.diagram.selection.count + "parts");
});
mySelf.myDiagram.linkTemplate = MAKE(go.Link, {
curve: go.Link.Bezier
}, // 贝塞尔曲线
{
routing: go.Link.Orthogonal,
corner: 15
},
MAKE(go.Shape, {
strokeWidth: 2,
stroke: "#F60"
}),
MAKE(go.Shape, {
toArrow: "Standard",
fill: "red",
stroke: "blue"
}), //箭头
MAKE(go.TextBlock, {
margin: 20,
stroke: "blue",
font: "14px sans-serif",
50,
wrap: go.TextBlock.WrapDesiredSize
},
new go.Binding("text", "linktext")), {
toolTip: MAKE(go.Adornment, "Auto",
MAKE(go.Shape, {
fill: "#FFFFCC"
}),
MAKE(go.TextBlock, {
margin: 4
}, new go.Binding("text", "name1"))
) // end of Adornment
}
);
let myModel = MAKE(go.GraphLinksModel); //也可以创建link model;需要配置myModel.linkDataArray 如下
myModel.nodeDataArray = [];
myModel.linkDataArray = [];
var lightText = "whitesmoke";
mySelf.myDiagram.nodeTemplateMap.add(
"Next",
MAKE(
go.Node,
"Spot",
// nodeStyle(),
MAKE( //声明创建一个新的面板对象,自定义方式可参考mySelf.myDiagram.nodeTemplate
go.Panel, //表明需要创建一个panel面板对象
"Auto", //页面布局为自动
MAKE( //声明构建一个圆角矩形
go.Shape,
"RoundedRectangle", {
fill: "#44CCFF",
stroke: '#FFF',
strokeWidth: 1,
angle: 0
},
new go.Binding("figure", "figure") //声明并创建一个新的图形
),
MAKE( //声明一个可编辑文本域
go.TextBlock, {
font: "12pt Helvetica, Arial, sans-serif",
stroke: lightText,
125,
maxSize: new go.Size(360, NaN),
wrap: go.TextBlock.WrapFit, //文本域换行
editable: true, //是否可编辑
margin: 12,
wrap: go.TextBlock.WrapDesiredSize
},
new go.Binding("text").makeTwoWay()
)
),
// four named ports, one on each side:
makePort("T", go.Spot.Top, false, true),
makePort("L", go.Spot.Left, true, true),
makePort("R", go.Spot.Right, true, true),
makePort("B", go.Spot.Bottom, true, false)
)
);
//Node连接线
function makePort(name, spot, output, input) {
return MAKE(go.Shape, "Circle", {
fill: "transparent",
stroke: null, // this is changed to "white" in the showPorts function
desiredSize: new go.Size(10, 10),
alignment: spot,
alignmentFocus: spot, // align the port on the main Shape
portId: name, // declare this object to be a "port"
fromSpot: spot,
toSpot: spot, // declare where links may connect at this port
fromLinkable: output,
toLinkable: input, // declare whether the user may draw links to/from here
cursor: "pointer" // show a different cursor to indicate potential link point
});
};
mySelf.myDiagram.model = myModel;
mySelf.init();
},
methods: {
onSubmit() {
},
init() {
var mySelf = this;
window.myPalette = MAKE(
go.Palette,
"chart-palette", // must name or refer to the DIV HTML element
{
scrollsPageOnFocus: false,
nodeTemplateMap: mySelf.myDiagram.nodeTemplateMap, // share the templates used by myDiagram
model: new go.GraphLinksModel([
// specify the contents of the Palette
{
category: "Next",
text: "新规则"
}
])
}
);
},
}
}
</script>
<style lang="less" scoped>
#form-wrap {
padding: 20px 40px;
// background-color: white;
border: solid 1px rgb(244, 244, 244);
}
#submit {
102px;
height: 40px;
float: right;
margin: 20px 5px 16px 0;
}
#chart-wrap {
100%;
display: flex;
justify-content: space-between;
margin-bottom: 22px;
#chart-palette {
180px;
margin-right: 30px;
background-color: white;
border: solid 1px rgb(244, 244, 244);
}
#chart-diagram {
flex-grow: 1;
height: 720px;
background-color: white;
border: solid 1px rgb(244, 244, 244);
}
}
#lateEntry {
clear: both;
background-color: rgb(255, 255, 255);
border: solid 1px rgb(244, 244, 244);
>span {
display: inline-block;
height: 50px;
font-size: 16px;
line-height: 50px;
text-indent: 30px;
letter-spacing: 0.8px;
text-align: left;
color: rgb(35, 35, 35);
// border-bottom: 1px solid rgb(234, 234, 234);
}
}
</style>第三步：去水印
在哪个文件中找到破解的文件。
在node_modulesgojs eleasego.js 下进行破解
- 在文件中搜索
7eba17a4ca3b1a8346，找到类似a.$q=b.V[Za("7eba17a4ca3b1a8346")][Za("78a118b7")](b.V,yk,4,4);这样结构的代码 - 将其注释，替换成
a.$q=function(){return true;}; - 直接npm install可以在module里寻找go.js文件，需修改的代码一般在769行
------拓展：相关构建gojs流程图时的某些参数及相关配置使用方式
====================-构建gojs流程面板
import go from 'gojs'
const MAKE = go.GraphObject.make;
mySelf.myDiagram = MAKE(go.Diagram, "mygoChart", {
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: false,//允许剪切
"toolManager.mouseWheelBehavior": go.ToolManager.WheelZoom, //有鼠标滚轮事件放大和缩小，而不是向上和向下滚动
layout: MAKE(go.TreeLayout, {//创建布局,示例为树
angle: 0, //角度
layerSpacing: 35 //层间距
})
}); //构建gojs对象
====================-
mySelf.myDiagram.nodeTemplateMap.add(： //声明左侧Node工具栏Tools
"Next", // 关键参数,需要与init初始化时window.myPalette中model对象配置的category保持一致
MAKE(
go.Node, //
"Spot",
// nodeStyle(),
MAKE(//声明创建一个新的面板对象,自定义方式可参考mySelf.myDiagram.nodeTemplate
go.Panel, //表明需要创建一个panel面板对象
"Auto", //页面布局为自动
MAKE( //声明构建一个圆角矩形
go.Shape,
"RoundedRectangle", {
fill: "rgb(54, 128, 181)", //内填充颜色
stroke: null //外边框颜色
},
new go.Binding("figure", "figure") //声明并创建一个新的图形
),
MAKE( //声明一个可编辑文本域
go.TextBlock, {
font: "11pt Helvetica, Arial, sans-serif",
stroke: lightText,
margin: 8,
maxSize: new go.Size(160, NaN),
wrap: go.TextBlock.WrapFit, //文本域换行
editable: true //是否可编辑
},
new go.Binding("text").makeTwoWay()
)
),
makePort("T", go.Spot.Top, false, true),//创建Top顶端可延申链接点
makePort("L", go.Spot.Left, true, true),//创建Left左端可延申链接点
makePort("R", go.Spot.Right, true, true),//创建Righ右端可延申链接点
makePort("B", go.Spot.Bottom, true, false)//创建Buttom底端可延申链接点
)
);
====================-自定义流程图流程节点相关配置
mySelf.myDiagram.nodeTemplate : 自定义流程图节点
-> MAKE(go.Node,//声明创建的是node对象
new go.Binding("location", "loc", go.Point.parse),//创建节点并设定节点的初始位置
MAKE(go.Shape, "RoundedRectangle", {//构建节点的形状,示例为圆角矩形
fill: "#44CCFF",//模块内填充颜色
stroke: 'green',//外填充颜色(可理解为margin,也可以当成外边框颜色来理解)
strokeWidth: 2,//外边框(填充)宽度
angle: 0//模块形状的偏移量(角度)
}),
"Auto", //设置并定义节点模块内容布局走向:Vertical(垂直),Auto(自动),Horizontal(水平)
{ background: "#44CCFF" },//将Node背景底色渲染为蓝色
MAKE(go.Picture,//构建Node区域图像类内容
{ source:"../assets/img/01.png",margin: 10, 50, height: 50, background: "red" },//基本参数设置
new go.Binding("source")),//*Picture.source参数值与模型数据中的"source"字段绑定
MAKE(go.TextBlock,//构建Node区域文本类内容
"Default Text", // 初始化默认文本
// 文字周围的空隙, 大号字体, 白色笔画:
{ margin: 12, stroke: "white", font: "bold 16px sans-serif",
75,
wrap: go.TextBlock.WrapDesiredSize
},
new go.Binding("text", "name1")), // name1为linktext为nodeDataArray对象中的参数
{
mouseEnter: function(e, node, prev) {
console.log('mouseEnter');//鼠标点击事件
},
mouseLeave: function(e, node, prev) {
mySelf.detailShow = false;//鼠标移开事件
},
},
MAKE(go.Panel, "Horizontal", {//创建并设置node内模板:实现Node块内的控件布局
padding: 5
},
====================-自定义流程图连接线相关配置
mySelf.myDiagram.linkTemplate:自定义流程图连接线
-> { curve: go.Link.Bezier } ： 设置并定义连接线曲线样式,示例为贝塞尔曲线
-> MAKE(go.Shape, {
strokeWidth: 2, //连接线宽(厚)度
stroke: "#F60"//连接线笔画默认(未选中)颜色
}) : 设置并定义连接线宽度及颜色
-> MAKE(go.Shape, {
toArrow: "Standard",//箭头样式,示例为标准
fill: "#000",//箭头的填充颜色(内填充,可以理解为padding)
stroke: null//连接线笔画默认(未选中)颜色,(外填充,可以理解为margin)
}), //设置并定义箭头样式
--> MAKE(go.TextBlock, { //文本块创建器
margin: 20,//外边距,默认单位为px
stroke: "blue",//字体颜色
font: "14px sans-serif",//字体样式
50,//内容宽度
wrap: go.TextBlock.WrapDesiredSize//样式包装器
},
new go.Binding("text", "linktext")), { //创建并绑定显示的文本域信息,linktext为nodeDataArray对象中的参数
toolTip: MAKE(go.Adornment, "Auto",
MAKE(go.Shape, {
fill: "#FFFFCC",//悬浮提示框内填充颜色
}),
MAKE(go.TextBlock, {
margin: 4 // 外边距
}, new go.Binding("text", "name1")) //创建并绑定显示的文本域信息,name1为nodeDataArray对象中的参数
) ：设置并定义鼠标悬浮提示信息样式
} : 设置并定义连接线指示及指针悬浮提示内容
=================-渲染数据相关配置
--> let myModel = MAKE(go.Model);//无连接线模型渲染
let myModel = MAKE(go.GraphLinksModel);//指定连接(适用于复杂业务);需要配置myModel.linkDataArray
let myModel = MAKE(go.TreeModel); //使用Tree树图模型渲染
--> myModel.nodeDataArray = [{},{},{}] : 流程节点数据(对象数组)
--> myModel.linkDataArray = [ {from:"1",to:"2"}, {from:"1",to:"2"}……] : 流程链接指示数组,用于构建各个node节点间的数据关系，需要使用go.GraphLinksModel
--> mySelf.myDiagram.model = myModel; 需渲染数据赋值