Path Object

This documentation for fontkit is created and provided by the Typogram team. It’s a third-party documentation intended to delve deeper into the fontkit API. For the most accurate information, refer to fontkit’s official documentation.

The Path object in Fontkit represents the outline of a glyph. You can use it to render the glyph on a canvas, SVG, or any other graphic surface.

Properties:

path.commands

An array of path commands. Each command is an object with a type property, which can be 'moveTo', 'lineTo', 'curveTo', 'qcurveTo', or 'closePath', and the corresponding x and y coordinates (or control points for curves).

path.bbox

The bounding box of the path, which is the rectangle that encloses the path's outline. This object contains properties: minX, minY, maxX, and maxY.

path.cbox

The control bounding box of the path, which is similar to the bounding box but includes Bezier control points.

Methods:

path.rotate(angle)

• Description: Rotates the path around the origin (0, 0).

• Parameters:

  • angle: The rotation angle in radians.

• Returns: The modified Path object.

• Example: Rotating a path by 45 degrees (converted to radians):

  path.rotate(Math.PI / 4);

path.scale(scaleX, scaleY = scaleX)

• Description: Scales the path by a factor in the x and y directions.

• Parameters:

  • scaleX: The scaling factor in the x-direction.

  • scaleY: (Optional) The scaling factor in the y-direction. If not provided, it defaults to the value of scaleX, resulting in uniform scaling.

• Returns: The modified Path object.

• Example: Scaling a path by 2x in the x-direction and 0.5x in the y-direction:

  path.scale(2, 0.5);

path.transform(m0, m1, m2, m3, m4, m5)

• Description: Applies a 2x3 transformation matrix to the path. This can represent combinations of translations, rotations, scaling, and skewing.

• Parameters:

  • m0, m1, m2, m3, m4, m5: The elements of the 2x3 transformation matrix.

• Returns: The modified Path object.

• Example: Applying a transformation matrix:

  path.transform(1, 0, 0, 1, 10, 20); 
  // This example translates the path by 10 units in x and 20 units in y.

path.translate(x, y)

• Description: Translates (moves) the path by a specified amount in the x and y directions.

• Parameters:

  • x: The translation amount in the x-direction.

  • y: The translation amount in the y-direction.

• Returns: The modified Path object.

• Example: Translating a path by 10 units in x and 20 units in y:

  path.translate(10, 20);

path.mapPoints(fn)

• Description: Maps each point in the path to a new point by applying a given function. This is a general-purpose method that allows you to apply arbitrary transformations to each point in the path.

• Parameters:

  • fn: A function that takes a point as an argument (an object with x and y properties) and returns a new point (also an object with x and y properties).

• Returns: The modified Path object.

• Example: Mapping points to apply a custom transformation:

  path.mapPoints(point => ({
    x: point.x + 10,
    y: point.y - 5
  }));

path.moveTo(x, y)

Moves the "pen" to a new location without drawing anything. This sets the starting point for a new sub-path.

path.lineTo(x, y)

Draws a straight line from the current position to the specified (x, y) point.

path.bezierCurveTo(cp1x, cp1y, cp2x, cp2y, x, y)

Draws a cubic Bezier curve from the current position to the specified (x, y) point using (cp1x, cp1y) as the control point for the start of the curve and (cp2x, cp2y) as the control point for the end of the curve.

path.quadraticCurveTo(cpx, cpy, x, y)

Draws a quadratic Bezier curve from the current position to the specified (x, y) point using (cpx, cpy) as the control point.

path.closePath()

Closes the current sub-path by drawing a straight line back to its starting point. This is often used when defining closed shapes.

path.toSVG()

Converts the path to an SVG path data string, which can be used to render the path using SVG.

path.toFunction()

Converts the path to a JavaScript function with an API similar to the Canvas 2D context. This can be used for custom rendering.