坐标变换 Transform

旋转、缩放、位移和斜切属于 Transform。将需要变换的组件放在它内部，而不是把变换属性直接传给 Text、Symbol 或 Map。

属性

属性	单位 / 默认	作用
translateX / translateY	点，默认 0	视觉位移，右和下为正
scaleX / scaleY	比例，默认 1	缩放；负数可翻转
rotation	度，默认 0	顺时针旋转
skewX / skewY	度，默认 0	斜切，范围须在 -89° 与 89° 之间
anchorX / anchorY	0…1，默认 0.5	变换锚点在自身区域中的相对位置

Transform 内多个子内容在同一区域叠放。单个子节点保留它的内容测量；视觉变换不会替父布局重新计算旋转后的包围框。

旋转一个方位图标

function main() {
  const heading = $data.current.heading;
  return <Transform rotation={heading ?? 0}
    opacity={heading === null ? 0.3 : 1}
    animations={[{property: 'rotation', duration: 0.25, curve: 'easeOut'}]}>
    <Symbol name="location.north.fill" width={28} height={36} color={$env.accent}/>
  </Transform>;
}

旋转默认按 360° 的最短路径过渡；359° 到 0° 不会绕一整圈。

变换顺序

在同一个 Transform 中，围绕锚点的固定顺序为：

缩放 → 斜切 → 旋转 → 位移

需要不同顺序时，嵌套两个 Transform。例如先把一个点移离圆心，再让整组围绕圆心旋转，可以用内层位移、外层旋转实现。

布局位置与视觉位移

• x/y：先决定节点在父区域中的布局位置。
• translateX/Y：在布局后产生视觉位移。
• anchorX/Y：决定缩放、旋转和斜切围绕哪里发生。

给旋转指针明确的宽高与锚点，能更容易判断它围绕哪里转动。变换后的内容超出父区域时，仍可能被父节点的裁切规则截掉。

地图也可以变换

原生地图可以包在 Transform 中做二维旋转、缩放与位移，但不要把地图相机朝向与二维旋转混为一谈：Map.headingPolicy 控制地图相机，Transform 改变地图视图自身的展示几何。