AntV X6 核心插件帮你飞速创建画布

AntV X6 是一款功能强大且高度可扩展的图编辑引擎，其强大的生命力不仅源于其核心功能的稳定与灵活，更在于其丰富的插件生态系统。这些插件就像是 X6 的"扩展包"，可以让你轻松地为画布增加如组件面板、小地图、对齐线、快捷键、撤销重做等高级功能，极大地提升了开发效率和用户体验。

1. Stencil (组件面板)

import { Stencil } from '@antv/x6-plugin-stencil'

Stencil 插件可以为你的画布创建一个组件面板，用户可以从面板中拖拽预设的节点或边到画布上，从而快速地创建图形。这是低代码/无代码平台、流程图、ER 图等应用场景中必不可少的功能。

核心功能：

拖拽生成节点/边： 从面板拖拽到画布即可创建新的图形元素。
分组管理： 支持将组件进行分组（如"基础节点"、"业务节点"），方便用户查找。
搜索过滤： 内置搜索功能，当组件数量众多时，可以快速定位。
自定义样式： 面板和组件的样式都可以进行深度定制。

使用场景：

任何需要用户从一个固定的"物料库"中选择并创建图形的应用，如流程图编辑器、UML 工具、K8s 编排工具等。

js 复制代码

// 伪代码示例
const stencil = new Stencil({
  title: '组件',
  target: graph,
  groups: [
    { name: 'group1', title: '基础节点' },
    { name: 'group2', title: '业务节点' },
  ],
  // ... 其他配置
});

// 将 stencil 面板挂载到页面指定容器
stencilContainer.appendChild(stencil.container);

Stencil样式

2. Transform (变形)

import { Transform } from '@antv/x6-plugin-transform'

Transform 插件为画布上的节点提供了缩放和旋转的功能。当用户选中一个或多个节点时，会出现一个包含控制点（handler）的边框，用户可以通过拖动这些控制点来改变节点的大小和旋转角度。

核心功能：

八向缩放： 提供八个方向的控制点，可以等比或自由缩放。
旋转： 提供旋转控制点，可以围绕中心点旋转节点。
自定义样式： 变换框和控制点的样式均可自定义。
配置限制： 可以设置最小/最大宽高、旋转角度步长等。

Transform样式

3. Selection (选框)

import { Selection } from '@antv/x6-plugin-selection'

Selection 插件为用户提供了多种选择画布上图形元素（节点和边）的方式，最常见的就是通过鼠标拖拽拉出一个矩形选框来批量选中内部的元素。

核心功能：

框选： 按住 Ctrl/Cmd 或 Shift 键并拖动鼠标，可以批量选择多个节点和边。
点选增强： 可以配置点击节点/边的多选逻辑（如按住 Shift 加选）。
过滤： 可以设置规则，决定哪些元素可以被选中。
自定义样式： 选框的样式（背景色、边框等）可以自定义。
事件监听： 提供 selection:changed 等事件，方便开发者获取当前选中的元素。

4. Snapline (对齐线)

import { Snapline } from '@antv/x6-plugin-snapline'

Snapline 插件可以在用户拖动节点时，实时显示对齐线，帮助用户将节点与画布或其他节点对齐（上、下、左、右、中）。这极大地提升了布局的美观度和效率。

核心功能：

自动吸附： 当节点靠近对齐位置时，会自动吸附过去。
多种对齐方式： 支持与画布中心、其他节点的边界和中心对齐。
自定义样式： 对齐线的颜色、粗细、样式均可配置。
高亮显示： 当与其他节点对齐时，可以高亮显示相关的节点。

5. Keyboard (键盘快捷键)

import { Keyboard } from '@antv/x6-plugin-keyboard'

Keyboard 插件允许你为画布绑定各种键盘快捷键，从而实现高效的命令操作，如复制 (Cmd/Ctrl + C)、粘贴 (Cmd/Ctrl + V)、删除 (Backspace/Delete)、撤销 (Cmd/Ctrl + Z) 等。

核心功能：

命令绑定： 轻松将键盘组合键与特定的图操作（如 graph.copy、graph.paste）绑定。
组合键支持： 支持 Ctrl、Shift、Alt、Cmd 等组合键。
全局与局部监听： 可以配置快捷键在全局生效还是仅在画布获得焦点时生效。
高度可定制： 可以注册任意自定义的快捷键和回调函数。

6. Clipboard (剪贴板)

import { Clipboard } from '@antv/x6-plugin-clipboard'

Clipboard 插件为 X6 提供了剪贴板功能，允许用户在画布内部甚至画布之间复制和粘贴节点/边。它通常与 Keyboard 插件协同工作。

核心功能：

复制/剪切/粘贴： 实现了图形数据的内存中转。
配置选项： 可以设置粘贴时的偏移量、是否使用本地剪贴板等。
自定义序列化： 在复制和粘贴过程中，可以自定义数据的处理逻辑。

7. History (撤销/重做)

import { History } from '@antv/x6-plugin-history'

History 插件为画布增加了撤销 (undo) 和重做 (redo) 的能力。它会自动监听画布上的所有变更（如添加、删除、移动、属性修改），并将这些操作记录到一个堆栈中。

核心功能：

自动记录： 无需手动干预，自动记录大部分图操作。
命令分组： 可以将多个连续的操作合并为一个历史记录（例如，拖动节点过程中的所有移动事件只记录一次）。
事件监听： 提供 history:change 事件，方便更新 UI 状态（如撤销/重做按钮是否可用）。
可配置性： 可以设置历史记录堆栈的最大长度，以及通过 before 和 after 钩子函数干预记录过程。

8. Scroller (滚动/平移)

import { Scroller } from '@antv/x6-plugin-scroller'

当画布内容超出可视区域时，Scroller 插件可以为画布提供滚动条，或者通过按住鼠标中键/特定快捷键拖拽来平移画布。

核心功能：

滚动条： 在画布容器外层包裹一个带滚动条的容器。
拖拽平移 (Panning)： 按住鼠标中键或 Space 键等，可以将画布作为一个整体进行拖动。
缩放中心： 可以控制鼠标滚轮缩放是以鼠标指针位置为中心还是以画布中心为中心。
自动滚动： 当拖动节点或创建边到画布边缘时，可以自动滚动画布。

9. MiniMap (小地图)

import { MiniMap } from '@antv/x6-plugin-minimap'

MiniMap 插件会在画布的一个角落生成一个缩略图，用于展示整个画布的全貌。用户可以通过拖动小地图中的视口来快速导航到画布的不同区域。

核心功能：

全局预览： 帮助用户在大图中快速定位。
快速导航： 拖动视口即可平移主画布。
自定义样式： 小地图的大小、位置、背景、视口样式都可以自定义。

10. Dnd (拖放)

import { Dnd } from '@antv/x6-plugin-dnd'

Dnd (Drag and Drop) 插件是 Stencil 功能的底层依赖，但它也可以被单独使用。它提供了一种更通用的能力，让你能将画布外部的任何 HTML 元素拖拽到画布上，并转化为一个 X6 节点。

核心功能：

从任意源拖拽： 不仅仅局限于一个固定的组件面板，可以从任何 HTML 元素开始拖拽。
拖拽预览： 在拖拽过程中，可以显示一个预览图形跟随鼠标。
数据传递： 在拖拽开始时可以携带数据，在节点创建时使用。

11. Export (导出)

import { Export } from '@antv/x6-plugin-export'

Export 插件提供了将画布内容导出为图片或 SVG 的功能。

核心功能：

导出为图片： 支持导出为 PNG、JPEG 等格式。
导出为 SVG： 可以导出为矢量图形，方便二次编辑或高清打印。
配置选项： 可以设置导出的文件名、背景色、内边距、图片质量、以及是否只导出选中部分等