英文:
Applying tint colour on an SVG loaded with Coil Compose Android
问题
我正在尝试使用Compose、Coil 2.4和SVG扩展来应用色彩滤镜，但似乎不起作用。
SubcomposeAsyncImage(model = ImageRequest.Builder(LocalContext.current).data("https://www.svgrepo.com/show/43967/colours-samples.svg").decoderFactory(SvgDecoder.Factory()).crossfade(true).build(),contentDescription = "",colorFilter = ColorFilter.tint(Color.Red)) {when (painter.state) {is AsyncImagePainter.State.Error -> ImageErrorContent()is AsyncImagePainter.State.Loading -> ImageLoadingContent()else -> Image(painter = painter,contentDescription = contentDescription,)}}
SubcomposeAsyncImage来自Coil。
我使用SubcomposeAsyncImage而不是其他解决方案，如coil.compose.AsyncImage或androidx.compose.material.Icon与Coil的图像请求构建器，因为我需要使用不同的Composables覆盖加载和错误状态。
这是我制作的一个示例，用来展示问题。我期望下载的图像（具有黑色轮廓的SVG）应该是红色的。我尝试使用不同的混合模式，但没有成功。
有没有办法在来自URL的SVG上实现所需的着色效果？对于类似的SVG，使用Compose的Icon/Image组合是可以正常工作的。
提前感谢您的回答 
英文:
I'm trying to apply a tint colour using Compose, Coil 2.4 with SVG extension, but it does not really work.
SubcomposeAsyncImage(model = ImageRequest.Builder(LocalContext.current).data("https://www.svgrepo.com/show/43967/colours-samples.svg").decoderFactory(SvgDecoder.Factory()).crossfade(true).build(),contentDescription = "",colorFilter = ColorFilter.tint(Color.Red)) {when (painter.state) {is AsyncImagePainter.State.Error -> ImageErrorContent()is AsyncImagePainter.State.Loading -> ImageLoadingContent()else -> Image(painter = painter,contentDescription = contentDescription,)}}
SubcomposeAsyncImage is from Coil.
I am using SubcomposeAsyncImage instead of other solutions such as coil.compose.AsyncImage or androidx.compose.material.Icon with Coil's image request builder because I need to override the loading and error states with different Composables.
This is a sample I made to showcase the issue. My expectation is that the downloaded image (black-outlined SVG) should be red. I tried with different blend modes but that didn't work.
is there any way to achieve the desired tinting with SVGs coming from a URL?
It has worked fine with similar SVGs that were converted into a drawable using Compose's Icon/Image composables.
Thanks for the answers in advance
答案1
得分: 1
自从您正在使用Image()来显示异步图像的最终数据，您需要在Image composable上添加colorFilter，而不是SubcomposeAsyncImage。
带有colorFilter的示例实现：
Image(painter = painter,contentDescription = contentDescription,colorFilter = ColorFilter.tint(Color.Red))
带有colorFilter的结果图像：
<details><summary>英文:</summary>Edit:Since you are using `Image()` for showing the final data from async image,you need to add colorFilter to Image composable instead of SubcomposeAsyncImageSample implementation with colorFilter:
SubcomposeAsyncImage(
model = ImageRequest.Builder(LocalContext.current)
.data("https://www.svgrepo.com/show/43967/colours-samples.svg")
.decoderFactory(SvgDecoder.Factory())
.build(),
modifier = Modifier
.padding(horizontal = 16.dp, vertical = 4.dp)
.size(50.dp),
contentDescription = null
){
when(painter.state){
is AsyncImagePainter.State.Error -> {
// Error content
}
is AsyncImagePainter.State.Loading -> CircularProgressIndicator()
else -> Image(
painter = painter,
contentDescription = contentDescription,
colorFilter = ColorFilter.tint(Color.Red)
)
}
}
Result with colorFilter:[![enter image description here][1]][1][1]: https://i.stack.imgur.com/kaUvA.png</details>
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论