vue项目中使用jsplumb流程图(以及类似官网的放大缩小漫游)

1、html

//jsplumb初始化
jsplumb(_this) {
jsPlumb.ready(function() {
_this.instance = jsPlumb.getInstance({
	Endpoint: ["Dot", {
		radius: 2,
		cssClass: "dot"
	}],
	//连线
	Connector: ['Bezier', {
		curviness: 50
	}],
	//拖动时的演示
	DragOptions: {
		cursor: 'pointer',
		zIndex: 2000
	},
	//连接线的样式
	PaintStyle: {
		stroke: "#909090",
		strokeWidth: 1
	},
	HoverPaintStyle: {
		stroke: "#b3b3b3",
		strokeWidth: 3
	},
	//连接点的样式
	EndpointStyle: {
		radius: 5,
		fill: '#fff',
		outlineStroke: 'darkgray',
		outlineWidth: 1
	},
	//hover时点的样式
	// EndpointHoverStyle:{fill:'darkgray'},
	ConnectionOverlays: [
		["Arrow", {
			location: 1,
			id: "arrow",
			length: 8,
			width: 8,
			foldback: 0.8
		}],
		["Label", {
			label: "",
			id: "label",
			cssClass: "aLabel"
		}]
	],
	Container: "canvas"
});
//拖动停止（不管是否拖动到目标对象或中途停止拖动）
_this.stopConnection();
// 删除线
_this.deleteLine();
//元素加点击事件
// jsPlumb.on(document.getElementById("canvas"), "click", ".model-edit", _this.modelEdit);
// jsPlumb.on(document.getElementById("canvas"), "click", ".model-delete", _this.modelDelete);
jsPlumb.on(document.getElementById("canvas"), "click", ".model-list-li", _this.loadParam);
jsPlumb.on(document.getElementById("canvas"), "click", _this.canvasClick);
jsPlumb.on(document.getElementById("canvas"), "mouseover", ".model-list-li", _this.modelDetailShow);
jsPlumb.on(document.getElementById("canvas"), "mouseout", ".model-list-li", _this.modelDetailHide);

// jsPlumb.on(document.getElementById("canvas"), "dblclick", ".model-list-li", _this.mouseDown);
jsPlumb.on(document.getElementById("canvas"), "contextmenu",".model-list-li", _this.contextmenuOnFileItem);
//jsPlumb不支持move事件
// jsPlumb.on(document.getElementById("canvas"), "mousemove", _this.dragMove);
jsPlumb.on(document.getElementById("canvas"), "mouseup", ".model-list-li", _this.dragOvers);

//初始化节点
_this.initNode = function(el) {
	_this.instance.draggable(el, {
		containment: true
	});
};
});
},

//拖动停止（不管是否拖动到目标对象或中途停止拖动）
stopConnection(){
var _this = this;

_this.instance.bind("connectionDragStop", function(connection) {
	var arr = connection.getUuids(),
	dom = _this.moduleData.dom,
	anchorData = _this.moduleData.anchors,
	connects = _this.moduleData.connects,
	sourceId = arr[0].split('-')[0],
	sourcePort = arr[0].split('-')[1],
	sourceIndex = arr[0].split('-')[1].slice(-1) - 1,
	targetId = arr[1].split('-')[0],
	targetPort = arr[1].split('-')[1],
	targetIndex = arr[1].split('-')[1].slice(-1) - 1,
	value = '',
	dataOut = null,
	dataIn = null,
	prop = null,
	dtName = '';
for(var k = 0; k < connects.length; k++){
	if(targetId == connects[k].targetId && targetPort == connects[k].targetPort){
		_this.$notify({
			dangerouslyUseHTMLString: true,
			message: '不能指向同一个节点!',
			duration: 3000,
			type: 'error'
		});
		_this.instance.deleteConnection(connection);	
		return false;
	}
}
});
},
// 删除线
deleteLine(){
var _this = this;
_this.instance.bind("click", function (conn, originalEvent) {
var arr = conn.getUuids(),
anchorData = _this.moduleData.anchors,
dom = _this.moduleData.dom,
connects = _this.moduleData.connects,
sourceId = arr[0].split('-')[0],
sourcePort = arr[0].split('-')[1],
sourceIndex = arr[0].split('-')[1].slice(-1) - 1,
targetId = arr[1].split('-')[0],
targetPort = arr[1].split('-')[1],
targetIndex = arr[1].split('-')[1].slice(-1) - 1;
//删除线
_this.instance.deleteConnection(conn);	
});
}

注意：

这里有个问题，如果需求是一个锚点只能被连接一次的时候，可以通过判断targetIg来判断，然后不过判断已经连接过则删除这个连线，没有发现直接限制这个连线的判断，只能这样曲线救国！

参考：
https://blog.csdn.net/join_null/article/details/80266993

https://blog.csdn.net/u011784006/article/details/81022713

##2、 实现放大、缩小、漫游

漫游拖拽：

mousedown(e){
	let _this = this;
	this.ifDrag = true;
	let pos = _this.getPos(e); //获取鼠标坐标
	_this.disX = pos.x;
	_this.disY = pos.y;
	_this.mainX = _this.$refs.canvas.offsetLeft;
	_this.mainY = _this.$refs.canvas.offsetTop;
	if(this.ifDrag){					
		this.mouseMove(e);
	}				
},
mouseMove(e){
	var _this = this;
	document.onmousemove = function(e){
		var evt = window.event || e;
		var left = (evt.clientX - _this.disX) + _this.mainX;
		var top = (evt.clientY - _this.disY) + _this.mainY;
		_this.$refs.canvas.style.left = left + 'px';
		_this.$refs.canvas.style.top = top + 'px';
	}
	this.mouseUp();
},
mouseUp(){
	var _this = this;
	//鼠标抬起
	document.onmouseup = function(e) {
		var evt = window.event || e;
		document.onmousemove = null;
		document.onmouseup = null;
		_this.ifDrag = false;
	};
},
// 获取位置
getPos(ev){
	let scrollTop=document.documentElement.scrollTop||document.body.scrollTop;
	let scrollLeft=document.documentElement.scrollLeft||document.body.scrollLeft;
	return {x: ev.clientX+scrollLeft, y: ev.clientY+scrollTop};
},

放大以及缩小：

changeZoom(e) {
var _this = this;
var canvasDom = document.getElementById('canvas');
var mainDom = document.getElementById('main');

var p = [ "webkit", "moz", "ms", "o" ];
// window.addEventListener("mousewheel DOMMouseScroll", function (e) { 
   var delta = (e.wheelDelta && (e.wheelDelta > 0 ? 1 : -1)) ||  // chrome & ie &其它  
               (e.detail && (e.detail > 0 ? -1 : 1));// firefox
   var originX = (e.clientX - 353 - 20)/50 * 100 ;
   var originY = (e.clientY - 40 - 20)/50 * 100 ;
	var	oString = originX + "% " + originY + "%";
    if (delta > 0) {
        // 向上滚  
		for (var i = 0; i < p.length; i++) {
			canvasDom.style[p[i] + "Transform"] = "scale(" + this.zoomNum + ")";
			canvasDom.style[p[i] + "TransformOrigin"] = oString;
		 }

	    canvasDom.style["transform"] = "scale(" + this.zoomNum + ")";
	    canvasDom.style["transformOrigin"] = oString;
		this.zoomNum += 0.1;				      
    } else if (delta < 0) {  
        // 向下滚    
        if(this.zoomNum > 0.1) {
			this.zoomNum -= 0.1;
			for (var i = 0; i < p.length; i++) {
				canvasDom.style[p[i] + "Transform"] = "scale(" + this.zoomNum + ")";
				canvasDom.style[p[i] + "TransformOrigin"] = oString;
			 }
			
			canvasDom.style["transform"] = "scale(" + this.zoomNum + ")";
			canvasDom.style["transformOrigin"] = oString;
		}
    }  
    return false;
// });  
},

借助于官网的布局方式，通过transform的scale设置，从而实现放大，缩小，漫游

案例下载

链接：https://pan.baidu.com/s/13IkQoBCNoOH-VRFU5vqWPg
提取码：5389
复制这段内容后打开百度网盘手机App，操作更方便哦