我想创建一个结果如下的组件,假设叶子是一个现有的ImageVector.

enter image description here

代码如下:

@Composable
fun MyIcon(
    modifier: Modifier = Modifier,
) {

    Box(modifier = modifier) {
        Image(imageVector = leafImageVector)
        Ring( // the part that need to be removed from Image
            modifier = Modifier
                .align(Alignment.BottomEnd)
                .padding(
                    end = 4.dp,
                    bottom = 8.dp
                ),
        )
        Badge(
            modifier = Modifier
                .align(Alignment.BottomEnd)
                .padding(
                    end = 8.dp,
                    bottom = 8.dp
                ),
            badgeColor = badgeColor
        )
    }
}

@Composable
private fun Ring(
    modifier: Modifier = Modifier,
) {

    Canvas(
        modifier = modifier.size(8.dp),
        onDraw = {

            val strokeWidth = 8f
            drawCircle(
                color = Color.Black, // Change this to Transparent or Unspecified does not help
                radius = 12f,
                style = Stroke(
                    width = strokeWidth
                )
            )

        }
    )
}

@Composable
fun Badge(
    modifier: Modifier = Modifier,
    badgeColor: Color,
) {
    Box(
        modifier = modifier
            .size(8.dp)
            .clip(CircleShape)
            .background(
                badgeColor
            )
    )
}

我做到了.黑色部分是我需要从图像中删除的部分

enter image description here

推荐答案

你可以使用Modifier.drawWithContent里面的BlendMod来移除合成图的某些部分,它不一定是图像就可以工作.您可以从任何合成物中剪裁或剪切.

How to clip or cut a Composable?

enter image description here

@Preview
@Composable
fun ImageEraseTest() {
    Column(
        modifier = Modifier.fillMaxSize().padding(32.dp)
    ) {
        Image(
            modifier = Modifier
                .size(80.dp)
                .border(2.dp, Color.Red)
                .graphicsLayer {
                    compositingStrategy = CompositingStrategy.Offscreen
                }
                .drawWithContent {
                    val radius = 16.dp.toPx()
                    val badgeRadius = 12.dp.toPx()

                    val center = Offset(
                        size.width - radius ,
                        size.height - radius
                    )
                    
                    // Destination
                    drawContent()
                    
                    // Source
                    drawCircle(
                        color = Color.Transparent,
                        radius = radius,
                        center = center,
                        blendMode = BlendMode.Clear
                    )

                    drawCircle(
                        color = Color.Red,
                        radius = badgeRadius,
                        center = center
                    )
                },
            imageVector = Icons.Default.AccountCircle,
            contentDescription = null
        )
    }
}

如果你愿意,你也可以像上面的例子一样画红色的圆圈.

Android相关问答推荐

保护所有程序包文件和类

如何更新Kotlin中的显示?

穿戴与iPhone连接的安卓操作系统

react 本机生成失败,出现异常.错误:无法确定';<;宏/>;的类型

DocumentFile.canWrite()、DocumentFile.Existes()-使用本地内置手机存储(而不是云)时性能较差(占用太多CPU时间)

使用Android Jetpack Compose,为子Composable定义ViewModel是不是一种糟糕的做法?

判断文本视图是否为单行

没有打开历史记录的活动意向 Select 器完成调用活动

为什么我在 android 中使用 TabLayout 时无法启动我的 Activity?

NFC getNdefMessage 在 Android 13 上写入标签后返回 null

Android apk 不工作

Jetpack Compose 部分或开放侧边框

react 从输入中找到路径'lib/arm64-v8a/libfbjni.so'的本机2个文件

喷气背包组成影子奇怪的行为

如何在行/列/卡片 compose 中添加左边框

无法为:app@debug/compileClasspath解析依赖项com.github.dhaval2404:imagepicker-support:1.7.1

无法解析依赖项'com.github.smarteist:autoimageslider:1.4.0-appcompat'

如何在 TextInputEdit 中调整可绘制对象的大小

这是 let 函数的正确用法吗?

如何优化 JetPack Compose 列表性能?