渐变

通用属性

以下是所有渐变组件通用的属性。

名称	类型	描述
颜色	string[]	在起始和结束之间分布的颜色。
位置？	number[]	颜色的相对位置。如果提供，则必须与颜色长度相同。
模式？	TileMode	可以是 clamp、repeat、mirror 或 decal。
标志？	number	默认情况下，渐变将在未预乘的空间中插值其颜色，然后预乘每个结果。通过将其设置为 1，渐变将首先预乘其颜色，然后在它们之间进行插值。
变换？	Transforms2d	请参阅变换。

线性渐变

返回一个着色器，该着色器在两个指定的点之间生成线性渐变。

名称	类型	描述
开始	Point	渐变的起始位置。
结束	Point	Point

示例

tsx
import React from "react";
import {
  Canvas,
  Rect,
  LinearGradient,
  Skia,
  Shader,
  vec
} from "@shopify/react-native-skia";
 
export const LinearGradientDemo = () => {
  return (
    <Canvas style={{ flex: 1 }}>
      <Rect x={0} y={0} width={256} height={256}>
        <LinearGradient
          start={vec(0, 0)}
          end={vec(256, 256)}
          colors={["blue", "yellow"]}
        />
      </Rect>
    </Canvas>
  );
};

tsx
import React from "react";
import {
  Canvas,
  Rect,
  LinearGradient,
  Skia,
  Shader,
  vec
} from "@shopify/react-native-skia";
 
export const LinearGradientDemo = () => {
  return (
    <Canvas style={{ flex: 1 }}>
      <Rect x={0} y={0} width={256} height={256}>
        <LinearGradient
          start={vec(0, 0)}
          end={vec(256, 256)}
          colors={["blue", "yellow"]}
        />
      </Rect>
    </Canvas>
  );
};

结果

径向渐变

返回一个着色器，该着色器在给定中心和半径的情况下生成径向渐变。

名称	类型	描述
c	Point	渐变的中心。
r	number	渐变的半径。

示例

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

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

结果

两点锥形渐变

返回一个着色器，该着色器在给定两个圆的情况下生成锥形渐变。

名称	类型	描述
开始	Point	起始圆的中心。
startR	number	起始圆的半径。
结束	number	结束圆的中心。
endR	number	结束圆的半径。

示例

tsx
import React from "react";
import {
  Canvas,
  Rect,
  TwoPointConicalGradient,
  Skia,
  Shader,
  vec
} from "@shopify/react-native-skia";
 
export const TwoPointConicalGradientDemo = () => {
  return (
    <Canvas style={{ flex: 1 }}>
      <Rect x={0} y={0} width={256} height={256}>
        <TwoPointConicalGradient
          start={vec(128, 128)}
          startR={128}
          end={vec(128, 16)}
          endR={16}
          colors={["blue", "yellow"]}
        />
      </Rect>
    </Canvas>
  );
};

tsx
import React from "react";
import {
  Canvas,
  Rect,
  TwoPointConicalGradient,
  Skia,
  Shader,
  vec
} from "@shopify/react-native-skia";
 
export const TwoPointConicalGradientDemo = () => {
  return (
    <Canvas style={{ flex: 1 }}>
      <Rect x={0} y={0} width={256} height={256}>
        <TwoPointConicalGradient
          start={vec(128, 128)}
          startR={128}
          end={vec(128, 16)}
          endR={16}
          colors={["blue", "yellow"]}
        />
      </Rect>
    </Canvas>
  );
};

结果

扫描渐变

返回一个着色器，该着色器在给定中心的情况下生成扫描渐变。

名称	类型	描述
c	Point	渐变的中心
开始？	number	起始角度（以度为单位）（默认为 0）。
结束？	number	结束角度（以度为单位）（默认为 360）。

示例

tsx
import React from "react";
import {
  Canvas,
  Rect,
  SweepGradient,
  Skia,
  Shader,
  vec
} from "@shopify/react-native-skia";
 
export const SweepGradientDemo = () => {
  return (
    <Canvas style={{ flex: 1 }}>
      <Rect x={0} y={0} width={256} height={256}>
        <SweepGradient
          c={vec(128, 128)}
          colors={["cyan", "magenta", "yellow", "cyan"]}
        />
      </Rect>
    </Canvas>
  );
};

tsx
import React from "react";
import {
  Canvas,
  Rect,
  SweepGradient,
  Skia,
  Shader,
  vec
} from "@shopify/react-native-skia";
 
export const SweepGradientDemo = () => {
  return (
    <Canvas style={{ flex: 1 }}>
      <Rect x={0} y={0} width={256} height={256}>
        <SweepGradient
          c={vec(128, 128)}
          colors={["cyan", "magenta", "yellow", "cyan"]}
        />
      </Rect>
    </Canvas>
  );
};

结果