svg-pencil

pencil tool for drawing on scalable vector graphics

svg-pencil

pencil tool for drawing on scalable vector graphics

example

run this demo

main.js:

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

index.html:

<html>
  <head>
    <style>
      #viewport {
        border: 2px solid purple;
        width: 700px;
        height: 600px;
        user-select: none;
      }
    </style> 
  </head>
  <body>
    <div>draw pretty pix</div>
    <div id="viewport"></div>
    <script src="bundle.js"></script> 
  </body>
</html>

then compile with browserify:

browserify main.js > bundle.js

and open index.html:

methods

var pencil = require('svg-pencil')

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 <path> elements.

Append the svg element root to target, a dom element or query selector string.

Hide the svg.

Show the svg.

Enable event handling.

Disable event handling.

Return an svgSource string with the file contents.

Return a new pencil instance p from some existing svg source svgSource.

events

Every time a new point is added to the <path>, this event fires with the [x,y] array pt.

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

When the mouseup event happens and a <path> is no longer being created, this event fires with the array of points.

Emitted when the pencil is enabled.

Emitted when the pencil is disabled.

install

With npm do:

npm install svg-pencil

license

MIT