本文主要是介绍【vue2+antvx6】节点大小不一致，点击按钮流程图自动布局，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！
需求：
1、点击优化布局的按钮，自动布局（从左到右），按钮变成撤销布局按钮
2、点击撤销布局的按钮，返回之前的布局
3、在点击优化布局的按钮后，如果移动了节点，则自动将撤销布局的按钮变成优化布局的按钮
第一步：安装插件
npm i @antv/layout第二步：写方法
// 优化布局（自动布局）layout() {this.isRevoke = true;const gridLayout = new DagreLayout({type: "dagre",rankdir: "LR",// align: "UL",ranksep: 30,nodesep: 15,controlPoints: true,});//布局所需的格式const originData = {nodes: [],edges: [],};//获取所有节点const nodes = graph.getNodes();//获取当前数据const jso = (document.querySelector("#container").value = JSON.stringify(graph.toJSON({ diff: true })));//保存原先布局localStorage.setItem("layoutAntv", jso);//原先布局中的数据放置到所需格式中JSON.parse(jso).cells.forEach((i) => {if (i.shape === "edge") {originData.edges.push(i);} else {originData.nodes.push(i);}});//我设置的vue自定义节点，所以节点在添加的时候，会根据实际盒子的大小进行设置（利用node.resize()进行改变）//所以我的节点大小是不一致的，需要替换一下改变后的节点大小nodes.forEach((node) => {const size = node.size();originData.nodes.forEach((j) => {if (node.id === j.id) {j.size.width = size.width;j.size.height = size.height;}});});const newModel = gridLayout.layout(originData);// 以中心线对齐newModel.nodes.forEach((node) => {node.x -= node.size.width / 2;node.y -= node.size.height / 2;});graph.fromJSON(newModel);this.resetFn();},// 撤销布局layoutFn() {this.isRevoke = false;graph.fromJSON(JSON.parse(localStorage.getItem("layoutAntv")));this.resetFn();},全部代码
<template><div class="antv-wrapper"><div style="display: flex; height: calc(100% - 80px)"><div style="width: calc(100% - 330px); height: 100%; position: relative"><divref="container"id="container"class="wrapper-canvas"@drop="drop($event)"@dragover.prevent></div><div class="icon_oper"><el-tooltipclass="item"effect="dark"content="优化布局"placement="bottom"v-if="!isRevoke"><imgsrc="@/assets/buju.png"style="width: 20px; height: 20px; margin: 0px 5px 0 10px"@click="layout()"/></el-tooltip><el-tooltipclass="item"effect="dark"content="撤销布局"placement="bottom"v-if="isRevoke"><imgsrc="@/assets/chexiao.png"style="width: 20px; height: 20px; margin: 0px 5px 0 10px"@click="layoutFn()"/></el-tooltip> </div></div></div></div>
</template><script>
import { Graph, Shape } from "@antv/x6";
import { DagreLayout } from "@antv/layout";// 布局方向
const dir = "LR"; // LR RL TB BT
let graph = null;export default {data() {return {isRevoke: false, //是否显示撤销布局按钮};},mounted() {this.initGraph();},beforeDestroy() {graph.dispose();},methods: {// 初始化画布initGraph(options) {// 渲染画布graph = new Graph({container: document.getElementById("container"),width: container.offsetWidth, // 画布宽height: container.offsetHeight, // 画布高...});// 监听节点拖动事件graph.on("node:moved", ({ node }) => {// 恢复优化布局的按钮this.isRevoke = false;});graph.centerContent();// // 返现方法// if (resData.length) {// const jsonTemp = resData.map((item) => {// item.ports = configNodePorts();// return item;// });// graph.fromJSON(jsonTemp);// }},// 自适应视图resetFn() {const nodes = graph.getNodes();if (nodes.length > 2) {graph.zoomToFit({padding: 60,allowMoving: true, // 允许移动节点以保证完全可见allowResizing: true, // 允许调整大小以保证完全可见duration: 500, // 动画持续时间（毫秒）});}graph.centerContent();},// 优化布局（自动布局）layout() {this.isRevoke = true;const gridLayout = new DagreLayout({type: "dagre",rankdir: "LR",// align: "UL",ranksep: 30,nodesep: 15,controlPoints: true,});const originData = {nodes: [],edges: [],};const nodes = graph.getNodes();const edges = graph.getEdges();const jso = (document.querySelector("#container").value = JSON.stringify(graph.toJSON({ diff: true })));localStorage.setItem("layoutAntv", jso);JSON.parse(jso).cells.forEach((i) => {if (i.shape === "edge") {originData.edges.push(i);} else {originData.nodes.push(i);}});nodes.forEach((node) => {const size = node.size();originData.nodes.forEach((j) => {if (node.id === j.id) {j.size.width = size.width;j.size.height = size.height;}});});const newModel = gridLayout.layout(originData);// 以中心线对齐newModel.nodes.forEach((node) => {node.x -= node.size.width / 2;node.y -= node.size.height / 2;});graph.fromJSON(newModel);this.resetFn();},// 撤销布局layoutFn() {this.isRevoke = false;graph.fromJSON(JSON.parse(localStorage.getItem("layoutAntv")));this.resetFn();},},
};
</script><style lang="scss" scoped="scoped">
.icon_oper {font-size: 18px;cursor: pointer;margin: 0 5px;background-color: #fff;border-radius: 10px;z-index: 999;width: 150px;display: flex;align-items: center;box-shadow: 0 0 1px 0 rgba(0, 0, 0, 0.3), 0 4px 14px 0 rgba(0, 0, 0, 0.1);position: absolute;top: 10px;i {margin: 10px;}
}
</style>
这篇关于【vue2+antvx6】节点大小不一致，点击按钮流程图自动布局的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！
