模糊

创建一个图像滤镜，通过单独的 X 和 Y 西格玛值模糊其输入。当模糊内核超出输入图像时，将使用提供的平铺模式。

名称	类型	描述
blur	number 或 Vector	高斯西格玛模糊值
mode?	TileMode	mirror、repeat、clamp 或 decal (默认为 decal)。
children?	ImageFilter	可选的图像滤镜，首先应用。

简单模糊

tsx
import { Canvas, Blur, Image, useImage } from "@shopify/react-native-skia";
 
const BlurImageFilter = () => {
  const image = useImage(require("./assets/oslo.jpg"));
  if (!image) {
    return null;
  }
  return (
    <Canvas style={{ flex: 1 }}>
      <Image
        x={0}
        y={0}
        width={256}
        height={256}
        image={image}
        fit="cover"
      >
        <Blur blur={4} />
      </Image>
    </Canvas>
  );
};

tsx
import { Canvas, Blur, Image, useImage } from "@shopify/react-native-skia";
 
const BlurImageFilter = () => {
  const image = useImage(require("./assets/oslo.jpg"));
  if (!image) {
    return null;
  }
  return (
    <Canvas style={{ flex: 1 }}>
      <Image
        x={0}
        y={0}
        width={256}
        height={256}
        image={image}
        fit="cover"
      >
        <Blur blur={4} />
      </Image>
    </Canvas>
  );
};

使用 mode="clamp"