@stroke-stabilizer/vue


日本語

> This is part of the stroke-stabilizer monorepo

Vue composables for stroke stabilization in digital drawing applications.

Live Demo

Installation

``bash
npm install @stroke-stabilizer/vue @stroke-stabilizer/core
`

Usage

$3

`vue



`

> Important: Always use getCoalescedEvents() to capture all pointer events between frames. Without it, browsers throttle events and you'll get choppy strokes.

$3

For high-frequency input devices, use the underlying StabilizedPointer's batch processing:

`vue



`

$3

A composable for managing stabilization level with reactive state.

`vue



`

API

$3

Creates a stabilized pointer instance.

Options:

- level - Stabilization level (0-100). Uses preset when specified
- filters - Custom filter array. Used when level is not specified
- onPoint - Callback when a point is processed

Returns:

- process(point) - Process a single point
- processAll(points) - Process multiple points
- flushBuffer() - Flush internal buffer
- finish() - Apply post-processing and return final points (auto-appends endpoint)
- reset() - Reset the pointer state
- addFilter(filter) - Add a filter dynamically
- removeFilter(type) - Remove a filter by type
- updateFilter(type, params) - Update filter parameters
- pointer - Computed ref to the StabilizedPointer instance
- filterCount - Computed ref to the number of active filters

$3

Manages stabilization level state.

Options:

- initialLevel - Initial level (default: 0)
- min - Minimum level (default: 0)
- max - Maximum level (default: 100)
- onChange - Callback when level changes

Returns:

- level - Computed ref to current level
- setLevel(value) - Set the level
- increase(amount?) - Increase level by amount (default: 10)
- decrease(amount?) - Decrease level by amount (default: 10)
- isEnabled` - Computed ref indicating if stabilization is active (level > 0)

License

MIT