android - Jetpack Compose Canvas BlendMode.SRC_IN 使背景变得透明
问题描述
我正在尝试使用 BlendMode.SRC_IN 在 PNG 图像(具有透明背景)上添加叠加颜色,但背景变为黑色而不是设置的背景颜色,就好像也屏蔽了背景像素一样。
@Composable
fun Icon(
fraction: Float,
image: ImageAsset,
defaultColor: Color = Color(0xFFEEEEEE),
progressColor: Color = Color(0xFF888888),
size: Dp = image.width.dp
) {
Box(modifier = Modifier.size(size = size)) {
Canvas(modifier = Modifier.fillMaxSize()) {
drawImage(
image = image,
dstSize = IntSize(
width = size.toIntPx(),
height = size.toIntPx()
),
colorFilter = ColorFilter.tint(
color = defaultColor
),
blendMode = BlendMode.Src
)
drawIntoCanvas {
val paint = Paint().apply {
color = progressColor
blendMode = BlendMode.SrcIn
}
it.restore()
it.drawRect(
rect = Rect(
offset = Offset.Zero,
size = Size(
width = size.toPx() * fraction,
height = size.toPx()
)
),
paint = paint
)
it.save()
}
}
}
}
这是当我在一个喜欢Icon()
的顶部排列多个时的Screen(color = Color.WHITE)
样子,
Surface(color = Color.White) {
Row {
listOf(
R.drawable.anemo,
R.drawable.cryo,
R.drawable.dendro,
R.drawable.electro,
R.drawable.geo,
R.drawable.hydro,
R.drawable.pyro
).forEachIndexed { index, imageRes ->
val from = 100f/7 * index
val to = 100f/7 * (index + 1)
val fraction = when {
progress > to -> 1f
progress > from -> (progress - from)/(to - from)
else -> 0f
}
Icon(
fraction = fraction,
image = imageResource(id = imageRes),
size = 50.dp
)
}
}
}
我在这里做错了吗?
这是我正在尝试的Github 存储库。
解决方案
graphicsLayer
在我的情况下,我可以通过添加如下修饰符来解决黑色像素应该是透明像素的问题:
Box(
modifier = Modifier.fillMaxSize()
) {
Canvas(modifier = Modifier
.fillMaxSize()
.graphicsLayer(alpha = 0.99f)
) {
drawRect(
color = Color.Black,
size = size,
blendMode = BlendMode.Xor
)
drawCircle(
color = Color.Black,
radius = 300f,
blendMode = BlendMode.Xor
)
}
}
没有修饰符:
带修饰符:
我从这里得到了这个想法:https ://gist.github.com/nadewad/14f04c788aea43bd6d31d94cd8100ab5 (请注意drawLayer
已重命名为graphicsLayer
.
推荐阅读
- python-3.x - 生成带有 utf-8 值的链接并将其传递给 Flask 路由
- python - 使用键盘模块时检测按键释放
- flutter - 为 Flutter 中的所有按钮设置 fontFamily
- php - Codeigniter:我可以将数组传递给 $ci->db->select() 吗?
- algorithm - 解释为什么这个算法是 n^2
- flutter - Firestore 中等效的 SQL IN 运算符
- django - 未创建类表(未在管理员中看到)
- ios - 从 Xcode 项目构建两个输出
- javascript - 将选择推送到另一个阵列进行存储
- android - 如何在 Android Studio 中制作自定义通知声音?