Android Compose：绘制透明矩形分割Box时旋转后高度异常问题

你遇到的核心问题是旋转后的矩形尺寸不足以覆盖Box的完整高度，再加上旋转中心点和初始位置的设置，导致视觉上没法填满Box上下边缘。

当你把高度等于Box高度的矩形旋转35°时，这个矩形在垂直方向的有效覆盖长度会变成原高度乘以cos(35°)（三角函数投影原理），自然比Box实际高度短，所以上下会留空。另外，你以原始矩形的中心为旋转轴，旋转后矩形的上下两端会向内收缩，进一步导致顶部和底部无法贴合Box边缘。

调整矩形的初始尺寸和位置，让旋转后的矩形能完全贯穿Box的上下。具体修改如下：

Box(
    modifier = Modifier
        .height(35.dp)
        .fillMaxWidth()
        .clip(shape = RoundedCornerShape(8.dp))
        .drawWithLayer {
            drawContent()
            // 计算旋转后能覆盖Box高度的矩形所需高度：原高度 / cos(35°)
            val requiredHeight = size.height / kotlin.math.cos(Math.toRadians(35.0)).toFloat()
            val rect = Rect(
                offset = Offset(
                    x = size.width / 2f,
                    // 向上偏移，让旋转后的矩形顶部对齐Box顶部
                    y = (size.height - requiredHeight) / 2f
                ),
                size = Size(width = 10.dp.value, height = requiredHeight),
            )
            rotate(
                degrees = 35F,
                pivot = Offset(size.width / 2f, size.height / 2f) // 以Box中心为旋转轴，保证分割线居中
            ) {
                drawRect(
                    blendMode = BlendMode.SrcOut,
                    color = Color.Transparent,
                    topLeft = rect.topLeft,
                    size = rect.size,
                )
            }
        }
) {
    // Box内部内容
}

• 计算所需高度：通过size.height / cos(35°)得到的矩形高度，旋转后在垂直方向的投影刚好等于Box高度，确保能完全覆盖上下边缘
• 调整Y轴偏移：把矩形向上偏移(size.height - requiredHeight)/2，让旋转后的矩形顶部对齐Box顶部、底部对齐Box底部
• 旋转轴心改为Box中心：保证旋转后的分割线始终处于Box的水平中心位置，不会偏移

调试时可以先把color改成黑色，确认矩形完全覆盖后再换回透明色，这样更容易观察效果。

内容的提问来源于stack exchange，提问作者Funnycuni