在 Compose 中绘制复杂 UI 时最常遇到的问题是：坐标系到底怎么变？ 许多人第一次用旋转、平移、缩放时会被“原点不对”“pivot 默认值”“顺序错误”这些坑困扰。不过，下面通过程序化的排版，把这些痛点一一拆解。并给出清晰的代码示例，让你在自定义绘制时少走弯路。

1️⃣ 先把“坐标系”搞清楚

每次调用 translate/rotate/scale 并不是在移动某个图形，而是在改变后续绘制指令所在的坐标系。如果忽略了这一点，就会出现看似正确却位置错位的现象。其实，

A. 把原点移到你关心的位置

说到举例。画一个从表盘中心开始、旋转并在末端绘制小圆圈的指针。

Modifier.drawBehind {
val center = Offset
val handLength = 80.dp.toPx
translate {
rotate {
drawLine(
color = Color,start = Offset.Zero,end = Offset,strokeWidth = 4.dp.toPx
)
drawCircle(
color = Color。radius = 10.dp.toPx,center = Offset
)
}
}
}

PITFALL: 如果直接写成 drawLine,后面再 rotate,那么所有坐标都会围绕组件左上角旋转，导致指针偏离中心。

B. 让旋转围绕你想要的点

Description:

• PIVOT 默认是 DrawScope 的中心，而不是。不过，
• If 已经用 translate 把局部原点移到目标位置，请显式传入 pivot = Offset.Zero.

Modifier.drawBehind {
val centerX = size.width / 2
val centerY = size.height / 2
rotate(
degrees = angle。
pivot = Offset
) {
// 在此块中所有绘图都以该 pivot 为中心
drawRect
}
}

2️⃣ 顺序决定结果

"先平移，再旋转" 与 "先旋转，再平移" 的视觉效果完全不同。这是因为矩阵乘法不是交换律。

A. 原地旋转

Modifier.drawBehind {
val centerX = size.width / 2
val centerY = size.height / 2
translate {
rotate {
drawRect(
color=Color.Red,topLeft=Offset,-20.dp.toPx),size=Size,40.dp.toPx)
)
}
}
}

B. 公转

Modifier.drawBehind {
val centerX = size.width / 2
val orbitRadius = 100.dp.toPx
translate { // 移到圆心
rotate { // 顺时针旋转
translate { // 沿 X 平移半径距离
drawCircle。center=Offset.Zero)
}
}
}
}

PITFALL:

• If you swap translate & rotate order you get an orbit that starts at a different point.
• The rotation pivot matters – always double-check it.

3️⃣ 同时做多重变换：withTransform

Makes nested transforms clearer and reduces boilerplate.

Modifier.drawBehind {
withTransform({
translate
rotate
scale
}) {
drawCircle,center=Offset.Zero)
}
}

User Pain Point:

"I keep creating many Modifier chains and lose track of which transform applies where." WithTransform groups m logically: first coordinate change description;second drawing commands.

4️⃣ 裁剪与变换分离

• CUTS WHAT CAN BE DRAWN.
• DRAWS WHATEVER BUT WITHIN CUT AREA.

Modifier.drawBehind {
clipRect(
left =0f,top =$size.height/4,right =$size.width,bottom =$size.height*3/4
) {
drawCircle(
color =$Color.Green,radius=$size.minDimension/6。center=$size.center
)
}
}

PITFALL: Using clipPath on complex paths can dramatically increase CPU/GPU load – prefer clipRect unless shape is truly irregular.

5️⃣ 性能注意事项

• 每帧创建尽量少的新对象（如 avoid new Color or Path in loops).
• 利用 : cache static parts like paths or gradients.
• 裁剪方法越简单越好；复杂方法需开启 anti‑aliasing 或使用 GPU 加速。
• 避免不必要的 recomposition 与 layout passes – use remember{} around heavy objects.
• 动画中只更新需要变化的数据，保持其它状态不变。

Cache 常用对象示例：

val gradientBrush by remember { mutableStateOf) }
Modifier.drawWithCache{
onDrawBehind{
// heavy brush used only once per frame if cached
drawRect
}
}

再看注意。若你曾在 View 层手写 Matrix，那么这里说的一切就是同一套数学模型，只是 Compose 把它封装为更友好的 API。