本文主要是介绍jsPlumb画流程图，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！
获取的JSON格式
{"linkDataArray":[{"targetAnchors":["Bottom","Right","Top","Left"],"routerId":"R00001","from":"E00001","sourceAnchors":["Bottom","Right","Top","Left"],"to":"T00001","label":""},{"targetAnchors":["Bottom","Right","Top","Left"],"routerId":"R00002","from":"T00001","sourceAnchors":["Bottom","Right","Top","Left"],"to":"T00002","label":""},{"targetAnchors":["Bottom","Right","Top","Left"],"routerId":"R00003","from":"T00002","sourceAnchors":["Bottom","Right","Top","Left"],"to":"T00004","label":""},{"targetAnchors":["Bottom","Right","Top","Left"],"routerId":"R00004","from":"T00004","sourceAnchors":["Bottom","Right","Top","Left"],"to":"T00003","label":""},{"targetAnchors":["Bottom","Right","Top","Left"],"routerId":"R00005","from":"T00003","sourceAnchors":["Bottom","Right","Top","Left"],"to":"T00005","label":""},{"targetAnchors":["Bottom","Right","Top","Left"],"routerId":"R00006","from":"T00005","sourceAnchors":["Bottom","Right","Top","Left"],"to":"E00002","label":""}],"nodeDataArray":[{"locTop":151,"deal":"1","bgColor":"#cccccc","locLeft":303.8909912109375,"nodeWidth":"60px","nodeHeight":"60px","text":"开始","nodeType":"start","list":null,"key":"E00001"},{"locTop":288,"deal":"1","bgColor":"#cccccc","locLeft":461.8909912109375,"nodeWidth":"60px","nodeHeight":"60px","text":"结束","nodeType":"end","list":null,"key":"E00002"},{"locTop":151,"deal":"1","bgColor":"#cccccc","locLeft":444.8909912109375,"nodeWidth":"100px","nodeHeight":"60px","text":"审核","nodeType":"comm","list":null,"key":"T00001"},{"locTop":151,"deal":"1","bgColor":"#cccccc","locLeft":615.8909912109375,"nodeWidth":"100px","nodeHeight":"60px","text":"审核","nodeType":"comm","list":null,"key":"T00002"},{"locTop":289,"deal":"0","bgColor":"#6babdc","locLeft":804.8909912109375,"nodeWidth":"100px","nodeHeight":"60px","text":"审核","nodeType":"comm","list":null,"key":"T00003"},{"locTop":150,"deal":"2","bgColor":"#ff0000","locLeft":804.8909912109375,"nodeWidth":"100px","nodeHeight":"60px","text":"审核","nodeType":"comm","list":null,"key":"T00004"},{"locTop":288,"deal":"0","bgColor":"#6babdc","locLeft":615.8909912109375,"nodeWidth":"100px","nodeHeight":"60px","text":"审核","nodeType":"comm","list":null,"key":"T00005"}]}
<%@ page language="java" contentType="text/html; charset=UTF-8"pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title></title>
<script type="text/javascript" src="${ctx}/static/js/component/jquery-1.11.0.min.js"></script>
<script type="text/javascript" src="${ctx}/static/js/component/jquery-ui.min.js"></script>
<script type="text/javascript" src="${ctx}/static/js/component/graphlib.min.js"></script>
<script type="text/javascript" src="${ctx}/static/jquery.jsPlumb.min.js"></script><style>#diagramContainer {font-size: smaller; padding: 20px;height: 1000px;border: 1px solid gray;background: #fff;background-image: linear-gradient(#bab5b54d 1px, transparent 0), linear-gradient(90deg, #bab5b54d 1px, transparent 0), linear-gradient(#bab5b54d 1px, transparent 0), linear-gradient(90deg, #bab5b54d 1px, transparent 0);background-size: 15px 15px, 15px 15px, 75px 75px, 75px 75px;}/** 画图基础模型 */.cir_css{position: absolute;text-align: center;line-height: 60px;height: 60px;width: 60px;border: 2px solid rgb(64, 175, 254);border-radius: 30px;display:table;background:linear-gradient(to right, rgba(107, 171, 220, 0.9), rgba(107, 171, 220, 0.8), rgba(107, 171, 220, 0.9));}.rect_css{position: absolute;text-align: center;line-height:60px;height: 60px;width: 100px;border: 2px solid rgb(64, 175, 254);border-radius: 5px;display:table;background:linear-gradient(to right, rgba(107, 171, 220, 0.9), rgba(107, 171, 220, 0.8), rgba(107, 171, 220, 0.9));}.box_text{display:table-cell;vertical-align:middle;line-height:20px;}.text_box{width: 100px;}</style>
</head>
<body><div id="diagramContainer"></div><script type="text/javascript">var url="json数据链接地址";var graph = new graphlib.Graph();/* global jsPlumb */function makeStyle(flag) {let config = {};config.connectorPaintStyle = {lineWidth: 2,strokeStyle: "#61b8d0",};// 鼠标悬浮在连接线上的样式config.connectorHoverStyle = {lineWidth: 2,strokeStyle: "green",};return {// 端点形状endpoint: ['Dot', {radius: 6,fill: flag == 'dim' ? '#a2a1a1' : 'black'}],// 连接线的样式connectorStyle: config.connectorPaintStyle,connectorHoverStyle: config.connectorHoverStyle,// 端点的样式paintStyle: {fillStyle: flag == 'dim' ? '#a2a1a1' : 'black',radius: 4},hoverPaintStyle: {fillStyle: '#4caf50',strokeStyle: '#4caf50'},isSource: false, //开启可删除线connector: ['Straight', {gap: 0,cornerRadius: 5,alwaysRespectStubs: true}],isTarget: false, //开启可删除线// 设置连接点最多可以链接几条线maxConnections: -1,connectorOverlays: [['Arrow', {width: 8,length: 10,location: 1}]]};}// 给节点添加端点，返回端点idfunction addEndPoint(nodeId, anchors,pointStyle) {let endPointId = nodeId + '-' + getUUID();setTimeout(function() {jsPlumb.addEndpoint(nodeId, {uuid: endPointId,anchors: anchors},pointStyle);}, 30);return endPointId;}function getUUID() {let s = [];let hexDigits = "0123456789abcdef";for(let i = 0; i < 36; i++) {s[i] = hexDigits.substr(Math.floor(Math.random() * 0x10), 1);}s[14] = "4";s[19] = hexDigits.substr((s[19] & 0x3) | 0x8, 1);s[8] = s[13] = s[18] = s[23] = "-";let uuid = s.join("");return uuid.replace(/-/g, '');}let config = {baseStyle: makeStyle('base'),dimStyle: makeStyle('dim')};jsPlumb.ready(function () {var pointStyle = config.baseStyle;jsPlumb.setContainer('diagramContainer'); $.getJSON(url,{},function(data){var nodeArr=data.nodeDataArray; //节点列表var linkArr=data.linkDataArray; //线段列表nodeArr.forEach(function(item, i){var id = item.key;var ntype=item.nodeType;if(ntype=='comm'){var css="rect_css";$("#diagramContainer").append('<div class="'+css+'" style=\'position: absolute\' id="' + id + '" data-id=" " ><span class="box_text">' + item.text+'</span></div>');$("#diagramContainer").append('<div class="text_box" id="' + id + '_span" style=\'position: absolute\'><p>'+item.desc+'</p>'+'<div>');}else{var css="cir_css";$("#diagramContainer").append('<div class="'+css+'" style=\'position: absolute\' id="' + id + '" data-id=" " ><span class="box_text">' + item.text+'</span></div>');}$("#" + id).css("left", item.locLeft).css("top", item.locTop);jsPlumb.draggable(id); //开启可以移动});linkArr.forEach(function(item, i){var defaultAnchors = ["Bottom", "Right", "Top", "Left"];// 1、新增端点，一条连接线两个端点//let sourceEndPointId = addEndPoint(item.from, defaultAnchors,pointStyle);//let targetEndPointId = addEndpoint(item.to, defaultAnchors,pointStyle);let endPointId = item.from + '-' + getUUID();jsPlumb.addEndpoint(item.from, {uuid: endPointId,anchors: defaultAnchors},pointStyle);let endPointId2 = item.to + '-' + getUUID();jsPlumb.addEndpoint(item.to, {uuid: endPointId2,anchors: defaultAnchors},pointStyle);jsPlumb.connect({uuids: [endPointId, endPointId2]});//jsPlumb.connect({source:item.from,target:item.to});});});});</script>
</body>
</html>这篇关于jsPlumb画流程图的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！
