1.在项目中引入jsplumb
先附上中文官网网址:https://wdd.js.org/jsplumb-chinese-tutorial/#/
下载包:npm install jsplumb --save
引入:在mian.js中加入:
import jsPlumb from 'jsplumb'
Vue.prototype.$jsPlumb = jsPlumb.jsPlum
一个小栗子测试有没有成功:
<template>
<div>
<div id="container">
<div class="col1">
<div v-for="item in list1" :id="item.nodeId" name="cell">{{item.name}}</div>
</div>
<div class="col2">
<div v-for="item in list2" :id="item.nodeId" name="cell">{{item.name}}</div>
</div>
</div>
</div>
</template>
<script>
export default {
data(){
return {
jsPlumb: null,
list1:[{name:'Z',nodeId:'x'},{name:'W',nodeId:'y'},{name:'K',nodeId:'z'}],
list2:[{name:'k',nodeId:'c'}],
connlist:[{sourceNodeId:'x',targetNodeId:'c'},{sourceNodeId:'y',targetNodeId:'c'},{sourceNodeId:'z',targetNodeId:'c'}]
}
},
created() {
this.jsPlumb = this.$jsPlumb.getInstance({
Container:"container", //选择器id
EndpointStyle: { radius: 4, fill: "#acd",shape:'circle'}, //端点样式
PaintStyle: { stroke: '#dbdd9d',strokeWidth:4},// 绘画样式,默认8px线宽 #456
HoverPaintStyle: { stroke: '#dbdd9d' }, // 默认悬停样式 默认为null
EndpointHoverStyle: { fill: '#ffe9d1', radius:6 }, // 端点悬停样式
ConnectionOverlays:[
["Arrow",{
location:1,
paintStyle: {
stroke: '#00688B',
fill: '#00688B',
}
}]
],
Connector:["StateMachine",{gap:1}], //要使用的默认连接器的类型:折线,流程等
DrapOptions:{cursor:"crosshair",zIndex:2000}
});
},
mounted() {
let ins = this.jsPlumb,
allConnection = ins.getAllConnections();
ins.batch(() => {
this.initAll();
this.connectionAll();
});
this.switchContainer(true,true,false);
// this.jsPlumb.draggable("container"); 元素可拖动 为id
},
methods:{
initAll () {
let rl = this.list1;
for (let i = 0; i < rl.length; i++) {
this.init(rl[i].nodeId)
}
let rl2 = this.list2;
for (let i = 0; i < rl2.length; i++) {
this.init(rl2[i].nodeId)
}
},
// 初始化规则使其可以连线、拖拽
init (id) {
let ins = this.jsPlumb,
elem = document.getElementById(id);
ins.makeSource(elem,{
anchor: ["Top", {anchorCount:200, shape:"Rectangle"}],
allowLoopback: false,
maxConnections: 1
});
ins.makeTarget(elem,{
anchor: ["Top", {anchorCount:200, shape:"Rectangle"}],
allowLoopback: false,
maxConnections: 1
});
ins.draggable(elem,{
containment: true
});
},
connectionAll () {
let ins = this.jsPlumb;
ins.ready(() => {
for (let i = 0; i < this.connlist.length; i++) {
let conn = this.connlist[i],
connection = ins.connect({
source:conn.sourceNodeId,
target:conn.targetNodeId
});
connection.setPaintStyle({stroke:"#9f9b9c",strokeWidth:4})
}
})
},
switchContainer (target,source,draggable) {
let elem = document.getElementsByName("cell"),
ins = this.jsPlumb;
ins.setSourceEnabled(elem,source);
ins.setTargetEnabled(elem,target);
ins.setDraggable(elem,draggable);
},
}
}
</script>
<style>
#container{
margin: 50px;
position: relative;
background: #efefef;
width: 400px;
height: 400px;
}
.col2,.col1{
float: left;
}
.col1{
margin-left: 40px;
}
.col2{
margin-left: 150px;
}
#container>div>div{
width: 100px;
height: 40px;
line-height: 40px;
background: lightcyan;
margin-top: 40px;
}
</style>
关系指向图
1. 了解默认值
Anchor : “BottomCenter”,//端点的定位点的位置声明(锚点):left,top,bottom等
Anchors : [ null, null ],//多个锚点的位置声明
ConnectionsDetachable : true,//连接是否可以使用鼠标默认分离
ConnectionOverlays : [],//附加到每个连接的默认重叠
Connector : “Bezier”,//要使用的默认连接器的类型:折线,流程等
Container : null,//设置父级的元素,一个容器
DoNotThrowErrors : false,//如果请求不存在的Anchor,Endpoint或Connector,是否会抛出
DragOptions : { },//用于配置拖拽元素的参数
DropOptions : { },//用于配置元素的drop行为的参数
Endpoint : “Dot”,//端点(锚点)的样式声明(Dot)
Endpoints : [ null, null ],//多个端点的样式声明(Dot)
EndpointOverlays : [ ],//端点的重叠
EndpointStyle : { fill : “#456” },//端点的css样式声明
EndpointStyles : [ null, null ],//同上
EndpointHoverStyle : null,//鼠标经过样式
EndpointHoverStyles : [ null, null ],//同上
HoverPaintStyle : null,//鼠标经过线的样式
LabelStyle : { color : “black” },//标签的默认样式。
LogEnabled : false,//是否打开jsPlumb的内部日志记录
Overlays : [ ],//重叠
MaxConnections : 1,//最大连接数
PaintStyle : { lineWidth : 8, stroke : “#456” },//连线样式
ReattachConnections : false,//是否重新连接使用鼠标分离的线
RenderMode : “svg”,//默认渲染模式
Scope : “jsPlumb_DefaultScope”//范围,标识
-
节点、连接、锚点的style设置。
a.节点:
(其实这是个表)
参数 | 参数类型 | 是否必须 | 说明
source | String,Object,Endpoint | 是 | 连线源的标识,可以是id, element, 或者Endpoint
target | String,Object,Endpoint | 是 | 连线目标的标识,可以是id, element, 或者Endpoint
endpoint | String | 可选 | 端点类型,形状b.连接:jsplumb的直线分为四种
Bezier: 贝塞尔曲线
Flowchart: 具有90度转折点的流程线:
StateMachine状态机
Straight: 直线Lable标签
设置线上值的时候需要用到
connection.setLabel("测试");//connection为创建边时调用connect方法的返回值
c.锚点
anchor可以去设置锚点的位置。
锚点又分为静态锚、动态锚、周边锚、连续锚四类。 静态锚写法: 9个单词
(Top,Left,Right,Center,Perimeter之类)或者[x, y, dx, dy] 写法 x,y为锚点位置 取值为0到1 ,dx,dy为锚点连线方向,取值为0,1,-1就像这样写
anchor:“Bottom” 动态锚
指多个锚,每次自动选择最佳的锚点
anchor: [ [ 0.2, 0, 0, -1 ], [ 1, 0.2, 1, 0 ], “Top”, “Bottom” ] 周长锚
动态锚的一种形式,锚点在周长上变化,自动取最近的
6种形状 Circle Ellipse Triangle Diamond Rectangle Square
anchor:[ “Perimeter”, { shape:“Circle”,anchorCount:150 } ]
Perimeter为周长的意思,后面大括号里周长锚属性,shape为形状,anchorCount为周长锚的数量,值越大锚点越多越平滑
(未完待续!!!)