介绍
本篇文章为大家展示了使用VUE和Antv G6实现在线拓扑图编辑,内容简明扼要并且容易理解,绝对能使你眼前一亮,通过这篇文章的详细介绍希望你能有所收获。
<强> 1。首先在Antv官网上找到蚂蚁Antv G6插件,引入插件。
也可以npm方式引入。
<强> 2。写组件
出口默认{
名称:“指数”,
组件:{},
安装(){
this.initG6 ();
}，
数据(){
返回{
行动:“& # 39;
名称:“& # 39;
func:“& # 39;
账户:“& # 39;
工作流程:“& # 39;
nodeType: 0,
颜色:“& # 39;
净:“& # 39;
Util:“& # 39;
workflowName:“& # 39;
激活:“& # 39;//当前激活的节点
isNode:假的,//当前是节点
isBlank:真的,//当前是空白区
检查:真的,//网格对齐
infoTitle:“画布& # 39;//属性标题
oldColor:“& # 39;//获取节点本身颜色
类型:“& # 39;//有值为编辑状态
actionList: [],
nodeTypeList:(
{id: 0,标签:“普通节点& # 39;}]
}
}，
方法:{
initG6 () {
让自我=;
自我。Util=G6.Util;
让网格;
如果(self.checked) {
网格={
forceAlign:真的,//是否支持网格对齐//单元格:25日网格大小
}；
其他}{
网格=零;
}//生成度量
,。。//工具方法
,。。
var sourcesData=https://www.yisu.com/zixun/{};//后台返回的数据
var trainScale=函数(昏暗的、规模){
var max=无穷大;
var min=无穷大;
sourcesData.source.nodes.map(函数(节点){
max=30;
min=25;
});
规模。域([最小,最大]);
}；
var颜色=[' # 007 ae7 ', ' # 40 bcd2 ', ' # 81 d6c3 ', ' # C1E4BC ', ' # FFDD9B ', ' # FEAC4C ', ' # FF7C01 ', ' # C4201D '];
,。。//生成图
http://self.net=new http://G6.Net ({
id:‘知识’,//容器id
高度:canvasHeight,//画布高
模式:“编辑”
});
G6.Global。nodeLabelStyle={
填:“# fff ',
textAlign:“离开”,
textBaseline:“底”,
字形大小:24
}；
self.net.tooltip(真正的);
self.net.node ()
.size(函数(模型){
返回sizeScale (model.weight) * 2;
}）
；
self.net.source (sourcesData.source.nodes sourcesData.source.edges);
self.net.removeBehaviour ([‘dragCanvas’,‘dragHideEdges’, ' dragHideTexts ']);
self.net.addBehaviour ([' dragBlank ']);
self.net.read (sourcesData);
self.net.render ();
self.net.zoomAt (graphCenterX, graphCenterY, 0.7);//生成布的局
var layoutNodes=sourcesData.source.nodes;
var layoutEdges=Util.clone (sourcesData.source.edges);
var赊销=function () {
self.net.updateNodesPosition ();
}；
…/* *
点击空白处/self.net.on(“点击”,(ev)=> {
如果(! self.Util.isNull (ev.item)) {
自我。isBlank=false
其他}{
自我。isBlank=true;
self.infoTitle='画布”
}
});/点击节点/self.net.on (itemclick,函数(ev) {
自我。isNode=self.Util.isNode (ev.item);//是否为节点
自我。激活=ev.item;
如果(self.isNode) {/激活节点后节点名称输入聚焦/自我。KaTeX解析错误:预计‘}’,有‘EOF输入:年底…柳枝稷(()=> {self.refs.inputFocus。美元el.querySelector(“输入”).focus ();
});
self.infoTitle='节点”;
self.name=ev.item.get .label(“模型”);
自我。func=ev.item.get .func(“模型”);
自我。账户=ev.item.get(“模型”)。账户| | [];
自我。工作流=ev.item.get .workflow(“模型”);
其他}{
self.infoTitle=摺?
自我。action=ev.item.get .action(“模型”);
}
自我。颜色=self.oldColor;
});/* *
鼠标移入移出事件改变颜色/self.net.on (itemmouseenter, ev=> {
常数项=ev.item;
自我。oldColor=item.get .color(“模型”);//获取节点颜色
self.net.update(项目,{
颜色:# 108 ee9,
});
self.net.refresh ();
});
self.net.on (itemmouseleave, ev=> {
常数项=ev.item;
self.net.update(项目,{
颜色:self.oldColor
});
self.net.refresh ();
});/*
提示信息
*/self.net.tooltip ({
标题:“信息',//@type{}字符串标题
分裂:':',//@type{字符串}分割符号
dx: 0,//@type{号码}水平偏移
dy: 0//@type{号码}竖直偏移
});
.size .tooltip self.net.edge () () (“val”,函数(val) {
返回3;
});/* *
渲染
*//self.net.source (self.nodes self.edges);///加载资源数据//self.net.render ();
}，
addCircle () {
},//添加起始节点
addRect () {
},//添加常规节点
addRhombus () {
},//添加条件节点
addLine () {
},//添加直线
addSmooth () {
},//添加曲线
addArrowSmooth () {
},//添加箭头曲线
addArrowLine () {
},//添加箭头直线
addPolyLine () {
},//添加折线
changeMode(模式){
},//拖拽与编辑模式的切换
德尔(){
this.net.del ()
},//删除
save () {/*验证流图名称*/如果这一点。workflowName !==? {
让数据=this.net.save ();
如果(data.source.nodes。长度===0){
这一点。KaTeX解析错误:将“EOF”, 61年“}”位置:…;返回false} & # 818;/*验证节点名称*/fo…消息({类型:“错误”的信息:“节点名称不能为空"});
返回假
}
}
数据。源['名称')=this.workflowName;/让json=json。stringify(数据、零2);/这一点。KaTeX解析错误:将“EOF”,有“}”立场43:…e, this.type);}& # 818;{这个。消息({类型:“错误”的信息:“拓扑名称不能为空'})
}/控制台。日志(saveData、json);/},//保存
update () {
},//更新节点
去年clearView () {
这一点。type=";
这一点。workflowName=";
this.net.changeData ()
},//清空视图
源(节点、边名称、类型){
这一点。类型=类型;
这一点。workflowName=名称;
this.net.changeData(节点、边)
},//更新数据
}，
看:{/* *
监听输入框/行动:函数(){
this.update ()
}，
名称:函数(){
this.update ()
}，
函数:函数(){
this.update ()
}，
账户:函数(){
this.update ()
}，
工作流程:函数(){
this.update ()
}，
nodeType:函数(){
this.update ()
}，
颜色:函数(){
this.update ()
}，/*
网格切换
*/检查:函数(){
让_saveData=this.net.save ();
this.net.destroy ();//销毁画布
this.initG6 ();
this.net.read (_saveData);
this.net.render ()
}
}
}使用VUE和Antv G6实现在线拓扑图编辑
