perfect-freehand

Perfect Freehand

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

!Screenshot

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 or an array of objects with x and y properties.

getPath([
  [0, 0],
  [10, 5],
  [20, 8],
])

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

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"

function Example() {
  const [currentType, setCurrentType] = React.useState([])
  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>
  )
}