社区
跨浏览器开发
帖子详情
开源流程图设计器
一个小机灵
2017-07-14 10:07:57
有没有推荐的流程图设计器的插件呢?我想在web页面上,可以让用户自己去设计流程图,通过左边的一些图形拖拉到画布上。。。类似Visio那样。。。。要可以自定义图形,自定义点击事件之类的监听事件,,,,一定要开源的
...全文
542
2
打赏
收藏
开源流程图设计器
有没有推荐的流程图设计器的插件呢?我想在web页面上,可以让用户自己去设计流程图,通过左边的一些图形拖拉到画布上。。。类似Visio那样。。。。要可以自定义图形,自定义点击事件之类的监听事件,,,,一定要开源的
复制链接
扫一扫
分享
转发到动态
举报
写回复
配置赞助广告
用AI写文章
2 条
回复
切换为时间正序
请发表友善的回复…
发表回复
打赏红包
ll7425
2018-11-07
打赏
举报
回复
<template>
<div id="labelManage">
<div id="main">
<ul class="flowchart-demo" id="flowchart-demo" ref="demo">
<li class="circle" id="flowchartWindow1" ref="dd" @mouseenter="handleCircle1"><span>开始</span></li>
<li class="window" id="flowchartWindow2" ref="qq" @mouseenter="handleWindow"><span>流程</span></li>
<li class="diamond" id="flowchartWindow3" ref="dia" @mouseenter="handleDiamond"><span>判断</span></li>
<li class="circle" id="flowchartWindow4" ref="cir" @mouseenter="handleCircle2"><span>结束</span></li>
</ul>
</div>
</div>
</template>
<script>
import {jsPlumb} from 'jsplumb';
import draggable from 'vuedraggable';
//基本连接线样式
let connectorPaintStyle = {
lineWidth: 4,
strokeStyle: '#61B7CF',
joinstyle: 'round',
outlineColor: 'white',
outlineWidth: 2
};
// 鼠标悬浮在连接线上的样式
let connectorHoverStyle = {
lineWidth: 4,
strokeStyle: '#216477',
outlineWidth: 2,
outlineColor: 'white'
};
let hollowCircle = {
endpoint: ['Dot', {radius: 8}], //端点的形状
connectorStyle: connectorPaintStyle,//连接线的颜色,大小样式
connectorHoverStyle: connectorHoverStyle,
paintStyle: {
strokeStyle: '#1e8151',
fillStyle: 'transparent',
radius: 2,
lineWidth: 2
}, //端点的颜色样式
anchor: 'AutoDefault',
isSource: true, //是否可以拖动(作为连线起点)
Connector: ['Flowchart', {curviness: 70}],
isTarget: true, //是否可以放置(连线终点)
maxConnections: -1, // 设置连接点最多可以连接几条线
connectorOverlays: [['Arrow', {width: 10, length: 10, location: 1}]]
};
export default {
components: {
draggable
},
data () {
return {
count1: 1,
count2: 1,
count3: 1,
count4: 1
};
},
methods: {
handleCircle1 () {
let vm = this;
document.onkeydown = function (e) {
if (e.keyCode === 67) {
let clone = vm.$refs.dd.cloneNode(true);
let target = vm.$refs.demo;
target.appendChild(clone);
let l = target.children[target.children.length - 1];
l.id = 'circle' + vm.count1;
vm.count1++;
// vm.jsPlumbSet(l);
jsPlumb.addEndpoint(l.id, {anchors: 'TopCenter'}, vm.hollowCircle);
jsPlumb.addEndpoint(l.id, {anchors: 'RightMiddle'}, vm.hollowCircle);
jsPlumb.addEndpoint(l.id, {anchors: 'BottomCenter'}, vm.hollowCircle);
jsPlumb.addEndpoint(l.id, {anchors: 'LeftMiddle'}, vm.hollowCircle);
jsPlumb.draggable(l.id, {
containment: 'flowchart-demo'
});
}
;
};
},
handleCircle2 () {
let vm = this;
document.onkeydown = function (e) {
if (e.keyCode === 67) {
let clone = vm.$refs.cir.cloneNode(true);
let target = vm.$refs.demo;
target.appendChild(clone);
let l = target.children[target.children.length - 1];
l.id = 'cir' + vm.count2;
vm.count2++;
vm.jsPlumbSet(l);
}
};
},
handleWindow () {
let vm = this;
document.onkeydown = function (e) {
if (e.keyCode === 67) {
let clone = vm.$refs.qq.cloneNode(true);
let target = vm.$refs.demo;
target.appendChild(clone);
let l = target.children[target.children.length - 1];
l.id = 'window' + vm.count3;
vm.count3++;
vm.jsPlumbSet(l);
}
};
},
handleDiamond () {
let vm = this;
document.onkeydown = function (e) {
if (e.keyCode === 67) {
let clone = vm.$refs.dia.cloneNode(true);
let target = vm.$refs.demo;
target.appendChild(clone);
let l = target.children[target.children.length - 1];
l.id = 'diamond' + vm.count4;
vm.count4++;
vm.jsPlumbSet(l);
}
};
},
jsPlumbSet (element) {
// 基本连接线样式
let connectorPaintStyle = {
lineWidth: 4,
strokeStyle: '#61B7CF',
joinstyle: 'round',
outlineColor: 'white',
outlineWidth: 2
};
// 鼠标悬浮在连接线上的样式
let connectorHoverStyle = {
lineWidth: 4,
strokeStyle: '#216477',
outlineWidth: 2,
outlineColor: 'white'
};
jsPlumb.ready(function () {
let j = jsPlumb.getInstance({
DragOptions: {cursor: 'pointer', zIndex: 2000},
PaintStyle: {stroke: 'red', strokeWidth: 1}, // 配置自己拖拽小点的时候连接线的默认样式
Endpoint: 'Dot', // 这个是控制连线终端那个小点的半径
EndpointStyle: {fill: 'gray', radius: 4}, // 这个是控制连线终端那个小点的样式
EndpointHoverStyle: {fill: 'blue'}, // 这个是控制连线终端那个小点的样式
isSource: true,
isTarget: true,
Connector: ['Flowchart', {curviness: 70}],
maxConnections: -1, // 不限条数
connectorStyle: connectorPaintStyle,// 连接线的颜色,大小样式
connectorHoverStyle: connectorHoverStyle,
ConnectionOverlays: [
['Arrow', {
location: 1,
events: {
click: function (arrow, evt) {
}
}
}],
['Label', {
location: 0.5,
id: 'label',
cssClass: 'aLabel', //hover时label的样式名
events: {
click: function (label, evt) {
}
},
visible: true
}]
],
Container: 'flowchart-demo'
});
j.draggable(element.id, {
containment: 'flowchart-demo'
});
j.addEndpoint(element.id, {anchor: 'Bottom'}, j);
j.addEndpoint(element.id, {anchor: 'TopCenter'}, j);
j.addEndpoint(element.id, {anchor: 'Left'}, j);
j.addEndpoint(element.id, {anchor: 'Right'}, j);
// j.repaintEverything(); // 节点跟着元素一起移动
j.bind('dblclick', function (conn, event) {
j.deleteConnection(conn);
return false;
});
// 自动避免连线源锚点和目标锚点在同一节点上
j.bind('beforeDrop', function (conn) {
if (conn.sourceId === conn.targetId) {
return false;
} else {
return true;
}
});
});
}
},
mounted () {
// jsPlumb.ready(function () {
// let j = jsPlumb.getInstance({
// DragOptions: {cursor: 'pointer', zIndex: 2000},
// PaintStyle: {stroke: 'red', strokeWidth: 1}, //配置自己拖拽小点的时候连接线的默认样式
// Endpoint: 'Dot', //这个是控制连线终端那个小点的半径
// EndpointStyle: {fill: 'gray', radius: 4}, //这个是控制连线终端那个小点的样式
// EndpointHoverStyle: {fill: 'blue'}, //这个是控制连线终端那个小点的样式
// isSource: true,
// isTarget: true,
// Connector: ['Flowchart', {curviness: 70}],
// maxConnections: -1, // 不限条数
// ConnectionOverlays: [
// ['Arrow', {
// location: 1,
// events: {
// click: function (arrow, evt) {
// }
// }
// }],
// ['Label', {
// location: 0.5,
// id: 'label',
// cssClass: 'aLabel', //hover时label的样式名
// events: {
// click: function (label, evt) {
// }
// },
// visible: true
// }]
// ],
// Container: 'flowchart-demo',
// });
//
请问我这样写为什么连接不上
红尘丿
2017-08-08
打赏
举报
回复
楼主。。。找到了吗。。给我也留个。。
多款可视化表单、流程
开源
设计
器
随着互联网的快速发展,越来越多的云建站平台快速崛起,不可避免的就是自定义可视化
设计
,如何不通过开发就能能够简单快速的搭出一个可用的页面就成了大家头痛的问题,但是从零开始开发
设计
一套可视化
设计
功能并不是一个简单的事情,还好有很多
开源
的可视化
设计
项目/组件可以供我们使用,今天我们就来看看有哪些
开源
可视化
设计
项目。 一、FormRender 易用的跨组件体系的表单渲染引擎 - 通过 JSON Schema 快速生成自定义表单配置界面 Github Star 数 1938 , Github 地址:https:/
QT案例 使用QGraphicsView和命令模式
设计
完成
流程图
功能软件,参考QT官方
流程图
案例【diagramscene】
想到使用QGraphicsView来完成相关功能,再使用命令模式来优化使用过程,再通过XML保存和加载记录等。
推荐两款
开源
的绘制
流程图
软件
目前
流程图
绘制软件非常多,包括本机安装的、web端的都有,如Visio、Graphviz、processOn等等。但是几乎都是收费的。本文给大家介绍两款优秀的
开源
免费的
流程图
绘制软件。
开源
好用的
流程图
绘制工具 drawio
git 官网:GitHub - jgraph/drawio: Source to app.diagrams.net
开源
Vue表单
设计
器
开源
Vue表单
设计
器
跨浏览器开发
5,006
社区成员
2,692
社区内容
发帖
与我相关
我的任务
跨浏览器开发
解读Web 标准、分析和讨论实际问题、推动网络标准化发展和跨浏览器开发进程,解决各种兼容性问题。
复制链接
扫一扫
分享
社区描述
解读Web 标准、分析和讨论实际问题、推动网络标准化发展和跨浏览器开发进程,解决各种兼容性问题。
社区管理员
加入社区
获取链接或二维码
近7日
近30日
至今
加载中
查看更多榜单
社区公告
暂无公告
试试用AI创作助手写篇文章吧
+ 用AI写文章