图形变换

HTML 节点

对齐线

使用

使用 UI 组件来调整节点尺寸和角度是常见需求。我们提供插件 transform 来实现该功能，代码示例如下：

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

const graph = new Graph({
  background: {
    color: '#F2F7FA',
  },
})
graph.use(
  new Transform({
    resizing: resizingOptions,
    rotating: rotatingOptions,
  }),
)

配置

调整尺寸

属性名	类型	默认值	描述
enabled	boolean	`false`	是否支持调整节点大小
minWidth	number	0	最小的调整宽度
minHeight	number	0	最小的调整高度
maxWidth	number	`Infinity`	最大的调整宽度
maxHeight	number	`Infinity`	最大的调整高度
orthogonal	boolean	`true`	是否显示中间调整点
restrict	boolean	`false`	调整大小边界是否可以超出画布边缘
autoScroll	boolean	`true`	拖动位置超过画布时是否自动滚动画布
preserveAspectRatio	boolean	`false`	调整大小过程中是否保持节点的宽高比例
allowReverse	boolean	`true`	到达最小宽度或者高度时是否允许控制点反向拖动

上面的配置除了支持默认类型外，还支持使用函数的方式来动态修改：

new Transform({
  resizing: {
    enabled: true,
    orthogonal(node: Node) {
      const { enableOrthogonal } = node.getData()
      return enableOrthogonal
    },
  },
})

调整角度

属性名	类型	默认值	必选	描述
enabled	boolean	`false`		是否支持调整节点角度
grid	number	15		每次旋转的角度

上面的配置除了支持默认类型外，还支持使用函数的方式来动态修改：

new Transform({
  rotating: {
    enabled: true,
    grid() {
      return 30
    },
  },
})

事件

事件名称	参数类型	描述
`node:resize`	`{ e: Dom.MouseDownEvent; x: number; y: number; node: Node; view: NodeView }`	开始调整节点大小时触发
`node:resizing`	`{ e: Dom.MouseMoveEvent; x: number; y: number; node: Node; view: NodeView }`	调整节点大小时触发
`node:resized`	`{ e: Dom.MouseUpEvent; x: number; y: number; node: Node; view: NodeView }`	调整节点大小后触发
`node:rotate`	`{ e: Dom.MouseDownEvent; x: number; y: number; node: Node; view: NodeView }`	开始旋转节点时触发
`node:rotating`	`{ e: Dom.MouseMoveEvent; x: number; y: number; node: Node; view: NodeView }`	旋转节点时触发
`node:rotated`	`{ e: Dom.MouseUpEvent; x: number; y: number; node: Node; view: NodeView }`	旋转节点后触发

graph.on('node:rotated', ({ node }) => {
  console.log(node.angle())
})

// 我们也可以在插件实例上监听事件
transform.on('node:rotated', ({ node }) => {
  console.log(node.angle())
})

X6

图形变换

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

使用

演示

配置

调整尺寸

调整角度

API

graph.createTransformWidget(node: Node)

graph.clearTransformWidgets()

事件