simple-painter
JavaScript painting plugin in a browser.
Simple Painter based on HTML5/Canvas.
Installing
$ npm install simple-painter
Example
Please refer to the example/index.ts file.
$ git clone https://github.com/goldenthumb/simple-painter.git$ cd simple-painter$ npm install$ npm run start Now open this URL in your browser: http://localhost:1234/
API
new SimplePainter(options)
Create instance.
; const painter = canvas ;
options
{
canvas, // HTMLCanvasElement.
width, // Canvas width.
height, // Canvas height.
drawMouse: true, // allow draw by mouse or touch. Default is true
type: 'freeLine', // draw type. Default is 'freeLine'
color: 'red', // draw color. Default is 'red'
thickness: 3, // draw thickness. Default is 3
lineCap: 'square', // draw lineCap. Default is 'square'
figures: [], // figure data
}
painter.setOptions(options)
Change draw option. (by mouse or touch)
painter
painter.setSize(size)
Change canvas size.
painter
painter.draw(Figure)
Add draw figure and render.
painter; painter; painter; painter; painter;
painter.redraw()
redraw.
painter;
painter.setFigures(figures)
Set Figures.
painter;
painter.undo()
Undo draw.
painter;
painter.redo()
Redo draw.
painter;
painter.clear()
Clear draw.
painterclear;
painter.allOff()
remove all events.
painter;
painter.destroy()
destroy.
painter;
painter.on(eventName, listener)
Add an event listener.
Returns Function to remove the event listener.
Events
- drawStart - Event occurs when drawing starts.
- drawing - Event occurs when drawing.
- drawEnd - Event occurs when drawing is finished.
/** * @param * @param * @param {MouseEvent | TouchEvent} data.origin * @param {{x: number, y: number}} data.relativePosition */painter; painter; painter;
- figures - Event occurs when change figure.
painter;
License
MIT