svg-sketch
svg widget with built in json eventstream
svg -> json -> what ever FTW
use with browserify
methods
var sketch =
sketch([opts={}])
Returns a new sketch instance.
opts
is optional
opts.anchor
is used for move, delete operations and to easily click on
text elements
If you want anchors to appear then there are the options (they help with deleting and moving elements) :-
-
opts.anchor.size
size of anchor (default is 14px) -
opts.anchor.exclude
regex checked for a falsy value, used to determine when to remove anchor elements. (default is/undo|redo|grid/
) -
opts.anchor.include
regex checked for a truthy value, used to determine when to show anchor elements. (default is/rubber|move|text/
) -
opts.anchor.position
optional function to determine the xy position of a svg shape.
sketch.appendTo(el)
append svg element to element
sketch.registerControl()
register drawing control
sketch.remove()
remove svg element and event listeners
sketch.setEvents(events)
set drawing events data
sketch.setControl(control)
set which control is currently being used
sketch.resize(width, height)
set viewport to width and height
sketch.setColor(color)
set current drawing color in hex or rgb
sketch.setStyle(style)
sketch.setGridStyle(style)
override grid style used
svg.setClipboard(json)
clipboard context for widget used by paste.
svg.copy()
save eventStream json and emit copy
event
svg.cut
save eventStream json, remove drawing and emit copy
event
svg.paste(e)
paste copied eventStream to drawing
if e
contains clipboard data used that instead of local copied eventStream.
events
svg.changeControl(name)
svg.changeColor(color)
svg.changeStyle(style)
svg.eventStream(events)
complete json structure for drawing
svg.copy
emitted when drawing copied
svg.drawing
emitted when interacting with drawing
install
With npm do:
npm install svg-sketch
test
npm test
license
MIT