世博会-skia:过滤图像并应用彩色覆盖
世博会-skia:过滤图像并应用彩色覆盖
提问于 2022-11-08 07:13:23
我试图使用expo-skia使图像饱和，然后在其上方应用rgba颜色覆盖。我从pixi源获取饱和矩阵，它工作得很好。我不明白如何在过滤后添加颜色覆盖。
我的代码：
import {
BlendColor,
ColorMatrix,
Group,
Image
} from '@shopify/react-native-skia'
...
<Group>
<BlendColor color={color} mode='srcOver' />
<Image fit='cover' image={skiaImageSource} rect={rect}>
<ColorMatrix matrix{matrix} />
</Image>
</Group>给我一个饱和的图像，但没有任何覆盖。如果我删除<ColorMatrix matrix{matrix} />，我会看到我在图像上方的覆盖，但是图像当然还没有饱和。
我使用的包版本：
"expo": "^46.0.0"
@shopify/react-native-skia": "0.1.141"有人能帮忙吗？谢谢。
回答 1
Stack Overflow用户
发布于 2022-11-09 10:43:44
我想出了以下解决方案：
...
const canvas = useRef<SkiaView>()
const [filteredImage, setFilteredImage] = useState<SkImage>()
...
useEffect(() => {
let timerId = setTimeout(function makeSnapshot() {
if (!canvas.current) {
timerId = setTimeout(makeSnapshot, MAKE_SNAPSHOT_TIMEOUT_MS)
return
}
try {
setFilteredImage(canvas.current.makeImageSnapshot())
} catch {
timerId = setTimeout(makeSnapshot, MAKE_SNAPSHOT_TIMEOUT_MS)
}
}, MAKE_SNAPSHOT_TIMEOUT_MS)
return () => clearTimeout(timerId)
}, [])
...
return filteredImage ? (
<Canvas style={canvasStyle}>
<Rect rect={imageRect}>
<BlendColor color={overlayColor} mode='srcOver' />
<ImageShader fit='cover' image={filteredImage} rect={imageRect} />
{getFilters()}
</Rect>
</Canvas>
) : (
<Canvas ref={canvas} style={canvasStyle}>
<Image fit='cover' image={image} rect={imageRect}>
<ColorMatrix matrix={getSaturationMatrix()} />
</Image>
</Canvas>
)页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/74356897
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号