如何在Jetpack Compose Canvas中绘制轮廓化勒洛三角形？

你的当前代码使用cornerPathEffect给等边三角形添加圆角，这只能得到普通的圆角三角形，而非勒洛三角形。勒洛三角形的正确构造方式是以等边三角形的三个顶点为圆心，边长为半径，分别绘制对应边的圆弧，三个圆弧组合起来形成封闭路径。

实现步骤： #

• 计算等边三角形的三个顶点坐标，确保图形居中在Canvas内
• 以每个顶点为圆心，三角形边长为半径，绘制对应边的圆弧
• 组合三个圆弧形成完整的勒洛三角形路径
• 使用drawOutline或drawPath绘制轮廓

完整代码实现： #

@Composable
fun ReuleauxTriangle() {
    Canvas(
        modifier = Modifier
            .fillMaxWidth()
            .aspectRatio(1f)
    ) {
        val canvasSize = size.minDimension
        val center = Offset(size.width / 2, size.height / 2)
        // 等边三角形的边长（取Canvas最小边的90%，留出边距）
        val sideLength = canvasSize * 0.9f
        // 等边三角形的高
        val triangleHeight = (sideLength * Math.sqrt(3.0) / 2).toFloat()

        // 计算三个顶点坐标
        val topVertex = Offset(center.x, center.y - triangleHeight / 2)
        val bottomRightVertex = Offset(center.x + sideLength / 2, center.y + triangleHeight / 2)
        val bottomLeftVertex = Offset(center.x - sideLength / 2, center.y + triangleHeight / 2)

        val reuleauxPath = Path().apply {
            // 从顶部顶点开始，以右下角顶点为圆心画圆弧到左下角顶点
            arcTo(
                rect = Rect(
                    bottomRightVertex.x - sideLength,
                    bottomRightVertex.y - sideLength,
                    bottomRightVertex.x + sideLength,
                    bottomRightVertex.y + sideLength
                ),
                startAngleDegrees = 120f,
                sweepAngleDegrees = 120f,
                forceMoveTo = false
            )
            // 以左下角顶点为圆心画圆弧到顶部顶点
            arcTo(
                rect = Rect(
                    bottomLeftVertex.x - sideLength,
                    bottomLeftVertex.y - sideLength,
                    bottomLeftVertex.x + sideLength,
                    bottomLeftVertex.y + sideLength
                ),
                startAngleDegrees = 240f,
                sweepAngleDegrees = 120f,
                forceMoveTo = false
            )
            // 以顶部顶点为圆心画圆弧到右下角顶点，封闭路径
            arcTo(
                rect = Rect(
                    topVertex.x - sideLength,
                    topVertex.y - sideLength,
                    topVertex.x + sideLength,
                    topVertex.y + sideLength
                ),
                startAngleDegrees = 0f,
                sweepAngleDegrees = 120f,
                forceMoveTo = false
            )
            close()
        }

        drawIntoCanvas { canvas ->
            canvas.drawOutline(
                outline = Outline.Generic(reuleauxPath),
                paint = Paint().apply {
                    color = Color.Black
                    style = PaintingStyle.Stroke // 设置为轮廓绘制
                    strokeWidth = 8f // 调整轮廓粗细
                }
            )
        }
    }
}

// 保留你的Path辅助函数
fun Path.moveTo(offset: Offset) = moveTo(offset.x, offset.y)
fun Path.lineTo(offset: Offset) = lineTo(offset.x, offset.y)

代码说明： #

• 先计算Canvas的中心和等边三角形的顶点，确保图形居中
• arcTo方法的参数中，rect是圆弧所在的外接正方形，startAngleDegrees是圆弧的起始角度，sweepAngleDegrees是圆弧的扫过角度（勒洛三角形每个圆弧都是120度）
• 通过PaintingStyle.Stroke设置为轮廓绘制，调整strokeWidth可以改变轮廓的粗细

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