路径效果

离散路径效果

创建一个效果，将路径分割成一定长度的线段，并使端点在原始路径的基础上随机移动，最大偏移量为指定值。

名称	类型	描述
length	number	子线段的长度。
deviation	number	端点移动的限制。
seed	number	修改随机性。有关详细信息，请参阅 SkDiscretePathEffect.h。
children?	PathEffect	可选的路径效果，用于应用。

示例

tsx
import {Canvas, DiscretePathEffect, Path} from "@shopify/react-native-skia";
 
const logo = "M256 128.015C256 111.057 234.762...";
 
const Discrete = () => {
  return (
    <Canvas style={{ flex: 1 }}>
      <Path path={logo} color="#61DAFB">
        <DiscretePathEffect length={10} deviation={2} />
      </Path>
    </Canvas>
  );
};

tsx
import {Canvas, DiscretePathEffect, Path} from "@shopify/react-native-skia";
 
const logo = "M256 128.015C256 111.057 234.762...";
 
const Discrete = () => {
  return (
    <Canvas style={{ flex: 1 }}>
      <Path path={logo} color="#61DAFB">
        <DiscretePathEffect length={10} deviation={2} />
      </Path>
    </Canvas>
  );
};

结果

虚线路径效果

创建一个向路径添加虚线的效果。

名称	类型	描述
intervals	number[]	偶数个条目，偶数索引指定“开”间隔的长度，奇数索引指定“关”间隔的长度。
phase	number	进入间隔数组的偏移量。默认为 0。
children?	PathEffect	可选的路径效果，用于应用。

示例

tsx
import {Canvas, DashPathEffect, Path} from "@shopify/react-native-skia";
 
const logo = "M256 128.015C256 111.057 234.762...";
 
const Discrete = () => {
  return (
    <Canvas style={{ flex: 1 }}>
      <Path path={logo} color="#61DAFB" style="stroke" strokeWidth={4}>
        <DashPathEffect intervals={[4, 4]} />
      </Path>
    </Canvas>
  );
};

tsx
import {Canvas, DashPathEffect, Path} from "@shopify/react-native-skia";
 
const logo = "M256 128.015C256 111.057 234.762...";
 
const Discrete = () => {
  return (
    <Canvas style={{ flex: 1 }}>
      <Path path={logo} color="#61DAFB" style="stroke" strokeWidth={4}>
        <DashPathEffect intervals={[4, 4]} />
      </Path>
    </Canvas>
  );
};

结果

圆角路径效果

创建一个可以将尖角转换为圆角的效果。

名称	类型	描述
r	number	半径。
children?	PathEffect	可选的路径效果，用于应用。

示例

tsx
import {Canvas, CornerPathEffect, Rect} from "@shopify/react-native-skia";
 
 
const Discrete = () => {
  return (
    <Canvas style={{ flex: 1 }}>
      <Rect
        x={64}
        y={16}
        width={128}
        height={256 - 16}
        color="#61DAFB"
      >
        <CornerPathEffect r={64} />
      </Rect>
    </Canvas>
  );
};

tsx
import {Canvas, CornerPathEffect, Rect} from "@shopify/react-native-skia";
 
 
const Discrete = () => {
  return (
    <Canvas style={{ flex: 1 }}>
      <Rect
        x={64}
        y={16}
        width={128}
        height={256 - 16}
        color="#61DAFB"
      >
        <CornerPathEffect r={64} />
      </Rect>
    </Canvas>
  );
};

结果

路径 1D 路径效果

通过复制指定的路径来创建虚线。

名称	类型	描述
path	PathDef	要复制（虚线）的路径
advance	number	路径实例之间的空间
phase	number	沿路径的距离（mod advance）作为其初始位置
style	Path1DEffectStyle	如何在每个点转换路径（基于当前位置和切线）
children?	PathEffect	可选的路径效果，用于应用。

示例

tsx
import {Canvas, Path1DPathEffect, Path} from "@shopify/react-native-skia";
 
const logo = "M256 128.015C256 111.057 234.762...";
 
const Path1D = () => {
  return (
    <Canvas style={{ flex: 1 }}>
      <Path path={logo} color="#61DAFB" style="stroke" strokeWidth={15}>
        <Path1DPathEffect
          path="M -10 0 L 0 -10, 10 0, 0 10 Z"
          advance={20}
          phase={0}
          style="rotate"
        />
      </Path>
    </Canvas> 
  );
};

tsx
import {Canvas, Path1DPathEffect, Path} from "@shopify/react-native-skia";
 
const logo = "M256 128.015C256 111.057 234.762...";
 
const Path1D = () => {
  return (
    <Canvas style={{ flex: 1 }}>
      <Path path={logo} color="#61DAFB" style="stroke" strokeWidth={15}>
        <Path1DPathEffect
          path="M -10 0 L 0 -10, 10 0, 0 10 Z"
          advance={20}
          phase={0}
          style="rotate"
        />
      </Path>
    </Canvas> 
  );
};

结果

路径 2D 路径效果

使用矩阵定义网格，将指定的路径印章以填充形状。

名称	类型	描述
path	PathDef	要使用的路径
matrix	SkMatrix	要应用的矩阵
children?	PathEffect	可选的路径效果，用于应用

示例

tsx
import {Canvas, Path2DPathEffect, Path, processTransform2d} from "@shopify/react-native-skia";
 
const logo = "M256 128.015C256 111.057 234.762...";
 
const Path2D = () => {
  return (
    <Canvas style={{ flex: 1 }}>
      <Path path={logo} color="#61DAFB" style="stroke" strokeWidth={15}>
        <Path2DPathEffect
          path="M -10 0 L 0 -10, 10 0, 0 10 Z"
          matrix={processTransform2d([{ scale: 40 }])}
        />
      </Path>
    </Canvas> 
  );
};

tsx
import {Canvas, Path2DPathEffect, Path, processTransform2d} from "@shopify/react-native-skia";
 
const logo = "M256 128.015C256 111.057 234.762...";
 
const Path2D = () => {
  return (
    <Canvas style={{ flex: 1 }}>
      <Path path={logo} color="#61DAFB" style="stroke" strokeWidth={15}>
        <Path2DPathEffect
          path="M -10 0 L 0 -10, 10 0, 0 10 Z"
          matrix={processTransform2d([{ scale: 40 }])}
        />
      </Path>
    </Canvas> 
  );
};

结果

线条 2D 路径效果

使用矩阵定义网格，将指定的路径印章以填充形状。

名称	类型	描述
width	PathDef	要使用的路径
matrix	IMatrix	要应用的矩阵
children?	PathEffect	可选的路径效果，用于应用

示例

tsx
import {Canvas, Line2DPathEffect, Path, processTransform2d} from "@shopify/react-native-skia";
 
const logo = "M256 128.015C256 111.057 234.762...";
 
const Line2D = () => {
  return (
    <Canvas style={{ flex: 1 }}>
      <Path path={logo} color="#61DAFB"  style="stroke" strokeWidth={15}>
        <Line2DPathEffect
          width={0}
          matrix={processTransform2d([{ scale: 8 }])}
        />
      </Path>
    </Canvas> 
  );
};

tsx
import {Canvas, Line2DPathEffect, Path, processTransform2d} from "@shopify/react-native-skia";
 
const logo = "M256 128.015C256 111.057 234.762...";
 
const Line2D = () => {
  return (
    <Canvas style={{ flex: 1 }}>
      <Path path={logo} color="#61DAFB"  style="stroke" strokeWidth={15}>
        <Line2DPathEffect
          width={0}
          matrix={processTransform2d([{ scale: 8 }])}
        />
      </Path>
    </Canvas> 
  );
};

结果