如何在 jetpack compose 中為 canvas 中的路徑繪制陰影

Question

我正在為 jetpack compose 中的頂欄繪制自定義形狀。 我想為路徑畫一個陰影。

 val topBarShapePath = Path().apply {
        moveTo(dpToPixels(leftPadding), 0f)
        lineTo(dpToPixels(leftPadding), dpToPixels(dpValue = 110.dp))
        arcTo(
                Rect(
                        dpToPixels(leftPadding),
                        dpToPixels(dpValue = 110.dp),
                        dpToPixels(dpValue = 32.dp),
                        dpToPixels(dpValue = 135.dp)
                ), -180f, -90f, true)
        lineTo(
                dpToPixels(dpValue = triangleStartX),
                dpToPixels(dpValue = rectHeight))
        lineTo(
                dpToPixels(dpValue = screenWidth),
                dpToPixels(dpValue = triangleEndY)
        )
        lineTo(dpToPixels(dpValue = screenWidth), 0f)
        lineTo(dpToPixels(dpValue = leftPadding), 0f)
    }
    
    Column(
            modifier = Modifier
                    .fillMaxWidth()
                    .height(400.dp)
                    .drawBehind {
                        val finalWidth = 40.dp.toPx()
                        drawPath(
                                topBarShapePath,
                                color = topbarcolor)
                        drawOutline(
                            outline = Outline.Generic(
                                topBarShapePath),
                            brush = Brush.horizontalGradient(),
                            style = Stroke(
                                width = 1.dp.toPx(),
                            )
                        )
                    }
    )

這是我用來繪制形狀的代碼，“drawOutline”是為了嘗試為路徑繪制陰影，但我不知道如何模糊線條。

任何幫助表示贊賞。

這是我正在尋找的結果的屏幕截圖：

Answer 1

目前無法在 Canvas 中繪制陰影，但您可以使用Modifier.shadow來繪制陰影，指定所需的自定義形狀，如下所示：

class TopBarShape(/*some parameters*/): Shape {
    override fun createOutline(
        size: Size,
        layoutDirection: LayoutDirection,
        density: Density,
    ) = Outline.Generic(Path().apply {
        // your path code
    })
}

Modifier.shadow(elevation = 10.dp, shape = TopBarShape(/*your parameters*/))

遺憾的是，此修飾符不允許進行太多修改，它是 Compose 中最受關注的問題之一，因此希望它在未來會有所改變，但由於它不在最新的1.1-beta中，因此我至少在1.2之前不會期望它。

如果您仍然認為手動繪制陰影是必需的功能，您可以創建一個功能請求。