颜色滤镜

颜色矩阵

使用提供的颜色矩阵创建一个颜色滤镜。这里有一个用于构建颜色矩阵的 playground here.

名称	类型	描述
matrix	number[]	颜色矩阵 (5x4)
children?	ColorFilter	可选的颜色滤镜，优先应用。

tsx
import {
  Canvas,
  ColorMatrix,
  Image,
  useImage,
} from "@shopify/react-native-skia";
 
const MatrixColorFilter = () => {
  const image = useImage(require("./assets/oslo.jpg"));
 
  return (
    <Canvas style={{ flex: 1 }}>
      <Image x={0} y={0} width={256} height={256} image={image} fit="cover">
        <ColorMatrix
          matrix={[
            -0.578, 0.99, 0.588, 0, 0, 0.469, 0.535, -0.003, 0, 0, 0.015, 1.69,
            -0.703, 0, 0, 0, 0, 0, 1, 0,
          ]}
        />
      </Image>
    </Canvas>
  );
};

tsx
import {
  Canvas,
  ColorMatrix,
  Image,
  useImage,
} from "@shopify/react-native-skia";
 
const MatrixColorFilter = () => {
  const image = useImage(require("./assets/oslo.jpg"));
 
  return (
    <Canvas style={{ flex: 1 }}>
      <Image x={0} y={0} width={256} height={256} image={image} fit="cover">
        <ColorMatrix
          matrix={[
            -0.578, 0.99, 0.588, 0, 0, 0.469, 0.535, -0.003, 0, 0, 0.015, 1.69,
            -0.703, 0, 0, 0, 0, 0, 1, 0,
          ]}
        />
      </Image>
    </Canvas>
  );
};

混合颜色

使用给定的颜色和混合模式创建一个颜色滤镜。

名称	类型	描述
color	Color	Color
mode	BlendMode	请参阅混合模式。
children?	ColorFilter	可选的颜色滤镜，优先应用。

tsx
import { Canvas, BlendColor, Group, Circle } from "@shopify/react-native-skia";
 
const MatrixColorFilter = () => {
  const r = 128;
  return (
    <Canvas style={{ flex: 1 }}>
      <Group>
        <BlendColor color="cyan" mode="multiply" />
        <Circle cx={r} cy={r} r={r} color="yellow" />
        <Circle cx={2 * r} cy={r} r={r} color="magenta" />
      </Group>
    </Canvas>
  );
};

tsx
import { Canvas, BlendColor, Group, Circle } from "@shopify/react-native-skia";
 
const MatrixColorFilter = () => {
  const r = 128;
  return (
    <Canvas style={{ flex: 1 }}>
      <Group>
        <BlendColor color="cyan" mode="multiply" />
        <Circle cx={r} cy={r} r={r} color="yellow" />
        <Circle cx={2 * r} cy={r} r={r} color="magenta" />
      </Group>
    </Canvas>
  );
};

插值

创建一个颜色滤镜，该滤镜在两个其他颜色滤镜之间线性插值。

名称	类型	描述
t	number	0到1之间的值。
children	ColorFilter	用于插值的两个滤镜。

tsx
import {
  Canvas,
  ColorMatrix,
  Image,
  useImage,
  Lerp,
} from "@shopify/react-native-skia";
 
const MatrixColorFilter = () => {
  const image = useImage(require("./assets/oslo.jpg"));
 
  const blackAndWhite = [
    0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 1, 0,
  ];
  const purple = [
    1, -0.2, 0, 0, 0, 0, 1, 0, -0.1, 0, 0, 1.2, 1, 0.1, 0, 0, 0, 1.7, 1, 0,
  ];
  return (
    <Canvas style={{ flex: 1 }}>
      <Image x={0} y={0} width={256} height={256} image={image} fit="cover">
        <Lerp t={0.5}>
          <ColorMatrix matrix={purple} />
          <ColorMatrix matrix={blackAndWhite} />
        </Lerp>
      </Image>
    </Canvas>
  );
};

tsx
import {
  Canvas,
  ColorMatrix,
  Image,
  useImage,
  Lerp,
} from "@shopify/react-native-skia";
 
const MatrixColorFilter = () => {
  const image = useImage(require("./assets/oslo.jpg"));
 
  const blackAndWhite = [
    0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 1, 0,
  ];
  const purple = [
    1, -0.2, 0, 0, 0, 0, 1, 0, -0.1, 0, 0, 1.2, 1, 0.1, 0, 0, 0, 1.7, 1, 0,
  ];
  return (
    <Canvas style={{ flex: 1 }}>
      <Image x={0} y={0} width={256} height={256} image={image} fit="cover">
        <Lerp t={0.5}>
          <ColorMatrix matrix={purple} />
          <ColorMatrix matrix={blackAndWhite} />
        </Lerp>
      </Image>
    </Canvas>
  );
};

线性到sRGB Gamma

创建一个在线性颜色和 sRGB 颜色之间转换的颜色滤镜。

名称	类型	描述
children?	ColorFilter	可选的颜色滤镜，优先应用。

tsx
import {
  Canvas,
  BlendColor,
  Group,
  Circle,
  LinearToSRGBGamma,
} from "@shopify/react-native-skia";
 
const MatrixColorFilter = () => {
  const r = 128;
  return (
    <Canvas style={{ flex: 1 }}>
      <Group>
        <LinearToSRGBGamma>
          <BlendColor color="lightblue" mode="srcIn" />
        </LinearToSRGBGamma>
        <Circle cx={r} cy={r} r={r} />
      </Group>
    </Canvas>
  );
};

tsx
import {
  Canvas,
  BlendColor,
  Group,
  Circle,
  LinearToSRGBGamma,
} from "@shopify/react-native-skia";
 
const MatrixColorFilter = () => {
  const r = 128;
  return (
    <Canvas style={{ flex: 1 }}>
      <Group>
        <LinearToSRGBGamma>
          <BlendColor color="lightblue" mode="srcIn" />
        </LinearToSRGBGamma>
        <Circle cx={r} cy={r} r={r} />
      </Group>
    </Canvas>
  );
};

sRGB到线性Gamma

创建一个在 sRGB 颜色和线性颜色之间转换的颜色滤镜。

名称	类型	描述
children?	ColorFilter	可选的颜色滤镜，优先应用。

tsx
import {
  Canvas,
  BlendColor,
  Group,
  Circle,
  SRGBToLinearGamma,
} from "@shopify/react-native-skia";
 
const MatrixColorFilter = () => {
  const r = 128;
  return (
    <Canvas style={{ flex: 1 }}>
      <Group>
        <SRGBToLinearGamma>
          <BlendColor color="lightblue" mode="srcIn" />
        </SRGBToLinearGamma>
        <Circle cx={r} cy={r} r={r} />
      </Group>
    </Canvas>
  );
};

tsx
import {
  Canvas,
  BlendColor,
  Group,
  Circle,
  SRGBToLinearGamma,
} from "@shopify/react-native-skia";
 
const MatrixColorFilter = () => {
  const r = 128;
  return (
    <Canvas style={{ flex: 1 }}>
      <Group>
        <SRGBToLinearGamma>
          <BlendColor color="lightblue" mode="srcIn" />
        </SRGBToLinearGamma>
        <Circle cx={r} cy={r} r={r} />
      </Group>
    </Canvas>
  );
};