svg-pencil

pencil tool for drawing on scalable vector graphics

example

run this demo

main.js:

`` js
var pencil = require('svg-pencil');
var p = pencil();
p.appendTo('#viewport');
`

index.html:

` html







`

then compile with browserify:

`
browserify main.js > bundle.js
`

and open index.html:

!pencil graphics whoa

methods

` js
var pencil = require('svg-pencil')
`

var p = pencil(opts={})

Create a new pencil instance p from opts:

* opts.svg - use an existing svg element instead of creating one
* opts.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 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 , this event fires with the
[x,y] array pt.

p.on('path', function (elem) {})

When a new is created, this event fires with the element reference
elem.

p.on('points', function (points) {})

When the mouseup event happens and a 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