使用expo-skia实现图片饱和度滤镜及RGBA颜色覆盖的问题

问题出在组件的层级和渲染顺序上，ColorMatrix仅对其直接包裹的子元素应用颜色变换，你需要先处理图片饱和度，再在处理后的图片上叠加颜色层，正确的做法是将处理后的图片与颜色覆盖层放在同一个容器中，按顺序渲染。

正确代码示例 #

import { Image, Rect, Group, ColorMatrix } from '@shopify/react-native-skia';
import { useImage } from '@shopify/react-native-skia';

export default function ImageFilterWithOverlay() {
  const image = useImage(require('./your-image-path.png'));
  const imgWidth = 300;
  const imgHeight = 300;

  // 从PIXI获取的饱和度矩阵（示例为饱和度提升至2.0）
  const saturationMatrix = [
    0.3086, 0.6094, 0.0820, 0, 0,
    0.3086, 0.6094, 0.0820, 0, 0,
    0.3086, 0.6094, 0.0820, 0, 0,
    0, 0, 0, 1, 0,
  ];

  if (!image) return null;

  return (
    <Group>
      {/* 第一步：应用饱和度矩阵处理图片 */}
      <ColorMatrix matrix={saturationMatrix}>
        <Image 
          image={image} 
          x={0} 
          y={0} 
          width={imgWidth} 
          height={imgHeight} 
        />
      </ColorMatrix>
      {/* 第二步：叠加RGBA颜色覆盖层 */}
      <Rect 
        x={0} 
        y={0} 
        width={imgWidth} 
        height={imgHeight} 
        fill="rgba(100, 180, 250, 0.4)" // 自定义RGBA值
        blendMode="normal" // 可根据需求更换混合模式，如multiply/overlay等
      />
    </Group>
  );
}

关键说明 #

1. 层级顺序：先渲染经过ColorMatrix处理的图片，再渲染颜色覆盖层，确保颜色层叠加在处理后的图片上方
2. 混合模式：通过blendMode参数调整颜色与图片的融合效果，normal为基础叠加，其他模式可实现不同的滤镜质感
3. 尺寸匹配：保证颜色矩形的宽高与图片完全一致，避免出现错位或遗漏区域

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