小地图 | X6 图编辑引擎

在本章节中主要介绍小地图插件相关的知识，通过阅读，你可以了解到

如何使用小地图功能

使用

你可以通过插件 MiniMap 启用小地图功能，示例：

import { Graph, MiniMap } from '@antv/x6'

const graph = new Graph({
  background: {
    color: '#F2F7FA',
  },
})
graph.use(
  new MiniMap({
    container: document.getElementById('minimap'),
  }),
)

演示

移动小地图视口来移动画布。
缩放小地图视口来缩放画布。

简单视图详细视图

选项

属性名	类型	默认值	必选	描述
container	HTMLElement	-	✓️	挂载小地图的容器
width	number	`300`		小地图的宽度
height	number	`200`		小地图的高度
padding	number	`10`		小地图容器的 padding 边距
scalable	boolean	`true`		是否启用缩放
minScale	number	`0.01`		最小缩放比例
maxScale	number	`16`		最大缩放比例
graphOptions	Graph.Options	`{}`		小地图内部 Graph 的选项
createGraph	(options: Graph.Options) => Graph	`options => new Graph(options)`		自定义创建小地图内部 Graph 的方法