位移贴图

位移贴图图像滤镜与其 SVG对应项相同。子图像的像素值用于空间位移被过滤的图像。转换公式如下：

P'(x,y) ← P( x + scale * (XC(x,y) - 0.5), y + scale * (YC(x,y) - 0.5))

P'(x,y) ← P( x + scale * (XC(x,y) - 0.5), y + scale * (YC(x,y) - 0.5))

其中 P(x,y) 是子图像，P'(x,y) 是目标图像。XC(x,y) 和 YC(x,y) 是由 channelX 和 channelY 指定的通道的组件值。

名称	类型	描述
channelX	`颜色通道`	沿 X 轴使用的颜色通道。可能的值为 `r`、`g`、`b` 或 `a`
channelY	`颜色通道`	沿 Y 轴使用的颜色通道。可能的值为 `r`、`g`、`b` 或 `a`
scale	`数字`	要使用的位移缩放因子
children?	`图像滤镜`	可选的图像滤镜，先应用。

示例

在下面的示例中，我们使用 Perlin 噪声作为位移贴图。

tsx
import { Canvas, Image, Turbulence, DisplacementMap, useImage } 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 }}>
      <Image
        image={image}
        x={0}
        y={0}
        width={256}
        height={256}
        fit="cover"
      >
        <DisplacementMap channelX="g" channelY="a" scale={20}>
          <Turbulence freqX={0.01} freqY={0.05} octaves={2} seed={2} />
        </DisplacementMap>
      </Image>
    </Canvas>
  );
};

tsx
import { Canvas, Image, Turbulence, DisplacementMap, useImage } 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 }}>
      <Image
        image={image}
        x={0}
        y={0}
        width={256}
        height={256}
        fit="cover"
      >
        <DisplacementMap channelX="g" channelY="a" scale={20}>
          <Turbulence freqX={0.01} freqY={0.05} octaves={2} seed={2} />
        </DisplacementMap>
      </Image>
    </Canvas>
  );
};

示例​

示例