0.0.3 • Published 2 months ago
@hyrious/ink v0.0.3
@hyrious/ink
Draw perfect pressure-sensitive freehand lines on the browser.
This library implements a simplified algorithm of perfect-freehand.
Usage
import { Stroke } from '@hyrious/ink'
// Create the stroke like in onpointerdown
let stroke = Stroke.create()
// Update the stroke like in onpointermove
stroke.push({ x: ev.clientX, y: ev.clientY, r: ev.pressure })
// The stroke is made up with many sections, get each section's outline
stroke.sections.forEach((index) => {
// PERF: the outline() function is quite expensive,
// only the last section might change by further 'push()'s
let points = stroke.outline(index, 8)
// Draw this stroke in any way you like
let path = document.createElementNS('http://www.w3.org/2000/svg', 'path')
path.setAttribute('d', points.reduce((d, { x, y }, i) => d + (i > 0 ? `L${x},${y}` : `M${x},${y}`), '') + 'z')
})
// Serialize the stroke
localStorage.setItem('stroke-0', JSON.stringify(stroke.toJSON()))
// De-serialize and restore a stroke
stroke = Stroke.fromJSON(JSON.parse(localStorage.getItem('stroke-0')))
Possible CRDT Implementation
// Insert some points to stroke with `id`, at index `from`
type Message = { id: ID, from: number, points: { x: number, y: number, r: number }[] }
socket.on('stroke', (msg: Message) => {
stroke = (strokes[msg.id] ||= Stroke.create())
stroke.insert(msg.from, msg.points)
})
License
MIT @ hyrious