三亚最新通告文昌最新通告,seo做什么行业比较好,微信公众号app下载安装,网页制作基本方法x6官方地址X6图编辑引擎 | AntV
官方文档仔细地介绍了很多丰富的功能#xff0c;这里的demo可以满足基本的使用#xff0c;具体拓展还需要仔细看文档内容
先上效果图 1、安装
通过 npm 或 yarn 命令安装 X6。
# npm
npm install antv/x6 --save# yarn
yarn add antv/x6
…x6官方地址X6·图编辑引擎 | AntV
官方文档仔细地介绍了很多丰富的功能这里的demo可以满足基本的使用具体拓展还需要仔细看文档内容
先上效果图 1、安装
通过 npm 或 yarn 命令安装 X6。
# npm
npm install antv/x6 --save# yarn
yarn add antv/x6
初始化画布
div idcontainer/div
import { Graph } from antv/x6const graph new Graph({container: document.getElementById(container),width: 800,height: 600,background: {color: #F2F7FA,},
})
使用插件
import { Snapline } from antv/x6-plugin-snaplinegraph.use(new Snapline({enabled: true,}),
)
数据导出
graph.toJSON()
具体依赖package.json
{antv/x6: ^2.0.0,antv/x6-plugin-clipboard: ^2.0.0, // 如果使用剪切板功能需要安装此包antv/x6-plugin-history: ^2.0.0, // 如果使用撤销重做功能需要安装此包antv/x6-plugin-keyboard: ^2.0.0, // 如果使用快捷键功能需要安装此包antv/x6-plugin-minimap: ^2.0.0, // 如果使用小地图功能需要安装此包antv/x6-plugin-scroller: ^2.0.0, // 如果使用滚动画布功能需要安装此包antv/x6-plugin-selection: ^2.0.0, // 如果使用框选功能需要安装此包antv/x6-plugin-snapline: ^2.0.0, // 如果使用对齐线功能需要安装此包antv/x6-plugin-dnd: ^2.0.0, // 如果使用 dnd 功能需要安装此包antv/x6-plugin-stencil: ^2.0.0, // 如果使用 stencil 功能需要安装此包antv/x6-plugin-transform: ^2.0.0, // 如果使用图形变换功能需要安装此包antv/x6-plugin-export: ^2.0.0, // 如果使用图片导出功能需要安装此包antv/x6-react-components: ^2.0.0, // 如果使用配套 UI 组件需要安装此包antv/x6-react-shape: ^2.0.0, // 如果使用 react 渲染功能需要安装此包antv/x6-vue-shape: ^2.0.0 // 如果使用 vue 渲染功能需要安装此包
}
本文依赖
dependencies: {element-plus/icons-vue: ^2.3.1,element-plus: ^2.7.6,pinia: ^2.1.7,vue: ^3.4.29,vue-router: ^4.3.3,antv/x6: latest,antv/x6-plugin-clipboard: latest,antv/x6-plugin-history: latest,antv/x6-plugin-keyboard: latest,antv/x6-plugin-selection: latest,antv/x6-plugin-snapline: latest,antv/x6-plugin-stencil: latest,antv/x6-plugin-transform: latest,antv/x6-plugin-node-editor: latest,insert-css: latest},
完整代码开箱即用
templatediv idcontainerdiv idstencil/divdiv idgraph-container/div/div
/template
script setup langts
import { ref, onMounted } from vue
import { Graph, Shape } from antv/x6
import { Stencil } from antv/x6-plugin-stencil
import { Transform } from antv/x6-plugin-transform
import { Selection } from antv/x6-plugin-selection
import { Snapline } from antv/x6-plugin-snapline
import { Keyboard } from antv/x6-plugin-keyboard
import { Clipboard } from antv/x6-plugin-clipboard
import { History } from antv/x6-plugin-history
// import { NodeEditor } from antv/x6-plugin-node-editor
import insertCss from insert-cssonMounted(() {// 初始化画布//- Graph 对象用于初始化流程图画布container 指向 HTML 中 graph-container 这个 DOM 元素。流程图支持缩放、连线、拖拽等功能。const graph new Graph({container: document.getElementById(graph-container),grid: true,mousewheel: {enabled: true,zoomAtMousePosition: true,modifiers: ctrl,minScale: 0.5,maxScale: 3},connecting: {router: manhattan,connector: {name: rounded,args: { radius: 8 }},anchor: center,connectionPoint: anchor,allowBlank: false,snap: { radius: 20 },createEdge() {return new 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 } }}}})// 插件配置//- 通过 .use() 方法注册了多个插件包括 Transform支持调整大小、旋转、Selection选择功能、Snapline自动对齐线、Keyboard键盘支持等。graph.use(new Transform({ resizing: true, rotating: true })).use(new Selection({ rubberband: true, showNodeSelectionBox: true })).use(new Snapline()).use(new Keyboard()).use(new Clipboard()).use(new History())// 初始化 stencil//- Stencil 是用于提供左侧工具栏的组件用户可以从工具栏中拖拽图形到画布中。支持基本图形和系统设计图的两类分组const stencil new 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)// #region 快捷键与事件graph.bindKey([metac, ctrlc], () {const cells graph.getSelectedCells()if (cells.length) {graph.copy(cells)}return false})graph.bindKey([metax, ctrlx], () {const cells graph.getSelectedCells()if (cells.length) {graph.cut(cells)}return false})graph.bindKey([metav, ctrlv], () {if (!graph.isClipboardEmpty()) {const cells graph.paste({ offset: 32 })graph.cleanSelection()graph.select(cells)}return false})// undo redograph.bindKey([metaz, ctrlz], () {if (graph.canUndo()) {graph.undo()}return false})graph.bindKey([metashiftz, ctrlshiftz], () {if (graph.canRedo()) {graph.redo()}return false})// select allgraph.bindKey([metaa, ctrla], () {const nodes graph.getNodes()if (nodes) {graph.select(nodes)}})// deletegraph.bindKey(backspace, () {const cells graph.getSelectedCells()if (cells.length) {graph.removeCells(cells)}})// zoomgraph.bindKey([ctrl1, meta1], () {const zoom graph.zoom()if (zoom 1.5) {graph.zoom(0.1)}})graph.bindKey([ctrl2, meta2], () {const zoom graph.zoom()if (zoom 0.5) {graph.zoom(-0.1)}})// 控制连接桩显示/隐藏const showPorts (ports: NodeListOfSVGElement, show: boolean) {for (let i 0, len ports.length; i len; 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) as NodeListOfSVGElementshowPorts(ports, true)})graph.on(node:mouseleave, () {const container document.getElementById(graph-container)!const ports container.querySelectorAll(.x6-port-body) as NodeListOfSVGElementshowPorts(ports, false)})// 注册自定义节点//- 通过 Graph.registerNode 注册了不同形状矩形、圆形、多边形等的自定义节点并且定义了连接桩的位置和样式。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 }]}// 注册不同形状的自定义节点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 },//支持文字编辑tools: [{name: node-editor,args: {attrs: {backgroundColor: #EFF4FF}}}]})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 }] },//支持文字编辑tools: [{name: node-editor,args: {attrs: {backgroundColor: #EFF4FF}}}]})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 },//支持文字编辑tools: [{name: node-editor,args: {attrs: {backgroundColor: #EFF4FF}}}]})// 加载图形节点到 stencilconst 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,label: 可选过程,attrs: { body: { rx: 6, ry: 6 } }})const r4 graph.createNode({shape: custom-polygon,label: 决策,attrs: { body: { refPoints: 0,10 10,0 20,10 10,20 } }})const r5 graph.createNode({shape: custom-polygon,label: 数据,attrs: { body: { refPoints: 10,0 40,0 30,20 0,20 } }})const r6 graph.createNode({ shape: custom-circle, label: 连接 })stencil.load([r1, r2, r3, r4, r5, r6], group1)//------------------------------------------文字编辑--------------------// const source graph.addNode({// x: 180,// y: 60,// width: 100,// height: 40,// attrs: {// body: {// stroke: #5F95FF,// fill: #EFF4FF,// strokeWidth: 1// }// },// tools: [// {// name: node-editor,// args: {// attrs: {// backgroundColor: #EFF4FF// }// }// }// ]// })// const target graph.addNode({// x: 320,// y: 250,// width: 100,// height: 40,// attrs: {// body: {// stroke: #5F95FF,// fill: #EFF4FF,// strokeWidth: 1// }// },// tools: [// {// name: node-editor,// args: {// attrs: {// backgroundColor: #EFF4FF// }// }// }// ]// })// graph.addEdge({// source,// target,// attrs: {// line: {// stroke: #A2B1C3,// strokeWidth: 2// }// },// tools: [// {// name: edge-editor,// args: {// attrs: {// backgroundColor: #fff// }// }// }// ]// })//-------------------------------------------------------// 加载图像节点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() 方法用于将自定义节点加载到 Stencil 中用户可以从左侧拖拽这些节点到画布上。stencil.load(imageNodes, group2)// 添加 CSS 样式//- 使用 insertCss() 动态添加了样式使得画布、工具栏以及选择框等元素的样式更加统一。insertCss(#container {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, .x6-widget-stencil-title, .x6-widget-stencil-group-title {background-color: #fff !important;}.x6-widget-transform, .x6-widget-selection-box, .x6-widget-selection-inner {border: 1px solid #239edd;})
})
/script
style scoped langscss
#container {display: flex;height: 50vh;
}
#stencil {width: 180px;height: 100%;border-right: 1px solid #dfe3e8;
}
#graph-container {flex-grow: 1;width: 800px;
}
/style
