如何在jetpack compose中为画布中的路径绘制阴影

问题描述 投票:0回答:2

我正在为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”是尝试为路径绘制阴影,但我不知道如何模糊线条。

任何帮助表示赞赏。

这是我正在寻找的结果的屏幕截图: Image of result

android canvas draw android-jetpack-compose shadow
2个回答
9
投票

目前无法在 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

如果您仍然认为手动绘制阴影是必需的功能,您可以

创建功能请求


0
投票
我也遇到了同样的问题,但不幸的是菲尔·杜霍夫的答案对我不起作用,因为我在油漆上有一个

cornerPathEffect

,它不会应用于阴影。

我发现了这篇精彩的

文章/代码,它提供了一个可组合函数,可以为其内容的所有非透明像素绘制阴影。值得一看。

© www.soinside.com 2019 - 2024. All rights reserved.