路径

在 Skia 中，路径在语义上与 SVG 路径相同。

名称	类型	描述
path	`SkPath` 或 `string`	要绘制的路径。可以使用 SVG 路径表示法的字符串，或者使用 `Skia.Path.Make()` 创建的对象。
start	`number`	修剪路径的起始部分。值在 `[0, 1]` 范围内（默认值为 0）。
end	`number`	修剪路径的结束部分。值在 `[0, 1]` 范围内（默认值为 1）。
stroke	`StrokeOptions`	将此路径转换为描边路径的填充等效项。如果路径是发际线，则此操作将失败。 `StrokeOptions` 描述描边路径的外观。它包含三个属性： `width`、 `strokeMiterLimit` 和 `precision`。

React Native Skia 还提供了路径效果和用于动画的路径钩子。

使用 SVG 表示法

tsx
import {Canvas, Path} from "@shopify/react-native-skia";
 
const SVGNotation = () => {
  return (
    <Canvas style={{ flex: 1 }}>
      <Path
        path="M 128 0 L 168 80 L 256 93 L 192 155 L 207 244 L 128 202 L 49 244 L 64 155 L 0 93 L 88 80 L 128 0 Z"
        color="lightblue"
      />
    </Canvas>
  );
};

tsx
import {Canvas, Path} from "@shopify/react-native-skia";
 
const SVGNotation = () => {
  return (
    <Canvas style={{ flex: 1 }}>
      <Path
        path="M 128 0 L 168 80 L 256 93 L 192 155 L 207 244 L 128 202 L 49 244 L 64 155 L 0 93 L 88 80 L 128 0 Z"
        color="lightblue"
      />
    </Canvas>
  );
};

SVG Notation

使用路径对象

tsx
import {Canvas, Path, Skia} from "@shopify/react-native-skia";
 
const path = Skia.Path.Make();
path.moveTo(128, 0);
path.lineTo(168, 80);
path.lineTo(256, 93);
path.lineTo(192, 155);
path.lineTo(207, 244);
path.lineTo(128, 202);
path.lineTo(49, 244);
path.lineTo(64, 155);
path.lineTo(0, 93);
path.lineTo(88, 80);
path.lineTo(128, 0);
path.close();
 
const PathDemo = () => {
  return (
    <Canvas style={{ flex: 1 }}>
      <Path
        path={path}
        color="lightblue"
      />
    </Canvas>
  );
};

tsx
import {Canvas, Path, Skia} from "@shopify/react-native-skia";
 
const path = Skia.Path.Make();
path.moveTo(128, 0);
path.lineTo(168, 80);
path.lineTo(256, 93);
path.lineTo(192, 155);
path.lineTo(207, 244);
path.lineTo(128, 202);
path.lineTo(49, 244);
path.lineTo(64, 155);
path.lineTo(0, 93);
path.lineTo(88, 80);
path.lineTo(128, 0);
path.close();
 
const PathDemo = () => {
  return (
    <Canvas style={{ flex: 1 }}>
      <Path
        path={path}
        color="lightblue"
      />
    </Canvas>
  );
};

Path Object

修剪

tsx
import {Canvas, Path} from "@shopify/react-native-skia";
 
const SVGNotation = () => {
  return (
    <Canvas style={{ flex: 1 }}>
      <Path
        path="M 128 0 L 168 80 L 256 93 L 192 155 L 207 244 L 128 202 L 49 244 L 64 155 L 0 93 L 88 80 L 128 0 Z"
        color="lightblue"
        style="stroke"
        strokeJoin="round"
        strokeWidth={5}
        // We trim the first and last quarter of the path
        start={0.25}
        end={0.75}
      />
    </Canvas>
  );
};

tsx
import {Canvas, Path} from "@shopify/react-native-skia";
 
const SVGNotation = () => {
  return (
    <Canvas style={{ flex: 1 }}>
      <Path
        path="M 128 0 L 168 80 L 256 93 L 192 155 L 207 244 L 128 202 L 49 244 L 64 155 L 0 93 L 88 80 L 128 0 Z"
        color="lightblue"
        style="stroke"
        strokeJoin="round"
        strokeWidth={5}
        // We trim the first and last quarter of the path
        start={0.25}
        end={0.75}
      />
    </Canvas>
  );
};

Trim

填充类型

fillType 属性定义用于确定形状内部的算法。可能的值为：winding、evenOdd、inverseWinding、inverseEvenOdd。默认值为 winding。

tsx
import {Canvas, Skia, Fill, Path} from "@shopify/react-native-skia";
 
const star = () => {
  const R = 115.2;
  const C = 128.0;
  const path = Skia.Path.Make();
  path.moveTo(C + R, C);
  for (let i = 1; i < 8; ++i) {
    const a = 2.6927937 * i;
    path.lineTo(C + R * Math.cos(a), C + R * Math.sin(a));
  }
  return path;
};
 
export const HelloWorld = () => {
  const path = star();
  return (
    <Canvas style={{ flex: 1 }}>  
      <Fill color="white" />
      <Path path={path} style="stroke" strokeWidth={4} color="#3EB489"/>
      <Path path={path} color="lightblue" fillType="evenOdd" />
    </Canvas>
  );
};

tsx
import {Canvas, Skia, Fill, Path} from "@shopify/react-native-skia";
 
const star = () => {
  const R = 115.2;
  const C = 128.0;
  const path = Skia.Path.Make();
  path.moveTo(C + R, C);
  for (let i = 1; i < 8; ++i) {
    const a = 2.6927937 * i;
    path.lineTo(C + R * Math.cos(a), C + R * Math.sin(a));
  }
  return path;
};
 
export const HelloWorld = () => {
  const path = star();
  return (
    <Canvas style={{ flex: 1 }}>  
      <Fill color="white" />
      <Path path={path} style="stroke" strokeWidth={4} color="#3EB489"/>
      <Path path={path} color="lightblue" fillType="evenOdd" />
    </Canvas>
  );
};

使用 SVG 表示法​

使用路径对象​

修剪​

填充类型​

使用 SVG 表示法

使用路径对象

修剪

填充类型