Skip to main content

​
PathCommand

Path command constants for defining custom vector paths. 
const PathCommand = {
  Close: 0,
  MoveTo: 1,
  LineTo: 2,
  CubicTo: 3,
} as const;

type PathCommandType = (typeof PathCommand)[keyof typeof PathCommand];

​
Values

​
Close
0
Closes the current path by drawing a straight line from the current position back to the starting point. Consumes 0 points.
​
MoveTo
1
Moves the current position to a new point without drawing. Consumes 1 point (x, y).
​
LineTo
2
Draws a straight line from the current position to the specified point. Consumes 1 point (x, y).
​
CubicTo
3
Draws a cubic Bézier curve from the current position using two control points and an end point. Consumes 3 points (control1, control2, end).

​
Usage

import { Shape, Path, PathCommand } from 'react-thorvg-fiber';

function Triangle() {
  return (
    <Shape fill={[255, 200, 0, 255]}>
      <Path
        commands={[
          PathCommand.MoveTo,  // Move to starting point
          PathCommand.LineTo,  // Draw to second point
          PathCommand.LineTo,  // Draw to third point
          PathCommand.Close,   // Close the triangle
        ]}
        points={[
          { x: 50, y: 10 },   // Starting point
          { x: 90, y: 80 },   // Second point
          { x: 10, y: 80 },   // Third point
        ]}
      />
    </Shape>
  );
}

​
FillRule

Fill rule constants for determining shape interiors. 
const FillRule = {
  NonZero: 0,
  EvenOdd: 1,
} as const;

type FillRuleType = (typeof FillRule)[keyof typeof FillRule];

​
Values

​
NonZero
0
Non-zero winding rule. Determines whether a point is inside the shape by drawing a ray from the point to infinity and counting the number of times the path crosses the ray. If the count is non-zero, the point is inside.
​
EvenOdd
1
Even-odd rule. Determines whether a point is inside the shape by drawing a ray from the point to infinity and counting the crossings. If the count is odd, the point is inside; if even, it’s outside.

​
Usage

import { Shape, Path, PathCommand, FillRule } from 'react-thorvg-fiber';

function NonZeroFill() {
  return (
    <Shape
      fill={[255, 100, 100, 255]}
      fillRule={FillRule.NonZero}
    >
      <Path
        commands={[
          PathCommand.MoveTo,
          PathCommand.LineTo,
          PathCommand.LineTo,
          PathCommand.LineTo,
          PathCommand.Close,
        ]}
        points={[
          { x: 50, y: 10 },
          { x: 90, y: 90 },
          { x: 10, y: 40 },
          { x: 90, y: 40 },
        ]}
      />
    </Shape>
  );
}
The difference between NonZero and EvenOdd is most visible in self-intersecting paths, where EvenOdd creates “holes” at intersections.

​
StrokeCap

Stroke cap constants for line endpoint styling. 
const StrokeCap = {
  Butt: 0,
  Round: 1,
  Square: 2,
} as const;

type StrokeCapType = (typeof StrokeCap)[keyof typeof StrokeCap];

​
Values

​
Butt
0
Butt cap - The stroke ends exactly at the endpoint with no extension.
​
Round
1
Round cap - The stroke extends beyond the endpoint with a rounded semicircle whose diameter equals the stroke width.
​
Square
2
Square cap - The stroke extends beyond the endpoint with a square projection whose length equals half the stroke width.

​
Usage

import { Shape, Path, PathCommand, StrokeCap } from 'react-thorvg-fiber';

function ButtCapLine() {
  return (
    <Shape
      stroke={[0, 0, 0, 255]}
      strokeWidth={10}
      strokeCap={StrokeCap.Butt}
    >
      <Path
        commands={[PathCommand.MoveTo, PathCommand.LineTo]}
        points={[
          { x: 20, y: 50 },
          { x: 80, y: 50 },
        ]}
      />
    </Shape>
  );
}

​
StrokeJoin

Stroke join constants for corner styling where path segments meet. 
const StrokeJoin = {
  Bevel: 0,
  Round: 1,
  Miter: 2,
} as const;

type StrokeJoinType = (typeof StrokeJoin)[keyof typeof StrokeJoin];

​
Values

​
Bevel
0
Bevel join - Corners are cut off with a straight edge connecting the outer corners of the stroke.
​
Round
1
Round join - Corners are rounded with a circular arc connecting the outer corners of the stroke.
​
Miter
2
Miter join - Corners are sharp, with the outer edges extended until they meet. Can be limited by strokeMiterlimit.

​
Usage

import { Shape, Path, PathCommand, StrokeJoin } from 'react-thorvg-fiber';

function BevelJoinPath() {
  return (
    <Shape
      stroke={[0, 0, 0, 255]}
      strokeWidth={8}
      strokeJoin={StrokeJoin.Bevel}
    >
      <Path
        commands={[
          PathCommand.MoveTo,
          PathCommand.LineTo,
          PathCommand.LineTo,
        ]}
        points={[
          { x: 20, y: 80 },
          { x: 50, y: 20 },
          { x: 80, y: 80 },
        ]}
      />
    </Shape>
  );
}
When using StrokeJoin.Miter, you can control the maximum miter length with the strokeMiterlimit prop (default: 4). If the miter length exceeds this limit, the join is automatically converted to a bevel.

Build docs developers (and LLMs) love

Get started for freeTalk to us