如何在 Jetpack Compose 中使用 Canvas 绘制一个只有一个圆角的矩形？

Question

我目前正在开展一个项目，我正在使用 Jetpack Compose 通过 Canvas 绘制一些自定义形状。具体来说，我需要绘制只有一个圆角的矩形。我知道我可以使用

drawRoundRect

来绘制带圆角的矩形，但它似乎只允许我一次设置多个角的半径。

任何帮助或指导将不胜感激！提前谢谢你。

Answer 1

您可以使用

RoundRect

功能，您可以在其中指定每个角的角半径。

类似的东西：

    Canvas(modifier= Modifier.fillMaxSize()){

        val cornerRadius = CornerRadius(25f, 25f)
        val path = Path().apply {
            addRoundRect(
                RoundRect(
                    rect = Rect(
                        offset = Offset(0f, 0f),
                        size = Size(100f, 100f),
                    ),
                    topLeft = cornerRadius, //just an example
                )
            )
        }
        drawPath(path, color = Color.Red)

    }

Answer 2

您可以使用 Jetpack Compose 中的 Canvas 绘制一个只有一个圆角的矩形，方法是使用定义矩形形状的路径创建自定义形状。

这里有一个示例代码片段，展示了如何绘制一个只有一个圆角的矩形：

  import androidx.compose.ui.geometry.CornerRadius
import androidx.compose.ui.geometry.Rect
import androidx.compose.ui.graphics.Canvas
import androidx.compose.ui.graphics.Path
import androidx.compose.ui.graphics.drawscope.DrawScope
import androidx.compose.ui.graphics.drawscope.Stroke
import androidx.compose.ui.unit.Dp
import androidx.compose.ui.unit.dp

// Function to draw a rectangle with one rounded corner
fun DrawScope.drawRoundedRectWithOneCorner(
    rect: Rect,
    cornerRadius: Dp,
    roundedCorner: RoundedCorner
) {
    val path = Path().apply {
        val radii = CornerRadius(cornerRadius.toPx()).toRadii()
        when (roundedCorner) {
            RoundedCorner.TopLeft -> addRoundRect(rect, radii, Path.Direction.CW)
            RoundedCorner.TopRight -> addRoundRect(rect, radii, Path.Direction.CW)
            RoundedCorner.BottomLeft -> addRoundRect(rect, radii, Path.Direction.CW)
            RoundedCorner.BottomRight -> addRoundRect(rect, radii, Path.Direction.CW)
        }
    }
    drawPath(path, color = androidx.compose.ui.graphics.Color.Black, style = Stroke(width = 2.dp.toPx()))
}

// Enum to specify which corner should be rounded
enum class RoundedCorner {
    TopLeft,
    TopRight,
    BottomLeft,
    BottomRight
}

要使用这个函数，只需在你的 Canvas 中调用它：

Canvas(modifier = Modifier.size(100.dp)) {
    drawRoundedRectWithOneCorner(
        rect = Rect(0f, 0f, size.width, size.height),
        cornerRadius = 16.dp,
        roundedCorner = RoundedCorner.TopLeft
    )
}

在这个例子中，我们绘制一个矩形，大小为 100dp x 100dp，角半径为 16dp。我们通过传入 RoundedCorner.TopLeft 作为最后一个参数来指定我们希望左上角圆角。您可以通过传入不同的 RoundedCorner 枚举值来更改圆角。

Answer 3

RoundedCornerShape 函数具有接受 dp、Float 或百分比形式的角参数的重载

fun RoundedCornerShape(
    topStart: Dp = 0.dp,
    topEnd: Dp = 0.dp,
    bottomEnd: Dp = 0.dp,
    bottomStart: Dp = 0.dp
) = RoundedCornerShape(
    topStart = CornerSize(topStart),
    topEnd = CornerSize(topEnd),
    bottomEnd = CornerSize(bottomEnd),
    bottomStart = CornerSize(bottomStart)
)

/**
 * Creates [RoundedCornerShape] with sizes defined in pixels.
 */
fun RoundedCornerShape(
    topStart: Float = 0.0f,
    topEnd: Float = 0.0f,
    bottomEnd: Float = 0.0f,
    bottomStart: Float = 0.0f
) = RoundedCornerShape(
    topStart = CornerSize(topStart),
    topEnd = CornerSize(topEnd),
    bottomEnd = CornerSize(bottomEnd),
    bottomStart = CornerSize(bottomStart)
)

你可以从形状中绘制轮廓

val shape = RoundedCornerShape(topStart = 20.dp)
val density = LocalDensity.current
val layoutDirection = LocalLayoutDirection.current

画布内部

drawOutline(
    shape.createOutline(
        size = size,
        density = density,
        layoutDirection = layoutDirection
    ),
    color = Color.Red
)