svg-pencil
pencil tool for drawing on scalable vector graphics
example
main.js:
var pencil = ;var p = ;p;
index.html:
draw pretty pix
then compile with browserify:
browserify main.js > bundle.js
and open index.html:
methods
var pencil =
var p = pencil(opts={})
Create a new pencil instance p from opts:
opts.svg- use an existing svg element instead of creating oneopts.fill- the fill color to use, default:'none'opts.stroke- the stroke color to use, default:'black'opts.strokeWidth- the stroke width, default:'1px'
If opts is a string, treat it as the opts.svg value.
At any time you can modify the p.stroke, p.fill, and p.strokeWidth
properties, which will affect all new <path> elements.
p.appendTo(target)
Append the svg element root to target, a dom element or query selector string.
p.hide()
Hide the svg.
p.show()
Show the svg.
p.enable()
Enable event handling.
p.disable()
Disable event handling.
var svgSource = p.toSource()
Return an svgSource string with the file contents.
var p = pencil.parse(svgSource)
Return a new pencil instance p from some existing svg source svgSource.
events
p.on('point', function (pt) {})
Every time a new point is added to the <path>, this event fires with the
[x,y] array pt.
p.on('path', function (elem) {})
When a new <path> is created, this event fires with the element reference
elem.
p.on('points', function (points) {})
When the mouseup event happens and a <path> is no longer being created, this
event fires with the array of points.
p.on('enable', function () {})
Emitted when the pencil is enabled.
p.on('disable', function () {})
Emitted when the pencil is disabled.
install
With npm do:
npm install svg-pencil
license
MIT