偏移

此偏移滤镜与其 SVG 对应项相同。它允许偏移过滤后的图像。

名称	类型	描述
x	`数字`	沿 X 轴的偏移量。
y	`数字`	沿 Y 轴的偏移量。
children?	`ImageFilter`	可选的先应用的图像滤镜。

示例

tsx
import { Canvas, Image, Offset, useImage, Fill } from "@shopify/react-native-skia";
 
const Filter = () => {
  const image = useImage(require("./assets/oslo.jpg"));
  if (!image) {
    return null;
  }
  return (
    <Canvas style={{ width: 256, height: 256 }}>
      <Fill color="lightblue" />
      <Image
        image={image}
        x={0}
        y={0}
        width={256}
        height={256}
        fit="cover"
      >
        <Offset x={64} y={64} />
      </Image>
    </Canvas>
  );
};

tsx
import { Canvas, Image, Offset, useImage, Fill } from "@shopify/react-native-skia";
 
const Filter = () => {
  const image = useImage(require("./assets/oslo.jpg"));
  if (!image) {
    return null;
  }
  return (
    <Canvas style={{ width: 256, height: 256 }}>
      <Fill color="lightblue" />
      <Image
        image={image}
        x={0}
        y={0}
        width={256}
        height={256}
        fit="cover"
      >
        <Offset x={64} y={64} />
      </Image>
    </Canvas>
  );
};

示例​

示例