perfect-freehand

What is perfect-freehand?

The perfect-freehand npm package is designed to generate smooth, natural-looking strokes from a series of input points, which is particularly useful for drawing applications. It provides a way to create freehand drawings that look more polished and professional by smoothing out the input data.

What are perfect-freehand's main functionalities?

Generate Smooth Strokes

This feature allows you to generate a smooth stroke from a series of input points. The code sample demonstrates how to use the `getStroke` function from the perfect-freehand package to create a stroke with specific options for size, thinning, smoothing, and streamline.

const { getStroke } = require('perfect-freehand');

const points = [
  [0, 0],
  [1, 1],
  [2, 2],
  [3, 3],
  [4, 4]
];

const options = {
  size: 8,
  thinning: 0.5,
  smoothing: 0.5,
  streamline: 0.5
};

const stroke = getStroke(points, options);
console.log(stroke);

Other packages similar to perfect-freehand

paper

Paper.js is an open-source vector graphics scripting framework that runs on top of the HTML5 Canvas. It provides a powerful API for creating and manipulating vector graphics, including freehand drawing. Compared to perfect-freehand, Paper.js offers a broader range of vector graphics functionalities but may not be as specialized in generating smooth freehand strokes.

roughjs

Rough.js is a library that allows you to create graphics that appear hand-drawn. It can be used to create freehand-like drawings, but its primary focus is on creating rough, sketchy graphics rather than smooth strokes. Compared to perfect-freehand, Rough.js is more about the aesthetic of roughness rather than the smoothness of freehand strokes.

fabric

Fabric.js is a powerful and simple JavaScript HTML5 canvas library. It provides an interactive object model on top of the canvas element, which includes support for freehand drawing. While Fabric.js offers a wide range of canvas manipulation features, perfect-freehand is more focused on the quality and smoothness of the stroke itself.

README

Perfect Freehand

Perfect freehand is a library for creating freehand paths by @steveruizok.

🔗 Demo

Installation

npm install perfect-freehand

or

yarn add perfect-freehand

Usage

The library export one default function, getPath, that accepts an array of points and an (optional) options object and returns SVG path data for a stroke.

The array of points may be either an array of number pairs representing the point's x, y, and (optionally) pressure...

import getPath from 'perfect-freehand'

const path = getPath([
  [0, 0],
  [10, 5],
  [20, 8],
])

const path = getPath([
  [0, 0, 0],
  [10, 5, 0.5],
  [20, 8, 0.3],
])

...or an array of objects with x, y, and (optionally) pressure properties.

getPath([
  { x: 0, y: 0 },
  { x: 10, y: 5 },
  { x: 20, y: 8 },
])

getPath([
  { x: 0, y: 0, pressure: 0, },
  { x: 10, y: 5, pressure: 0.5 },
  { x: 20, y: 8, pressure: 0.3 },
])

Options

The options object is optional, as are its properties.

Property	Type	Default	Description
type	string	'mouse'	A pointerType.
minSize	number	2.5	The thinnest size of the stroke.
maxSize	number	8	The thickest size of the stroke.
simulatePressure	boolean	true	Whether to interpret velocity as pressure for mouse and touch inputs.
streamline	number	.5	How much to streamline the stroke.
smooth	number	.5	How much to soften the stroke's edges.

getPath(myPoints, {
  type: 'pen',
  minSize: 2.5,
  maxSize: 8,
  simulatePressure: true,
  streamline: 0.5,
  smooth: 0.5,
})

Example

import * as React from "react"
import getPath from "perfect-freehand"

export default function Example() {
  const [currentType, setCurrentType] = React.useState("mouse")
  const [currentMark, setCurrentMark] = React.useState([])

  function handlePointerDown(e: React.PointerEvent) {
    setCurrentType(e.pointerType)
    setCurrentMark([[e.pageX, e.pageY, e.pressure]])
  }

  function handlePointerMove(e: React.PointerEvent) {
    if (e.buttons === 1 && e.pointerType === currentType) {
      setCurrentMark([...currentMark, [e.pageX, e.pageY, e.pressure]])
    }
  }

  return (
    <svg
      width={800}
      height={600}
      onPointerDown={handlePointerDown}
      onPointerMove={handlePointerMove}
    >
      <path d={getPath(currentMark, { type: currentType })}/>
    </svg>
  )
}