图像着色器

图像

返回一个具有指定平铺的图像作为着色器。它将使用立方采样。

名称	类型	描述
image	SkImage	图像实例。
tx?	TileMode	可以是 clamp、repeat、mirror 或 decal。
ty?	TileMode	可以是 clamp、repeat、mirror 或 decal。
fit?	Fit	计算变换矩阵以适应由 fitRect 定义的矩形。请参阅图像。
rect?	SkRect	通过 fit 属性计算变换矩阵的目标矩形。
transform?	Transforms2d	请参阅变换。
sampling?	Sampling	用于对图像进行采样的方法。请参阅（采样选项）。

示例

tsx
import {
  Canvas,
  Circle,
  ImageShader,
  Skia,
  Shader,
  useImage
} from "@shopify/react-native-skia";
 
const ImageShaderDemo = () => {
  const image = useImage(require("../../assets/oslo.jpg"));
  if (image === null) {
    return null;
  }
  return (
    <Canvas style={{ flex: 1 }}>
      <Circle cx={128} cy={128} r={128}>
        <ImageShader
          image={image}
          fit="cover"
          rect={{ x: 0, y: 0, width: 256, height: 256 }}
        />
      </Circle>
    </Canvas>
  );
};

tsx
import {
  Canvas,
  Circle,
  ImageShader,
  Skia,
  Shader,
  useImage
} from "@shopify/react-native-skia";
 
const ImageShaderDemo = () => {
  const image = useImage(require("../../assets/oslo.jpg"));
  if (image === null) {
    return null;
  }
  return (
    <Canvas style={{ flex: 1 }}>
      <Circle cx={128} cy={128} r={128}>
        <ImageShader
          image={image}
          fit="cover"
          rect={{ x: 0, y: 0, width: 256, height: 256 }}
        />
      </Circle>
    </Canvas>
  );
};

结果