Jetpack Compose：带内外圆角的六边形图片边框实现求助

我尝试为Compose中的ImageView实现边框内外均带圆角的六边形效果，但当前实现的边框只有外圆角，内部图片裁剪边角为直角，未达到预期。

尝试的代码 #

HexagonShape 实现 #

class HexagonShape : Shape {

    override fun createOutline(
        size: Size,
        layoutDirection: LayoutDirection,
        density: Density
    ): Outline {
        return Outline.Generic(
            path = drawCustomHexagonPath(size)
        )
    }
}

fun drawCustomHexagonPath(size: Size): Path {
    return Path().apply {
        val radius = min(size.width / 2f, size.height / 2f)
        customHexagon(radius, size)
    }
}

fun Path.customHexagon(radius: Float, size: Size) {
    val triangleHeight = (sqrt(3.0) * radius / 2)
    val centerX = size.width / 2
    val centerY = size.height / 2

    moveTo(centerX, centerY + radius)
    lineTo((centerX - triangleHeight).toFloat(), centerY + radius/2)
    lineTo((centerX - triangleHeight).toFloat(), centerY - radius/2)
    lineTo(centerX, centerY - radius)
    lineTo((centerX + triangleHeight).toFloat(), centerY - radius/2)
    lineTo((centerX + triangleHeight).toFloat(), centerY + radius/2)

    close()
}

Composable 调用代码 #

@Composable
fun HexagonImg() {
    val myShape = HexagonShape()
    Image(
        painter = painterResource(id = R.drawable.ic_launcher_foreground),
        contentDescription = "My Hexagon Image",
        contentScale = ContentScale.Crop,
        modifier = Modifier
            .wrapContentSize()
            .graphicsLayer {
                shadowElevation = 8.dp.toPx()
                shape = myShape
                clip = true
            }
            .background(color = Color.Cyan)
            .drawBehind {
                drawPath(
                    path = drawCustomHexagonPath(size),
                    color = Color.Red,
                    style = Stroke(
                        width = 10.dp.toPx(),
                        pathEffect = PathEffect.cornerPathEffect(40f)
                    )
                )
            }
    )
}

当前效果与预期效果 #

• 当前效果：
• 预期效果：

问题原因与解决方案 #

问题核心 #

1. 原六边形路径由直线绘制，无圆角属性，导致图片裁剪后边角为直角。
2. drawBehind 中使用 cornerPathEffect 仅能为描边外角添加圆角，无法处理内角，且裁剪路径本身无圆角，内外效果不一致。

修改后的完整实现 #

带圆角的六边形路径实现

import kotlin.math.*
import androidx.compose.ui.geometry.*
import androidx.compose.ui.graphics.Path
import androidx.compose.ui.graphics.Shape
import androidx.compose.ui.graphics.Outline
import androidx.compose.ui.unit.LayoutDirection
import androidx.compose.ui.unit.Density

class HexagonShape(private val cornerRadius: Float) : Shape {

    override fun createOutline(
        size: Size,
        layoutDirection: LayoutDirection,
        density: Density
    ): Outline {
        return Outline.Generic(
            path = drawCustomHexagonPath(size, cornerRadius)
        )
    }
}

fun drawCustomHexagonPath(size: Size, cornerRadius: Float): Path {
    return Path().apply {
        val radius = min(size.width / 2f, size.height / 2f)
        customHexagon(radius, size, cornerRadius)
    }
}

fun Path.customHexagon(radius: Float, size: Size, cornerRadius: Float) {
    val triangleHeight = (sqrt(3.0) * radius / 2).toFloat()
    val centerX = size.width / 2
    val centerY = size.height / 2

    // 计算六边形六个顶点坐标
    val points = listOf(
        Offset(centerX, centerY + radius),
        Offset(centerX - triangleHeight, centerY + radius/2),
        Offset(centerX - triangleHeight, centerY - radius/2),
        Offset(centerX, centerY - radius),
        Offset(centerX + triangleHeight, centerY - radius/2),
        Offset(centerX + triangleHeight, centerY + radius/2)
    )

    // 起始点：第一个顶点向下偏移圆角半径
    moveTo(points[0].x, points[0].y - cornerRadius)

    // 遍历每个顶点，绘制直线+圆角弧
    for (i in points.indices) {
        val current = points[i]
        val next = points[(i + 1) % points.size]
        
        // 计算边的方向向量与角度
        val dx = next.x - current.x
        val dy = next.y - current.y
        val angle = atan2(dy, dx)
        
        // 圆角起始点：从当前顶点沿边方向移动圆角半径
        val startOffset = Offset(
            current.x + cos(angle) * cornerRadius,
            current.y + sin(angle) * cornerRadius
        )
        // 圆角结束点：从下一个顶点沿反向移动圆角半径
        val prevAngle = atan2(current.y - next.y, current.x - next.x)
        val endOffset = Offset(
            next.x + cos(prevAngle) * cornerRadius,
            next.y + sin(prevAngle) * cornerRadius
        )

        lineTo(startOffset.x, startOffset.y)
        // 绘制圆角弧
        arcTo(
            rect = Rect(
                left = current.x - cornerRadius,
                top = current.y - cornerRadius,
                right = current.x + cornerRadius,
                bottom = current.y + cornerRadius
            ),
            startAngleDegrees = (angle * 180 / PI).toFloat() - 90,
            sweepAngleDegrees = 60f,
            forceMoveTo = false
        )
    }

    close()
}

修改后的Composable函数

import androidx.compose.foundation.Image
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.layout.wrapContentSize
import androidx.compose.material3.MaterialTheme
import androidx.compose.runtime.Composable
import androidx.compose.ui.Modifier
import androidx.compose.ui.draw.drawBehind
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.graphics.Path
import androidx.compose.ui.graphics.drawscope.Stroke
import androidx.compose.ui.res.painterResource
import androidx.compose.ui.tooling.preview.Preview
import androidx.compose.ui.unit.dp
import com.example.yourpackage.R

@Composable
fun HexagonImg() {
    val cornerRadius = 40.dp.toPx()
    val borderWidth = 10.dp.toPx()
    val myShape = HexagonShape(cornerRadius)

    Image(
        painter = painterResource(id = R.drawable.ic_launcher_foreground),
        contentDescription = "My Hexagon Image",
        contentScale = ContentScale.Crop,
        modifier = Modifier
            .wrapContentSize()
            .padding(borderWidth) // 留出边框绘制空间，避免被裁剪
            .graphicsLayer {
                shadowElevation = 8.dp.toPx()
                shape = myShape
                clip = true
            }
            .background(Color.Cyan)
            .drawBehind {
                // 绘制带圆角的六边形边框，路径尺寸需包含边框宽度
                val borderPath = drawCustomHexagonPath(
                    size = Size(size.width + borderWidth, size.height + borderWidth),
                    cornerRadius = cornerRadius + borderWidth / 2
                )
                drawPath(
                    path = borderPath,
                    color = Color.Red,
                    style = Stroke(width = borderWidth)
                )
            }
    )
}

@Preview
@Composable
fun HexagonImgPreview() {
    MaterialTheme {
        HexagonImg()
    }
}

修改说明 #

1. 路径添加圆角：通过arcTo为六边形每个顶点绘制圆角弧，让裁剪后的图片边角也带圆角。
2. 边框路径适配：边框路径尺寸放大以包含边框宽度，同时圆角半径同步增大，保证内外圆角视觉一致。
3. padding预留空间：添加padding(borderWidth)避免边框被Image的裁剪区域遮挡。

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