vue3 @antv/x6 各种插件的一些说明及其展示的效果图片

1、图形变换

• 如何通过交互插件调整节点大小
• 如果通过交互插件调整节点旋转角度

说明：直接用鼠标调整节点的大小，及调整节点显示的角度，比如可以顺时针转90度等。

图形变换，安装依赖

$ pnpm add @antv/x6-plugin-transform

$ npm install @antv/x6-plugin-transform --save

$ yarn add @antv/x6-plugin-transform

2、对齐线

在画布中使用对齐线

这个主要用于节点的定位操作。

对齐线，安装依赖

$ pnpm add @antv/x6-plugin-snapline

$ npm install @antv/x6-plugin-snapline --save

$ yarn add @antv/x6-plugin-snapline

3、复制粘贴

节点的复制粘贴功能

用于拷贝节点，并且可以paste出来多个同样属性的节点。

复制粘贴，安装依赖

$ pnpm add @antv/x6-plugin-clipboard

$ npm install @antv/x6-plugin-clipboard --save

$ yarn add @antv/x6-plugin-clipboard

4、快捷键

为画布绑定快捷键

比如说，copy：ctrl+c、command+c，绑定了快捷键以后，我们就可以直接用键盘进行操作。

快捷键，安装依赖

$ pnpm add @antv/x6-plugin-keyboard

$ npm install @antv/x6-plugin-keyboard --save

$ yarn add @antv/x6-plugin-keyboard

5、撤销重做

实现元素操作的撤销与重做

比如说，不小心移动了一个节点，那它的坐标就变了，可以直接撤销掉，这样又可以还原了。

撤销重做，安装依赖

$ pnpm add @antv/x6-plugin-history

$ npm install @antv/x6-plugin-history --save

$ yarn add @antv/x6-plugin-history

6、框选

开启选择交互

比如说，我们要同时移动二个节点或者一行、一排的节点，只要框选一下，就可以一块移动了。

框选，安装依赖

$ pnpm add @antv/x6-plugin-selection

$ npm install @antv/x6-plugin-selection --save

$ yarn add @antv/x6-plugin-selection

7、滚动画布

使画布具备滚动能力

一般我们是用鼠标直接按住移动整个画布的，但是有的时候，我们在实际操作的过程中，不能这样操作，比如在节点比较多的时候，会有一部分节点是看不到的，那么此时滚动画布我们就用上了。

这样可能比较符合一些人的操作习惯。

滚动画布，安装依赖

$ pnpm add @antv/x6-plugin-scroller

$ npm install @antv/x6-plugin-scroller --save

$ yarn add @antv/x6-plugin-scroller

8、小地图

使用小地图功能

这个功能类似于百度地图等等地图的鸟瞰图，就是节点比较多的时候，我们可以通过小地图进行精确的定位。一般项目中用的少。

滚动画布，安装依赖

$ pnpm add @antv/x6-plugin-minimap

$ npm install @antv/x6-plugin-minimap --save

$ yarn add @antv/x6-plugin-minimap

9、Dnd

通过拖拽交互往画布中添加节点

这个功能可以完成一些图编辑，将一些待选的节点放在左侧，然后将节点拖动到画布，完成一个节点的增加功能。

Dnd，安装依赖

$ pnpm add @antv/x6-plugin-dnd

$ npm install @antv/x6-plugin-dnd --save

$ yarn add @antv/x6-plugin-dnd

10、Stencil

通过 stencil 插件，进一步增强 dnd 能力

这个是dnd的一个增加插件，类似dnd的功能，可以拖动节点完成增加节点。Stencil 是在 Dnd 基础上的进一步封装，提供了一个类似侧边栏的 UI 组件，并支持分组、折叠、搜索等能力。

Stencil，安装依赖

$ pnpm add @antv/x6-plugin-stencil

$ npm install @antv/x6-plugin-stencil --save

$ yarn add @antv/x6-plugin-stencil

11、导出

将画布内容通过图片格式导出

有时候有这样的需求，不同的状态要有不同的图，也就是生成一次图，要保存一下，作为历史记录，以便以后查看。

导出，安装依赖

$ pnpm add @antv/x6-plugin-export

$ npm install @antv/x6-plugin-export --save

$ yarn add @antv/x6-plugin-export

提供了导出SVG,PNG,JPEG等格式的图片。

官网地址：

https://x6.antv.antgroup.com/tutorial/plugins/transform