logo

X6

  • Tutorials
  • API
  • Examples
  • Q&A
  • Change Log
  • XFlow
  • Productsantv logo arrow
  • 2.x
  • start
    • Introduction
    • Quick Start
  • component
    • XFlowGraph Canvas
    • Background
    • Grid
    • Clipboard Copy and Paste
    • History Undo Redo
    • Minimap
    • Snapline Alignment Lines
    • Transform
    • Control Controller
  • Hook
    • useGraphInstance
    • useGraphStore
    • useGraphEvent
    • useDnd
    • useClipboard
    • useExport
    • useHistory
    • useKeyboard
  • Store

Transform

Previous
Snapline Alignment Lines
Next
Control Controller

Resource

Ant Design
Galacea Effects
Umi-React Application Framework
Dumi-Component doc generator
ahooks-React Hooks Library

Community

Ant Financial Experience Tech
seeconfSEE Conf-Experience Tech Conference

Help

GitHub
StackOverflow

more productsMore Productions

Ant DesignAnt Design-Enterprise UI design language
yuqueYuque-Knowledge creation and Sharing tool
EggEgg-Enterprise-class Node development framework
kitchenKitchen-Sketch Tool set
GalaceanGalacean-Interactive solution
xtechLiven Experience technology
© Copyright 2025 Ant Group Co., Ltd..备案号:京ICP备15032932号-38

Loading...

Adjusting Node Size and Node Rotation Angle

Basic Usage

Note

The <Transform /> component can only be used properly within the <XFlow /> component.

Use the <Transform /> component to enable node adjustment capabilities.

<XFlow>
...
<Transform resizing rotating />
</XFlow>

By setting the resizing and rotating properties of the Transform component to true, you can enable the ability to adjust the size and rotation angle of nodes. You can also configure the resizing and rotating properties.

API

Transform

Parameter NameDescriptionTypeDefault Value
resizingConfiguration for adjusting node sizeTransform.Resizing | boolean-
rotatingConfiguration for adjusting node angleTransform.Rotating | boolean-
Transform 配置
minWidth
1
maxWidth
100
minHeight
1
maxHeight
1
grid
15