当前位置：首页 > news >正文

通过anvt X6和vue3实现图编辑

news 2025/8/9 12:31:50

通过anvt X6
X6地址：https://x6.antv.antgroup.com/tutorial/about；
由于节点比较复杂，使用vue实现的节点；
x6提供了一个独立的包 @antv/x6-vue-shape 来使用 Vue 组件渲染节点。
VUE3的案例：

<template><div class="app-content"><div id="container"></div><TeleportContainer /></div>
</template><script lang="ts">import { defineComponent } from 'vue'import ProgressNode from './components/ProgressNode.vue'import { Graph } from '@antv/x6'import { register, getTeleport } from '@antv/x6-vue-shape'register({shape: 'custom-vue-node',width: 100,height: 100,component: ProgressNode,})const TeleportContainer = getTeleport()export default defineComponent({name: 'App',components: {TeleportContainer,},mounted() {const graph = new Graph({container: document.getElementById('container')!,background: {color: '#F2F7FA', //画布背景颜色},panning: true,//是否可以平移 默认truemousewheel: true,//是否可以缩放 默认trueautoResize: true,interacting: function (cellView) {return {nodeMovable: false,//节点是否可以被移动。// vertexAddable: false,//是否可以添加边的路径点。// arrowheadMovable: false,//边的起始/终止箭头是否可以被移动// edgeMovable: false,//边是否可以被移动。}}})graph.addNode({shape: 'custom-vue-node',x: 100, //x位置 y: 60, //y位置 })//x,y设置为0节点添加的位置就是左上角},})
</script>

节点组件内容如下：

<template><el-progress type="dashboard" :percentage="percentage" :width="80"><template #default="{ percentage }"><span class="percentage-value">{{ percentage }}%</span></template></el-progress>
</template><script lang="ts">import { defineComponent } from 'vue'export default defineComponent({name: 'ProgressNode',inject: ['getNode',"getGraph"],//注入node和graph，可以在组件内使用了data() {return {percentage: 80,}},mounted() {const node = (this as any).getNode()console.log(node)const graph = (this as any).getGraph();const zoom = graph.zoom(); //获取缩放的比例// 画布缩放到0.5graph.zoomTo(.5, {center: {//缩放的中心x:0,y: 0}});},})
</script>

效果如下：代码运行的效果可以进行拖动进程图
在这里插入图片描述
后记：画布进行缩放之后不是1的情况下，设置节点内部的offset会出现bug，可以通过先zoomTo 1 然后进行offset设置，设置完成之后在进行zoomTo 回去。

const graph = (this as any).getGraph();const zoom = graph.zoom();graph.zoomTo(1, {center: {x: 0,y: 0}});
//进行offset设置.....graph.zoomTo(zoom, {center: {x: this.zoomX,y: this.height / 2}});