顶点

绘制顶点。

名称	类型	描述
顶点	Point[]	要绘制的顶点
模式？	VertexMode	可以是 triangles、triangleStrip 或 triangleFan。默认为 triangles
索引？	number[]	构成三角形的顶点的索引。如果未提供，则将采用顶点的顺序。使用此属性可以避免重复顶点。
纹理	Point[].	纹理映射。纹理是 paint 提供的着色器。
颜色？	string[]	可选的与每个顶点关联的颜色
混合模式？	BlendMode	如果提供了 colors，则使用混合模式将颜色与 paint 混合。如果提供了颜色，则默认为 dstOver，否则默认为 srcOver。

使用纹理映射

tsx
import { Canvas, Group, ImageShader, Vertices, vec, useImage } from "@shopify/react-native-skia";
 
const VerticesDemo = () => {
  const image = useImage(require("./assets/squares.png"));
  const vertices = [vec(64, 0), vec(128, 256), vec(0, 256)];
  const colors = ["#61dafb", "#fb61da", "#dafb61"];
  const textures = [vec(0, 0), vec(0, 128), vec(64, 256)];
  if (!image) {
    return null;
  }
  return (
    <Canvas style={{ flex: 1 }}>
      {/* This is our texture */}
      <Group>
        <ImageShader
          image={image}
          tx="repeat"
          ty="repeat"
        />
        {/* Here we specified colors, the default blendMode is dstOver */}
        <Vertices vertices={vertices} colors={colors} />
        <Group transform={[{ translateX: 128 }]}>
          {/* Here we didn't specify colors, the default blendMode is srcOver */}
          <Vertices vertices={vertices} textures={textures} />
        </Group>
      </Group>
    </Canvas>
  );
};

tsx
import { Canvas, Group, ImageShader, Vertices, vec, useImage } from "@shopify/react-native-skia";
 
const VerticesDemo = () => {
  const image = useImage(require("./assets/squares.png"));
  const vertices = [vec(64, 0), vec(128, 256), vec(0, 256)];
  const colors = ["#61dafb", "#fb61da", "#dafb61"];
  const textures = [vec(0, 0), vec(0, 128), vec(64, 256)];
  if (!image) {
    return null;
  }
  return (
    <Canvas style={{ flex: 1 }}>
      {/* This is our texture */}
      <Group>
        <ImageShader
          image={image}
          tx="repeat"
          ty="repeat"
        />
        {/* Here we specified colors, the default blendMode is dstOver */}
        <Vertices vertices={vertices} colors={colors} />
        <Group transform={[{ translateX: 128 }]}>
          {/* Here we didn't specify colors, the default blendMode is srcOver */}
          <Vertices vertices={vertices} textures={textures} />
        </Group>
      </Group>
    </Canvas>
  );
};

使用索引

在下面的示例中，我们定义了四个顶点，代表矩形的四个角。然后，我们使用索引属性来定义我们想要基于这四个顶点绘制的两个三角形。

• 第一个三角形：0, 1, 2（左上角、右上角、右下角）。
• 第二个三角形：0, 2, 3（左上角、右下角、左下角）。

tsx
import { Canvas, Vertices, vec } from "@shopify/react-native-skia";
 
const IndicesDemo = () => {
  const vertices = [vec(0, 0), vec(256, 0), vec(256, 256), vec(0, 256)];
  const colors = ["#61DAFB", "#fb61da", "#dafb61", "#61fbcf"];
  const triangle1 = [0, 1, 2];
  const triangle2 = [0, 2, 3];
  const indices = [...triangle1, ...triangle2];
  return (
    <Canvas style={{ flex: 1 }}>
      <Vertices vertices={vertices} colors={colors} indices={indices} />
    </Canvas>
  );
};

tsx
import { Canvas, Vertices, vec } from "@shopify/react-native-skia";
 
const IndicesDemo = () => {
  const vertices = [vec(0, 0), vec(256, 0), vec(256, 256), vec(0, 256)];
  const colors = ["#61DAFB", "#fb61da", "#dafb61", "#61fbcf"];
  const triangle1 = [0, 1, 2];
  const triangle2 = [0, 2, 3];
  const indices = [...triangle1, ...triangle2];
  return (
    <Canvas style={{ flex: 1 }}>
      <Vertices vertices={vertices} colors={colors} indices={indices} />
    </Canvas>
  );
};