Transform 变换属性

Transform 控制元素的定位、缩放、旋转等变换。

字段定义

interface Transform {
  x?: number | string;     // x 坐标，绝对值或百分比 "50%"
  y?: number | string;     // y 坐标，绝对值或百分比 "30%"
  width?: number | string; // 宽度
  height?: number | string; // 高度
  scale?: number | [number, number]; // 缩放：统一缩放或 [x, y] 分开缩放
  rotation?: number;       // 旋转角度（度）
  skew?: [number, number]; // 倾斜 [x, y]
  anchor?: Anchor;         // 锚点位置
}

type Anchor =
  | 'center'
  | 'top-left' | 'top' | 'top-right'
  | 'left' | 'right'
  | 'bottom-left' | 'bottom' | 'bottom-right';

示例

{
  "transform": {
    "x": "50%",
    "y": 100,
    "width": 800,
    "height": 600,
    "scale": 1.5,
    "rotation": 45,
    "anchor": "center"
  }
}

字段说明

字段	类型	必填	默认值	描述
x	number \| string	否	-	x 坐标，支持绝对值或百分比
y	number \| string	否	-	y 坐标，支持绝对值或百分比
width	number \| string	否	-	宽度
height	number \| string	否	-	高度
scale	number \| [number, number]	否	1	缩放，统一缩放或 [x, y] 分开缩放
rotation	number	否	0	旋转角度（度）
skew	[number, number]	否	[0, 0]	倾斜 [x, y]
anchor	Anchor	否	center	锚点位置

量纲单位

x/y: 像素值或百分比
width/height: 像素值或百分比
scale: 数字（统一缩放）或 [scaleX, scaleY]
rotation: 角度（度）
skew: [x, y] 倾斜
anchor: 锚点位置

锚点位置

锚点	描述
center	元素中心点
top	元素顶部中心点
bottom	元素底部中心点
left	元素左侧中心点
right	元素右侧中心点
top-left	元素左上角
top-right	元素右上角
bottom-left	元素左下角
bottom-right	元素右下角

相对定位

通过锚点定位，可以简化布局逻辑：

{
  "transform": {
    "x": "50%",
    "y": 0,
    "anchor": "left"
  }
}

元素左边缘与水平中心对齐。

百分比尺寸

优先使用百分比设置尺寸：

{
  "transform": {
    "x": 0,
    "y": 0,
    "width": "50%",
    "height": "50%"
  }
}

元素占屏幕 50% 宽度和 50% 高度

缩放

统一缩放: 直接设置数字
分开缩放: 设置数组 [scaleX, scaleY]

{
  "scale": 1.5
}

或

{
  "scale": [1.2, 0.8]
}

旋转

支持正负值：

{
  "rotation": 45
}

顺时针旋转 45 度

{
  "rotation": -90
}

逆时针旋转 90 度

倾斜

设置数组 [skewX, skewY]：

{
  "skew": [0.1, 0]
}

或

{
  "skew": [0.2, -0.3]
}

Transform 变换属性

On this page