笑到世界都狼狈的博客

本文是对antv x6一个初步使用的简单总结，主要包括以下几点：1.实现画布的平移拖拽2.实现画布的layout方法3.实现画布的放大缩小方法4.实现画布的居中效果实现效果如下：完整代码如下：<template> <div> <button @click="zoomInFn">放大</button> <button @click="zoomOutFn">缩小</button>

一般情况下，我们使用antv x6画出的图形在画布中不是居中的状态，看上去很奇怪，所以需要一种方法来实现图形在画布中的居中效果在官网中找到如下方法：this.graph.centerContent()文档地址具体在代码中的使用方法如下图所示：这样，一个画布居中的效果就实现了...

首先在官网上查到关于画布缩放的知识，如下截图所示：接下来画布缩放这边，我是写了两个按钮，按钮点击时进行相应的放大和缩小代码布局如下：主要代码：<div> <button @click="zoomInFn">放大</button> <button @click="zoomOutFn">缩小</button> <div id="container"></div></div>.

Antv x6想要实现鼠标拖拽时平移画布，需要加上以下属性即可：panning: true // 拖拽平移代码布局：文档地址

相信很多用过Antv G6或者echarts关系图等的大佬都知道，关于图形的layout布局都是已经内置好的，只需要修改layout就行了，但是，，，，，在Antv X6这块就行不通了。。。。。。。。。。。在文档中翻到了layout的使用，需要进行安装，所以感觉用起来就没有别的那么方便了。文档地址下面我简单介绍一下安装及使用的过程吧：（1）X6中layout的安装与引用1.1在项目中使用NPM包引入npm install @antv/layout --save...

Antv x6的第一个demo

Antv X6的安装与搭建