如何在Jetpack Compose中实现带白色边框的倾斜椭圆形图片裁剪？

你可以通过自定义裁剪路径和Canvas绘制边框的组合来实现需求，下面是具体实现方案：

1. 生成倾斜椭圆路径 #

先定义一个函数，用来创建经过旋转的椭圆路径，可调整倾斜角度、椭圆的宽高比例：

fun getTiltedOvalPath(size: Size, tiltAngle: Float): Path {
    val path = Path()
    val center = Offset(size.width / 2, size.height / 2)
    // 可根据需求调整椭圆的宽高占比
    val radiusX = size.width * 0.45f
    val radiusY = size.height * 0.4f
    
    // 添加基础椭圆
    path.addOval(Rect(center.x - radiusX, center.y - radiusY, center.x + radiusX, center.y + radiusY))
    // 应用旋转变换实现倾斜
    val rotationMatrix = Matrix()
    rotationMatrix.postRotate(tiltAngle, center.x, center.y)
    path.transform(rotationMatrix)
    
    return path
}

2. 组合裁剪与边框绘制 #

使用Box容器嵌套图片和Canvas，实现裁剪后的图片+匹配的白色边框：

Box(
    modifier = Modifier
        .size(300.dp) // 图片容器尺寸，可按需调整
        .padding(8.dp) // 预留边框显示空间，避免被截断
) {
    // 被倾斜椭圆裁剪的图片
    Image(
        painter = painterResource(id = R.drawable.your_image), // 替换为你的图片资源
        contentDescription = "倾斜椭圆裁剪的图片",
        contentScale = ContentScale.Crop, // 保证图片填满裁剪区域
        modifier = Modifier
            .matchParentSize()
            .clipPath(getTiltedOvalPath(Size(300.dp.toPx(), 300.dp.toPx()), tiltAngle = 15f))
    )
    
    // 绘制匹配的白色边框
    Canvas(modifier = Modifier.matchParentSize()) {
        val borderPath = getTiltedOvalPath(size, tiltAngle = 15f)
        drawPath(
            path = borderPath,
            color = Color.White,
            style = Stroke(width = 8.dp.toPx()) // 调整边框粗细
        )
    }
}

3. 封装为自定义Modifier（可选） #

如果需要在多个地方复用，可将边框逻辑封装成自定义Modifier：

fun Modifier.tiltedOvalBorder(
    color: Color,
    strokeWidth: Dp,
    tiltAngle: Float,
    ovalRadiusXRatio: Float = 0.45f,
    ovalRadiusYRatio: Float = 0.4f
) = this.then(
    Modifier.drawBehind {
        val center = Offset(size.width / 2, size.height / 2)
        val radiusX = size.width * ovalRadiusXRatio
        val radiusY = size.height * ovalRadiusYRatio
        
        val path = Path().apply {
            addOval(Rect(center.x - radiusX, center.y - radiusY, center.x + radiusX, center.y + radiusY))
            val rotationMatrix = Matrix()
            rotationMatrix.postRotate(tiltAngle, center.x, center.y)
            transform(rotationMatrix)
        }
        
        drawPath(
            path = path,
            color = color,
            style = Stroke(width = strokeWidth.toPx())
        )
    }
)

使用封装后的Modifier会更简洁：

Box(
    modifier = Modifier
        .size(300.dp)
        .padding(8.dp)
) {
    Image(
        painter = painterResource(id = R.drawable.your_image),
        contentDescription = "倾斜椭圆裁剪图",
        contentScale = ContentScale.Crop,
        modifier = Modifier
            .matchParentSize()
            .clipPath(getTiltedOvalPath(Size(300.dp.toPx(), 300.dp.toPx()), 15f))
    )
    
    Box(
        modifier = Modifier
            .matchParentSize()
            .tiltedOvalBorder(Color.White, 8.dp, 15f)
    )
}

调整说明 #

• 修改tiltAngle参数可以改变椭圆的倾斜角度
• 调整radiusX、radiusY的比例可以修改椭圆的扁圆程度
• 更改Stroke的width值可以调整边框的粗细

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