动态流程图-joint.js
动态流程图-joint.js
前几天有个需求，继续JSON数据动态构造流程图，网上找了很久，最后决定用Joint.js来完成这一功能。
参考博文：https://www.cnblogs.com/qiuyagogo/p/9999701.html。
Joint 官网:https://www.jointjs.com/
1、预期目标
2、需要文件。
1、jquery.min.js
2、Joint.css
3、Loadsh.js
4、Backone.js"
5、Joint.js
注：JS文件顺序一定不要乱发，否则会报错。 提供下载链接
3、代码。
rows='[{ "pointX":"800","pointY":"100","name":"开始","type":"ellipse","id":"a1fd53fc-7286-4dd6-a99b-aa3aaf8a2c5d","parent":"1"},{"name":"第一步","type":"Rect","id":"744104ee-b3fc-4d81-8e82-32ae699d1d39","parent":"a1fd53fc-7286-4dd6-a99b-aa3aaf8a2c5d","pointX":"800","pointY":"200"},{"name":"第二步（1）","type":"Rect","id":"91bf7248-8c86-443c-a40d-7ff9e9b0fabb","parent":"744104ee-b3fc-4d81-8e82-32ae699d1d39","pointX":"700","pointY":"300"},{"name":"第二步（2）","type":"Rect","id":"91bf7248-8c86-443c-a40d-7ff9e9b0faba","parent":"744104ee-b3fc-4d81-8e82-32ae699d1d39","pointX":"900","pointY":"300"},{"name":"第三步","type":"Rect","id":"32c4123a-a378-4534-8afe-141d8b71e99a","parent":"91bf7248-8c86-443c-a40d-7ff9e9b0fabb,91bf7248-8c86-443c-a40d-7ff9e9b0faba","pointX":"800","pointY":"400"},{"pointX":"800","pointY":"500","name":"结束","type":"ellipse","id":"cd7fcafa-1f6b-47c9-94cf-626a55147a94","parent":"32c4123a-a378-4534-8afe-141d8b71e99a"}]';
var graph = new joint.dia.Graph();
//去掉属性
var ElementView = joint.dia.ElementView.extend({
pointerdown: function () {
this._click = false;
},
pointermove: function(evt, x, y) {
this._click = false;
},
pointerup: function (evt, x, y) {
this._click = false;
},
pointerclick : function (evt, x, y) {
this._click = false;
},mouseover: function (evt) {
this._click = false;
}, mouseout: function(evt) {
this._click = false;
}
});
var LinkView = joint.dia.LinkView.extend({
pointerdown: function () {
this._click = false;
},
pointermove: function(evt, x, y) {
this._click = false;
},
pointerup: function (evt, x, y) {
this._click = false;
},
pointerclick : function (evt, x, y) {
this._click = false;
},mouseover: function (evt) {
this._click = false;
}, mouseout: function(evt) {
this._click = false;
}
});
//容器
var paper = new joint.dia.Paper({
el: $('#myholder'),
width: $(window).width(),
height: $(window).height()-100,
gridSize: 1,
model: graph,
elementView: ElementView,
linkView:LinkView,
perpendicularLinks: true,
restrictTranslate: true
});
//构造图形
var member = function (x, y, text, shape) {
var cell;
if (shape == "Rect") {
cell = new joint.shapes.basic.Rect({
position: { x: x, y: y },
size: {
width: 100,
height: 40
},
attrs: {
//边框，填充，边框宽度，样式
rect: {
'stroke': 'black',
'stroke-dasharray': 0
},
text: {
//字体内容，颜色，粗细，大小
text: text,
fill: 'black',
'font-weight': 'normal',
'font-size': 20
}
}
});
} else if (shape == "ellipse") {
cell = new joint.shapes.basic.Rect({
position: { x: x, y: y },
size: {
width: 100,
height: 40
},
type: 'linearGradient',
attrs: {
//边框，填充，边框宽度，样式
rect: {
'stroke': 'black',
'stroke-dasharray': 0,
rx:'20px',//边框椭圆
ry:'20px'
},
text: {
//字体内容，颜色，粗细，大小
text: text,
fill: 'black',
'font-weight': 'normal',
'font-size': 20
}
}
})
}
graph.addCell(cell);
return cell;
}
//构造连线
function link(source, target) {
var cell = new joint.shapes.org.Arrow({
source: { id: source.id },
target: { id: target.id },
labels: [{ position: 0.5}],
router:{ name: 'orthogonal' },//折线类型
//vertices: share,
attrs: {
'.connection': {
'fill': 'none',
'stroke-linejoin': 'round',
'stroke-width': '2',
'stroke': '#4b4a67'
},
'.marker-target': {
fill: '#333333', //箭头颜色
d: 'M 10 0 L 0 5 L 10 10 z'//箭头样式
}
},
});
graph.addCell(cell);
return cell;
}
rows=JSON.parse(rows);
//存放图形
var map={};
for(var i=0;i<rows.length;i++){
var meber=member(rows[i].pointX,rows[i].pointY,rows[i].name,rows[i].type);
map[rows[i].id]=meber;
if(rows[i].parent=="1"){}else
{
var parent = rows[i].parent.split(",");
for(var j=0;j<parent.length;j++){
//构造线
link(map[parent[j]],map[rows[i].id]);
}
}
}
画布 <div id="myholder"></div>
5、完成图形。
资源地址；https://download.csdn.net/download/qq_33208533/10884981