AntV X6流程图绘制程序（官方示例纯javascript+html+css）

直接拷贝可用，需要引入官方的x6.js（AntV X6） antvx6-flow: antv x6实现流程画图 (gitee.com)

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><script src="./js/x6.js"></script><style type="text/css">#container {width: 100%;height: 600px;display: flex;border: 1px solid #dfe3e8;}#stencil {width: 180px;height: 100%;position: relative;border-right: 1px solid #dfe3e8;}#graph-container {width: calc(100% - 180px);height: 100%;}.x6-widget-stencil  {background-color: #fff;}.x6-widget-stencil-title {background-color: #fff;}.x6-widget-stencil-group-title {background-color: #fff !important;}.x6-widget-transform {margin: -1px 0 0 -1px;padding: 0px;border: 1px solid #239edd;}.x6-widget-transform > div {border: 1px solid #239edd;}.x6-widget-transform > div:hover {background-color: #3dafe4;}.x6-widget-transform-active-handle {background-color: #3dafe4;}.x6-widget-transform-resize {border-radius: 0;}.x6-widget-selection-inner {border: 1px solid #239edd;}.x6-widget-selection-box {opacity: 0;}</style>
</head>
<body><div class="header"><button onclick="getJson()">点击</button></div><div id="container"><div id="stencil"></div><div id="graph-container"></div></div><script>// #region 初始化画布const graph = new X6.Graph({container: document.getElementById('graph-container'),grid: true,mousewheel: {enabled: true,zoomAtMousePosition: true,modifiers: 'ctrl',minScale: 0.5,maxScale: 3,},connecting: {router: {name: 'manhattan',args: {padding: 1,},},connector: {name: 'rounded',args: {radius: 8,},},anchor: 'center',connectionPoint: 'anchor',allowBlank: false,snap: {radius: 20,},createEdge() {return new X6.Shape.Edge({attrs: {line: {stroke: '#A2B1C3',strokeWidth: 2,targetMarker: {name: 'block',width: 12,height: 8,},},},zIndex: 0,})},validateConnection({ targetMagnet }) {return !!targetMagnet},},highlighting: {magnetAdsorbed: {name: 'stroke',args: {attrs: {fill: '#5F95FF',stroke: '#5F95FF',},},},},resizing: true,rotating: true,selecting: {enabled: true,rubberband: true,showNodeSelectionBox: true,},snapline: true,keyboard: true,clipboard: true,})// #endregion// #region 初始化 stencilconst stencil = new X6.Addon.Stencil({title: '流程图',target: graph,stencilGraphWidth: 200,stencilGraphHeight: 180,collapsable: true,groups: [{title: '基础流程图',name: 'group1',},{title: '系统设计图',name: 'group2',graphHeight: 250,layoutOptions: {rowHeight: 70,},},],layoutOptions: {columns: 2,columnWidth: 80,rowHeight: 55,},})document.getElementById('stencil').appendChild(stencil.container)// #endregion// #region 快捷键与事件// copy cut pastegraph.bindKey(['meta+c', 'ctrl+c'], () => {const cells = graph.getSelectedCells()if (cells.length) {graph.copy(cells)}return false})graph.bindKey(['meta+x', 'ctrl+x'], () => {const cells = graph.getSelectedCells()if (cells.length) {graph.cut(cells)}return false})graph.bindKey(['meta+v', 'ctrl+v'], () => {if (!graph.isClipboardEmpty()) {const cells = graph.paste({ offset: 32 })graph.cleanSelection()graph.select(cells)}return false})//undo redograph.bindKey(['meta+z', 'ctrl+z'], () => {if (graph.history.canUndo()) {graph.history.undo()}return false})graph.bindKey(['meta+shift+z', 'ctrl+shift+z'], () => {if (graph.history.canRedo()) {graph.history.redo()}return false})// select allgraph.bindKey(['meta+a', 'ctrl+a'], () => {const nodes = graph.getNodes()if (nodes) {graph.select(nodes)}})//deletegraph.bindKey('backspace', () => {const cells = graph.getSelectedCells()if (cells.length) {graph.removeCells(cells)}})// zoomgraph.bindKey(['ctrl+1', 'meta+1'], () => {const zoom = graph.zoom()if (zoom < 1.5) {graph.zoom(0.1)}})graph.bindKey(['ctrl+2', 'meta+2'], () => {const zoom = graph.zoom()if (zoom > 0.5) {graph.zoom(-0.1)}})// 控制连接桩显示/隐藏const showPorts = (ports, show) => {for (let i = 0, len = ports.length; i < len; i = i + 1) {ports[i].style.visibility = show ? 'visible' : 'hidden'}}graph.on('node:mouseenter', () => {const container = document.getElementById('graph-container')const ports = container.querySelectorAll('.x6-port-body',)showPorts(ports, true)})graph.on('node:mouseleave', () => {const container = document.getElementById('graph-container')const ports = container.querySelectorAll('.x6-port-body',)showPorts(ports, false)})// #endregion// #region 初始化图形const ports = {groups: {top: {position: 'top',attrs: {circle: {r: 4,magnet: true,stroke: '#5F95FF',strokeWidth: 1,fill: '#fff',style: {visibility: 'hidden',},},},},right: {position: 'right',attrs: {circle: {r: 4,magnet: true,stroke: '#5F95FF',strokeWidth: 1,fill: '#fff',style: {visibility: 'hidden',},},},},bottom: {position: 'bottom',attrs: {circle: {r: 4,magnet: true,stroke: '#5F95FF',strokeWidth: 1,fill: '#fff',style: {visibility: 'hidden',},},},},left: {position: 'left',attrs: {circle: {r: 4,magnet: true,stroke: '#5F95FF',strokeWidth: 1,fill: '#fff',style: {visibility: 'hidden',},},},},},items: [{group: 'top',},{group: 'right',},{group: 'bottom',},{group: 'left',},],}X6.Graph.registerNode('custom-rect',{inherit: 'rect',width: 66,height: 36,attrs: {body: {strokeWidth: 1,stroke: '#5F95FF',fill: '#EFF4FF',},text: {fontSize: 12,fill: '#262626',},},ports: { ...ports },},true,)X6.Graph.registerNode('custom-polygon',{inherit: 'polygon',width: 66,height: 36,attrs: {body: {strokeWidth: 1,stroke: '#5F95FF',fill: '#EFF4FF',},text: {fontSize: 12,fill: '#262626',},},ports: {...ports,items: [{group: 'top',},{group: 'bottom',},],},},true,)X6.Graph.registerNode('custom-circle',{inherit: 'circle',width: 45,height: 45,attrs: {body: {strokeWidth: 1,stroke: '#5F95FF',fill: '#EFF4FF',},text: {fontSize: 12,fill: '#262626',},},ports: { ...ports },},true,)X6.Graph.registerNode('custom-image',{inherit: 'rect',width: 52,height: 52,markup: [{tagName: 'rect',selector: 'body',},{tagName: 'image',},{tagName: 'text',selector: 'label',},],attrs: {body: {stroke: '#5F95FF',fill: '#5F95FF',},image: {width: 26,height: 26,refX: 13,refY: 16,},label: {refX: 3,refY: 2,textAnchor: 'left',textVerticalAnchor: 'top',fontSize: 12,fill: '#fff',},},ports: { ...ports },},true,)const r1 = graph.createNode({shape: 'custom-rect',label: '开始',attrs: {body: {rx: 20,ry: 26,},},})const r2 = graph.createNode({shape: 'custom-rect',label: '过程',})const r3 = graph.createNode({shape: 'custom-rect',attrs: {body: {rx: 6,ry: 6,},},label: '可选过程',})const r4 = graph.createNode({shape: 'custom-polygon',attrs: {body: {refPoints: '0,10 10,0 20,10 10,20',},},label: '决策',})const r5 = graph.createNode({shape: 'custom-polygon',attrs: {body: {refPoints: '10,0 40,0 30,20 0,20',},},label: '数据',})const r6 = graph.createNode({shape: 'custom-circle',label: '连接',})stencil.load([r1, r2, r3, r4, r5, r6], 'group1')const imageShapes = [{label: 'Client',image:'https://gw.alipayobjects.com/zos/bmw-prod/687b6cb9-4b97-42a6-96d0-34b3099133ac.svg',},{label: 'Http',image:'https://gw.alipayobjects.com/zos/bmw-prod/dc1ced06-417d-466f-927b-b4a4d3265791.svg',},{label: 'Api',image:'https://gw.alipayobjects.com/zos/bmw-prod/c55d7ae1-8d20-4585-bd8f-ca23653a4489.svg',},{label: 'Sql',image:'https://gw.alipayobjects.com/zos/bmw-prod/6eb71764-18ed-4149-b868-53ad1542c405.svg',},{label: 'Clound',image:'https://gw.alipayobjects.com/zos/bmw-prod/c36fe7cb-dc24-4854-aeb5-88d8dc36d52e.svg',},{label: 'Mq',image:'https://gw.alipayobjects.com/zos/bmw-prod/2010ac9f-40e7-49d4-8c4a-4fcf2f83033b.svg',},]const imageNodes = imageShapes.map((item) =>graph.createNode({shape: 'custom-image',label: item.label,attrs: {image: {'xlink:href': item.image,},},}),)stencil.load(imageNodes, 'group2')function getJson(){var json = graph.toJSON();console.log(json);}</script>
</body>
</html>

AntV X6流程图绘制程序（官方示例纯javascript+html+css）相关推荐

AntV X6流程图绘制程序
(官方示例纯javascript+html+css) 直接拷贝可用,需要引入官方的x6.js(AntV X6) antvx6-flow: antv x6实现流程画图 <!DOCTYPE html ...
微信小程序官方示例 Demo 源代码获取
一.引言最近在学习微信小程序,莫名其妙的刷到了腾讯官方出的小程序示例的 Demo,感觉做的真的很好. 要是自己在写小程序之前,多多参考这个 Demo 里面的一些东西,应该会轻松很多,而且做出来的 ...
微信小程序官方示例 Demo 代码
以前只知道小程序有一个UI组件库, 不知道小程序还有一个官方示例Demo,今天用了一下大大的提高了我的编程速度,界面截图如下: 具体的你们自己打开吧,我给你们整好了拦截,微信小程序官方示例Demo代码 ...
AntV X6 流程图
安装 AntV X6 npm install @antv/x6 --save html结构 <div class="editor" ref="editor&quo ...
【VUE3+AntV X6】引入ANTV X6 的流程图编辑器应用（一）
ANTV X6 流程图编辑器应用唠唠叨叨事发背景实现效果实现思路总结参考资料唠唠叨叨唉!最近感觉非常忙,要学的东西太多,要实现的方法变幻莫测,层出不穷,越学越觉得自己不会的实在太多.项 ...
代替visio(流程图绘制软件)的免费软件
作者:善用佳软出处:http://xbeta.info/visio-alternative.htm 说到画流程图,很多人第一反应是MS visio.对于公司来讲,这确为较好的选择.但对个人偶尔应用. ...
【转】Visio(流程图绘制软件)的免费替代品
转自http://xbeta.info/visio-alternative.htm xmind 相比其他软件,流程图[2]绘制工具的种类不算很多,最广为人知的应该是MS Visio.对实力雄厚的机构来 ...
支付宝小程序演示示例
使用使用支付宝扫码可以立即体验: 主要功能小程序官方示例展示官方组件和API:
Vue项目中使用AntV X6绘制流程图
Vue项目中使用AntV X6绘制流程图一.需求在Vue2.x(Vue3.x项目同理)项目中使用AntV X6组件库绘制流程图,需要实现以下需求: 需求1:左侧菜单中的模块可以拖拽进入画布中生成对 ...

AntV X6流程图绘制程序（官方示例纯javascript+html+css）

AntV X6流程图绘制程序（官方示例纯javascript+html+css）相关推荐

最新文章

热门文章