angular-canvas-painter
⚠️ This project is not under active development! PRs welcome!
Angular.js directive to paint on a canvas on desktop or touch devices
Usage
bower install angular-canvas-painter
- Include
dist/angular-canvas-painter(.min).js
frombower_components/angular-canvas-painter/dist
. - Add
pw.canvas-painter
as an angular module dependency. - Use the
pw-canvas
directive in your template to create the painting canvas. - Optionally you can use the
pw-color-selector
directive to choose colors from.
pwCanvas
Options
width: 400 //px height: 300 //px backgroundColor: '#fff' color: '#000' lineWidth: 1 //px opacity: 09 //0-1 undo: false // boolean or a number of versions to keep in memory imageSrc: 'images/example.jpg' // loads the specified image and sets it as background image, customCanvasId: 'myCustomId' // define a custom value for the id attribute of the canvas element (default: 'pwCanvasMain')
Undo
To enable the undo function set undo: true
in the options and provide a version
attribute:
The version attribute will always be set to the amount of available versions in memory. To undo a stroke just decrease the version number in your surrounding controller e.g. model.version = model.version - 1
. To jump back 3 versions set model.version = model.version - 3
.
You can set a maximum number of saved versions to prevent too much memory consumption by setting a number instead of true
in the options, e.g. {undo: 20}
pwColorSelector
To use pwColorSelector
with pwCanvas
set the color option in pwCanvas
to the color variable of the selecot:
Drawing algorithm
The drawing algorithm to produce clear and smooth edges is based on a great article by Rishabh
License
MIT