Jointjs初认识
程序员文章站
2022-03-05 11:35:23
...
最近在研究Jointjs，这个做流程图、工作表、图标真的是很强大：
1、新建画板、画布
joint.setTheme('modern'); //设置主题样式
var graph = new joint.dia.Graph(); //新建画板
var paper = new joint.dia.Paper({ //新建画布
el: $('#paper'),
width: 1200,
height: 500,
gridSize: 1,
model: graph,
perpendicularLinks: true,
restrictTranslate: true //,
//elementView: ElementView,
//linkView:LinkView
});2、修改画布大小
paper.setDimensions(width, height); 3、清除图标样式
//清除原样式
graph.clear();4、自定义画图
var member = function(x,y,width,height,z_index,dataId,pid,background,color,value,graphtype) {
debugger;
var cell = new joint.shapes.org.Member({
position: { x: x, y: y }, //图在网页中的绝对位置
size:{width:width,height:height}, //图的大小
dataId:dataId, //自定义属性
id:dataId, //自定义属性
pid:pid, //自定义属性
graphType:graphtype,
z:z_index, //图表的显示层级
attrs: { //attrs下都是设置的样式
'.card': { fill: background, stroke: color,'stroke-width': 1 ,rx:0, ry:0}, //改变图形形状
'.name': {text: '', 'font-size': 9, 'text-decoration': 'none', 'ref-x': 0.5, 'ref-y': 0.4,'x-alignment': 'middle', 'word-spacing': '-1px', 'letter-spacing': 0 },
'.name2': { fill: "green", text: '', 'ref-x': 0.75, 'ref-y': 0.5, 'font-family': 'Arial' },
'.rank': { fill: "black", text: '', 'ref-x': 0.95, 'ref-y': 0.05, 'font-family': 'Arial' ,'text-decoration': 'none','font-size': 10 },
'.name4': { fill: "green", text: '', 'ref-x': 0.75, 'ref-y': 0.5, 'font-family': 'Arial' },
'.name5': { fill: "red", text: '', 'ref-x': 0.95, 'ref-y': 0.7, 'font-family': 'Arial' },
'.name6': { fill: "green", text: '', 'ref-x': 0.75, 'ref-y': 0.5, 'font-family': 'Arial' },
'.name7': { fill: "red", text: '', 'ref-x': 0.95, 'ref-y': 0.7, 'font-family': 'Arial' },
'.name8': { fill: "green", text: '', 'ref-x': 0.75, 'ref-y': 0.5, 'font-family': 'Arial' },
'.name9': { fill: "red", text: '', 'ref-x': 0.95, 'ref-y': 0.7, 'font-family': 'Arial' },
'.name10': { fill: "green", text: '', 'ref-x': 0.75, 'ref-y': 0.5, 'font-family': 'Arial' },
'.btn.edit': { 'ref-dx': -80,'ref-y': 5, 'ref': '.card', event: 'element:edit' },
'.btn>rect': { height: 20, width: 45, rx:0, ry:0, fill: 'transparent', 'stroke-width': 1 }, //给EDIT加的边框
'.btn.edit>text': { fill: background,'font-size': 12, 'font-weight': 500, stroke: "#000", x: 50, y: 15, 'font-family': 'Sans Serif' }
}
}).on({ //设置修改的事件
'change:name': function(cell, name) {
cell.attr('.name/text', joint.util.breakText(name, { width: 50, height: 45 }, cell.attr('.name')));
},
'change:name3': function(cell, name3) {
if(name3>1){
cell.attr('.rank/text', joint.util.breakText(name3, { width: 50, height: 45 }, cell.attr('.rank')));
}else{
cell.attr('.rank/text', joint.util.breakText('', { width: 50, height: 45 }, cell.attr('.rank')));
}
}
}).set({ //重新给定修改后的属性
name: value[0],
name2:value[1],
name3:value[2],
name4:value[3],
name5:value[4],
name6:value[5],
name7:value[6],
name8:value[7],
name9:value[8],
name10:value[9],
name11:value[10]
});
graph.addCell(cell); //将图加入到画板中
return cell;
};5、自定义画线
function link(source, target, breakpoints) {
var cell = new joint.dia.Link({
source: { id: source.id }, //需要连接的起点
target: { id: target.id }, //需要连接的终点
vertices: breakpoints, //折线
attrs: { //设置样式
'.connection': {
'fill': 'none',
'stroke-width': '2',
'stroke': '#4b4a67'
}
}
});
graph.addCell(cell);
return cell;
}6、获取当前图标的对象
currentModel=elementView.model; //elementView是画完图后的返回值7、属性修改事件
function property(){
currentData=findById(data,currentModel.attributes.id);
//右键隐藏
menu.style.visibility = "hidden";
joint.setTheme('material');
var inspector = new joint.ui.Inspector({ //创建对话框
cell: currentModel, //传入当前图标对应的对象
live:false,
inputs: {
'name': {
type: 'text',
label: '文档名称',
index:1
},
'name2': {
type: 'text',
label: '活动配置',
index: 2
},
'name3': {
type: 'text',
label: '数量',
index: 3
},
'name4': {
type: 'text',
label: '编号',
index: 4
},
'name5': {
type: 'text',
label: '图号',
index: 5
},
'name6': {
type: 'text',
label: '规格型号',
index: 6
},
'name7': {
type: 'text',
label: '名称',
index: 7
},
'name8': {
type: 'text',
label: '来源',
index: 8
},
'name9': {
type: 'text',
label: '备注',
index: 9
},
'name10': {
type: 'text',
label: '下料长度',
index: 10
},
'name11': {
type: 'text',
label: '底数',
index: 11
}
}
});
var dialog = new joint.ui.Dialog({
type: 'inspector-dialog',
width: 260,
title: 'Edit Member',
closeButton: false,
content: inspector.render().el,
buttons: [{
content: 'Cancel',
action: 'cancel'
}, {
content: 'Apply',
action: 'apply'
}]
});
dialog.on({ //对话框事件
'action:cancel': function() {
inspector.remove();
dialog.close();
},
'action:apply': function() {
//将当前graph的11个value值存在data中
inspector.updateCell();
inspector.remove();
dialog.close();
getDataByGraph();
}
});
dialog.open();
//设置弹框的显示位置
var pos=$(".joint-dialog.joint-theme-material .fg");
pos.css({'position':'absolute','left':currentModel.position().x,'top':currentModel.position().y+10});
}
8、设置对话框中inpu和label一行显示
.joint-inspector .text-field{
padding: 10px;
}
.joint-inspector .text-field label{
display: inline-block;
width:60px;
text-align: right;
}
.joint-inspector .text-field .input-wrapper{
display: inline-block;
}样式：
9、鼠标右键事件
paper.on('cell:contextmenu',function(elementView, evt, x, y){
currentid=elementView.model.attributes.id;
currentpid=elementView.model.attributes.pid;
currentModel=elementView.model;
currentType=elementView.model.attributes.graphType;
pid=currentid;
if(currentType=="part"){
$("ul li").eq(0).css({"display":"none"});
}else{
$("ul li").eq(0).css({"display":"block"});
}
//阻止默认的右键事件
evt.preventDefault();
//新菜单位置跟随鼠标
//新菜单位置跟随鼠标
menu.style.left = x+"px";
menu.style.top = y+"px";
//显示菜单
menu.style.visibility = "visible";
});上一篇： 二逼朋友过生日的happy照片