多边形

矩形

绘制一个矩形。

名称	类型	描述
x	number	X 坐标。
y	number	number
矩形的宽度。	number	width
height	number	矩形的高度。

tsx
import { Canvas, Rect } from "@shopify/react-native-skia";
 
const RectDemo = () => {
  return (
    <Canvas style={{ flex: 1 }}>
      <Rect x={0} y={0} width={256} height={256} color="lightblue" />
    </Canvas>
  );
};

tsx
import { Canvas, Rect } from "@shopify/react-native-skia";
 
const RectDemo = () => {
  return (
    <Canvas style={{ flex: 1 }}>
      <Rect x={0} y={0} width={256} height={256} color="lightblue" />
    </Canvas>
  );
};

圆角矩形

绘制一个圆角矩形。

名称	类型	描述
x	number	X 坐标。
y	number	number
矩形的宽度。	number	width
height	number	矩形的高度。
r?	number 或 Vector	角半径。如果指定，则默认为 ry，否则为 0。

tsx
import { Canvas, RoundedRect } from "@shopify/react-native-skia";
 
const RectDemo = () => {
  return (
    <Canvas style={{ flex: 1 }}>
      <RoundedRect
        x={0}
        y={0}
        width={256}
        height={256}
        r={25}
        color="lightblue"
      />
    </Canvas>
  );
};

tsx
import { Canvas, RoundedRect } from "@shopify/react-native-skia";
 
const RectDemo = () => {
  return (
    <Canvas style={{ flex: 1 }}>
      <RoundedRect
        x={0}
        y={0}
        width={256}
        height={256}
        r={25}
        color="lightblue"
      />
    </Canvas>
  );
};

使用自定义半径

您可以为每个角设置不同的角半径。

tsx
import { Canvas, RoundedRect } from "@shopify/react-native-skia";
 
const RectDemo = () => {
  const size = 256;
  const r = size * 0.2;
  const rrct = {
    rect: { x: 0, y: 0, width: size, height: size },
    topLeft: { x: 0, y: 0 },
    topRight: { x: r, y: r },
    bottomRight: { x: 0, y: 0 },
    bottomLeft: { x: r, y: r },
  };
  return (
    <Canvas style={{ width: size, height: size }}>
      <RoundedRect
        rect={rrct}
        color="lightblue"
      />
    </Canvas>
  );
};

tsx
import { Canvas, RoundedRect } from "@shopify/react-native-skia";
 
const RectDemo = () => {
  const size = 256;
  const r = size * 0.2;
  const rrct = {
    rect: { x: 0, y: 0, width: size, height: size },
    topLeft: { x: 0, y: 0 },
    topRight: { x: r, y: r },
    bottomRight: { x: 0, y: 0 },
    bottomLeft: { x: r, y: r },
  };
  return (
    <Canvas style={{ width: size, height: size }}>
      <RoundedRect
        rect={rrct}
        color="lightblue"
      />
    </Canvas>
  );
};

差异矩形

绘制两个矩形之间的差异。

名称	类型	描述
outer	RectOrRRect	外部矩形。
inner	RectOrRRect	内部矩形。

tsx
import { Canvas, DiffRect, rect, rrect } from "@shopify/react-native-skia";
 
const DRectDemo = () => {
  const outer = rrect(rect(0, 0, 256, 256), 25, 25);
  const inner = rrect(rect(50, 50, 256 - 100, 256 - 100), 50, 50);
  return (
    <Canvas style={{ flex: 1 }}>
      <DiffRect inner={inner} outer={outer} color="lightblue" />
    </Canvas>
  );
};

tsx
import { Canvas, DiffRect, rect, rrect } from "@shopify/react-native-skia";
 
const DRectDemo = () => {
  const outer = rrect(rect(0, 0, 256, 256), 25, 25);
  const inner = rrect(rect(50, 50, 256 - 100, 256 - 100), 50, 50);
  return (
    <Canvas style={{ flex: 1 }}>
      <DiffRect inner={inner} outer={outer} color="lightblue" />
    </Canvas>
  );
};

线

在两点之间绘制一条线。

名称	类型	描述
p1	Point	起始点。
p2	Point	终点。

tsx
import { Canvas, Line, vec } from "@shopify/react-native-skia";
 
const LineDemo = () => {
  return (
    <Canvas style={{ flex: 1 }}>
      <Line
        p1={vec(0, 0)}
        p2={vec(256, 256)}
        color="lightblue"
        style="stroke"
        strokeWidth={4}
      />
    </Canvas>
  );
};

tsx
import { Canvas, Line, vec } from "@shopify/react-native-skia";
 
const LineDemo = () => {
  return (
    <Canvas style={{ flex: 1 }}>
      <Line
        p1={vec(0, 0)}
        p2={vec(256, 256)}
        color="lightblue"
        style="stroke"
        strokeWidth={4}
      />
    </Canvas>
  );
};

点

绘制点，并可选地绘制它们之间的连接。

名称	类型	描述
points	Point	要绘制的点。
mode	PointMode	应如何连接点。可以是 points（不连接），lines（连接成对的点），或 polygon（连接线条）。默认为 points。

tsx
import { Canvas, Points, vec } from "@shopify/react-native-skia";
 
const PointsDemo = () => {
  const points = [
    vec(128, 0),
    vec(168, 80),
    vec(256, 93),
    vec(192, 155),
    vec(207, 244),
    vec(128, 202),
    vec(49, 244),
    vec(64, 155),
    vec(0, 93),
    vec(88, 80),
    vec(128, 0),
  ];
  return (
    <Canvas style={{ flex: 1 }}>
      <Points
        points={points}
        mode="polygon"
        color="lightblue"
        style="stroke"
        strokeWidth={4}
      />
    </Canvas>
  );
};

tsx
import { Canvas, Points, vec } from "@shopify/react-native-skia";
 
const PointsDemo = () => {
  const points = [
    vec(128, 0),
    vec(168, 80),
    vec(256, 93),
    vec(192, 155),
    vec(207, 244),
    vec(128, 202),
    vec(49, 244),
    vec(64, 155),
    vec(0, 93),
    vec(88, 80),
    vec(128, 0),
  ];
  return (
    <Canvas style={{ flex: 1 }}>
      <Points
        points={points}
        mode="polygon"
        color="lightblue"
        style="stroke"
        strokeWidth={4}
      />
    </Canvas>
  );
};