背景滤镜

在 Skia 中，背景滤镜等同于它们的 CSS 对应物。它们允许您将诸如模糊之类的图像滤镜应用于 剪切遮罩后面的区域。背景滤镜扩展了 Group 组件。来自 group 组件的所有属性都可以应用于背景滤镜。

剪切遮罩将用于限制背景滤镜的区域。

背景滤镜

将图像滤镜应用于画布后面或定义的剪切遮罩后面的区域。背景滤镜的第一个子元素是要使用的图像滤镜。来自 group 组件的所有属性都可以应用于背景滤镜。

示例

将黑白颜色矩阵应用于剪切区域

tsx
import {
  Canvas,
  BackdropFilter,
  Image,
  ColorMatrix,
  useImage,
} from "@shopify/react-native-skia";
 
// https://kazzkiq.github.io/svg-color-filter/
const BLACK_AND_WHITE = [
  0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 1, 0,
];
 
const Filter = () => {
  const image = useImage(require("./assets/oslo.jpg"));
 
  return (
    <Canvas style={{ width: 256, height: 256 }}>
      <Image image={image} x={0} y={0} width={256} height={256} fit="cover" />
      <BackdropFilter
        clip={{ x: 0, y: 128, width: 256, height: 128 }}
        filter={<ColorMatrix matrix={BLACK_AND_WHITE} />}
      />
    </Canvas>
  );
};

tsx
import {
  Canvas,
  BackdropFilter,
  Image,
  ColorMatrix,
  useImage,
} from "@shopify/react-native-skia";
 
// https://kazzkiq.github.io/svg-color-filter/
const BLACK_AND_WHITE = [
  0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 1, 0,
];
 
const Filter = () => {
  const image = useImage(require("./assets/oslo.jpg"));
 
  return (
    <Canvas style={{ width: 256, height: 256 }}>
      <Image image={image} x={0} y={0} width={256} height={256} fit="cover" />
      <BackdropFilter
        clip={{ x: 0, y: 128, width: 256, height: 128 }}
        filter={<ColorMatrix matrix={BLACK_AND_WHITE} />}
      />
    </Canvas>
  );
};

背景模糊

创建背景模糊。来自 group 组件的所有属性都可以应用于背景滤镜。

名称	类型	描述
blur	number	模糊半径

示例

tsx
import {
  Canvas,
  Fill,
  Image,
  BackdropBlur,
  useImage,
} from "@shopify/react-native-skia";
 
const Filter = () => {
  const image = useImage(require("./assets/oslo.jpg"));
 
  return (
    <Canvas style={{ width: 256, height: 256 }}>
      <Image image={image} x={0} y={0} width={256} height={256} fit="cover" />
      <BackdropBlur blur={4} clip={{ x: 0, y: 128, width: 256, height: 128 }}>
        <Fill color="rgba(0, 0, 0, 0.2)" />
      </BackdropBlur>
    </Canvas>
  );
};

tsx
import {
  Canvas,
  Fill,
  Image,
  BackdropBlur,
  useImage,
} from "@shopify/react-native-skia";
 
const Filter = () => {
  const image = useImage(require("./assets/oslo.jpg"));
 
  return (
    <Canvas style={{ width: 256, height: 256 }}>
      <Image image={image} x={0} y={0} width={256} height={256} fit="cover" />
      <BackdropBlur blur={4} clip={{ x: 0, y: 128, width: 256, height: 128 }}>
        <Fill color="rgba(0, 0, 0, 0.2)" />
      </BackdropBlur>
    </Canvas>
  );
};