混合与颜色

混合着色器

返回一个使用 BlendMode 组合给定着色器的着色器。

名称	类型	描述
mode	BlendMode	请参阅混合模式。
children	ReactNode	要混合的着色器

示例

tsx
import React from "react";
import {
  Canvas,
  Rect,
  Turbulence,
  Skia,
  Shader,
  Fill,
  RadialGradient,
  Blend,
  vec
} from "@shopify/react-native-skia";
 
export const BlendDemo = () => {
  return (
    <Canvas style={{ flex: 1 }}>
      <Rect x={0} y={0} width={256} height={256}>
        <Blend mode="difference">
          <RadialGradient
            r={128}
            c={vec(128, 128)}
            colors={["blue", "yellow"]}
          />
          <Turbulence freqX={0.05} freqY={0.05} octaves={4} />
        </Blend>
      </Rect>
    </Canvas>
  );
};

tsx
import React from "react";
import {
  Canvas,
  Rect,
  Turbulence,
  Skia,
  Shader,
  Fill,
  RadialGradient,
  Blend,
  vec
} from "@shopify/react-native-skia";
 
export const BlendDemo = () => {
  return (
    <Canvas style={{ flex: 1 }}>
      <Rect x={0} y={0} width={256} height={256}>
        <Blend mode="difference">
          <RadialGradient
            r={128}
            c={vec(128, 128)}
            colors={["blue", "yellow"]}
          />
          <Turbulence freqX={0.05} freqY={0.05} octaves={4} />
        </Blend>
      </Rect>
    </Canvas>
  );
};

结果

颜色着色器

返回具有给定颜色的着色器。

名称	类型	描述
color	string	颜色

示例

tsx
import React from "react";
import {
  Canvas,
  Skia,
  Fill,
  ColorShader
} from "@shopify/react-native-skia";
 
export const BlendDemo = () => {
  return (
    <Canvas style={{ flex: 1 }}>
      <Fill>
        <ColorShader color="lightBlue" />
      </Fill>
    </Canvas>
  );
};

tsx
import React from "react";
import {
  Canvas,
  Skia,
  Fill,
  ColorShader
} from "@shopify/react-native-skia";
 
export const BlendDemo = () => {
  return (
    <Canvas style={{ flex: 1 }}>
      <Fill>
        <ColorShader color="lightBlue" />
      </Fill>
    </Canvas>
  );
};

结果