通过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,//是否可以平移 默认true
mousewheel: true,//是否可以缩放 默认true
autoResize: 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>
节点组件内容如下:文章来源:https://www.toymoban.com/news/detail-636794.html
<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.5
graph.zoomTo(.5, {
center: {
//缩放的中心
x:0,
y: 0
}
});
},
})
</script>
效果如下:代码运行的效果可以进行拖动进程图
后记:画布进行缩放之后不是1的情况下,设置节点内部的offset会出现bug,可以通过先zoomTo 1 然后进行offset设置,设置完成之后在进行zoomTo 回去。文章来源地址https://www.toymoban.com/news/detail-636794.html
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
}
});
到了这里,关于通过anvt X6和vue3实现图编辑的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!