Antv X6画布缩放

首先在官网上查到关于画布缩放的知识，如下截图所示：

接下来画布缩放这边，我是写了两个按钮，按钮点击时进行相应的放大和缩小

代码布局如下：

主要代码：

<div><button @click="zoomInFn">放大</button><button @click="zoomOutFn">缩小</button><div id="container"></div>
</div>

zoomInFn () { // 放大this.graph.zoom(0.2)
},
zoomOutFn () { // 缩小this.graph.zoom(-0.2)
},

效果如下图：

完整代码：

<template><div><button @click="zoomInFn">放大</button><button @click="zoomOutFn">缩小</button><div id="container"></div></div>
</template><script>
import { Graph } from '@antv/x6'
import { GridLayout } from '@antv/layout' // umd模式下， const { GridLayout } = window.layout
export default {name: 'X6',mounted () {this.initComponent()},data () {return {data: {}, // X6 数据graph: undefined, // new X6gridLayout: undefined, // new GridLayoutnewModel: undefined}},methods: {zoomInFn () { // 放大this.graph.zoom(0.2)},zoomOutFn () { // 缩小this.graph.zoom(-0.2)},initComponent () {this.data = {nodes: [// 节点{id: 'node1', // String，可选，节点的唯一标识width: 80, // Number，可选，节点大小的 width 值height: 40, // Number，可选，节点大小的 height 值label: 'hello' // String，节点标签},{id: 'node2', // String，节点的唯一标识width: 80, // Number，可选，节点大小的 width 值height: 40, // Number，可选，节点大小的 height 值label: 'world' // String，节点标签}],edges: [// 边{source: 'node1', // String，必须，起始节点 idtarget: 'node2' // String，必须，目标节点 id}]}this.graph = new Graph({container: document.getElementById('container'),width: 800,height: 600,panning: true // 拖拽平移})this.gridLayout = new GridLayout({type: 'grid',width: 600,height: 400,center: [300, 200],rows: 4,cols: 4})this.newModel = this.gridLayout.layout(this.data)this.graph.fromJSON(this.newModel)this.graph.centerContent() // 画布居中}}
}
</script><style scoped></style>

Antv X6画布缩放相关推荐

Antv X6 画布平移
Antv x6想要实现鼠标拖拽时平移画布,需要加上以下属性即可: panning: true // 拖拽平移代码布局: 文档地址效果图如下:
antv x6画布内容居中
一般情况下,我们使用antv x6画出的图形在画布中不是居中的状态,看上去很奇怪,所以需要一种方法来实现图形在画布中的居中效果在官网中找到如下方法: this.graph.centerContent ...
VUE中使用Antv.X6实现将侧边导航栏节点拖拽到画布中，并能够将画布保存到缓存中
直接上代码,参考官网的文档安装完之后可以直接运行. <template><div class="home"><div class="left ...
antv x6 v2 使用笔记
基础注意版本,x6不同版本对React的要求是不同的,也需要注意插件版本,不同版本的x6的api可能是不同的 x6 是一个图引擎,多用来画多节点关系的图最重要的概念就是节点 Node 和边 E ...
在 Vue3 中使用 AntV X6
在 Vue3 中使用 AntV X6 图编辑引擎 <script setup lang="ts"> import { onMounted, ref } from 'vu ...
antV x6 开发流程图实例
1)使用x6背景之前本来是使用jsplumb社区版开发完成的,但是由于jsplumb社区版缩放功能不能满足,所以经过对比其他的流程图插件果断换x6.x6基本满足目前所有需求.使用起来还算顺手. 2) ...
记录--VUE使用antv X6实现流程图
安装npm install @antv/x6 --save 引入import { Graph, Addon } from "@antv/x6"; 说明:如果没有自定义拖拽到画布的需 ...
使用antv/X6实现流程图（包括线条动画流动，路径标签，悬浮窗口等）快速搭建流程图，DAG图等初始实践记录
文章目录开始使用 Step 1 创建容器 Step 2 准备数据 Step 3 渲染画布取消节点的移动使用不同图形渲染节点画布居中和缩放修改边样式给虚线增加流动效果修改节点和边的属性鼠 ...
AntV X6流程图绘制程序（官方示例纯javascript+html+css）
直接拷贝可用,需要引入官方的x6.js(AntV X6) antvx6-flow: antv x6实现流程画图 (gitee.com) <!DOCTYPE html> <html ...

Antv X6画布缩放

Antv X6画布缩放相关推荐

最新文章

热门文章