https://github.com/jameskyburz/svg-sketch

svg sketch widget
https://github.com/jameskyburz/svg-sketch

javascript sketch svg

Last synced: about 2 months ago
JSON representation

svg sketch widget

• Host: GitHub
• URL: https://github.com/jameskyburz/svg-sketch
• Owner: JamesKyburz
• License: other
• Created: 2014-08-08T09:20:24.000Z (over 10 years ago)
• Default Branch: master
• Last Pushed: 2021-07-27T04:53:47.000Z (over 3 years ago)
• Last Synced: 2024-04-25T21:22:51.597Z (8 months ago)
• Topics: javascript, sketch, svg
• Language: JavaScript
• Homepage: http://npm.im/svg-sketch
• Size: 132 KB
• Stars: 20
• Watchers: 5
• Forks: 1
• Open Issues: 11
• Metadata Files:
  • Readme: readme.markdown
  • License: LICENSE

Awesome Lists containing this project

README

        
# svg-sketch

svg widget with built in json eventstream

svg -> json -> what ever FTW

[![js-standard-style](https://cdn.rawgit.com/feross/standard/master/badge.svg)](https://github.com/feross/standard)

[![build status](https://api.travis-ci.org/JamesKyburz/svg-sketch.svg)](http://travis-ci.org/JamesKyburz/svg-sketch)

[![Sauce Test Status](https://saucelabs.com/browser-matrix/svg-sketch.svg)](https://saucelabs.com/u/svg-sketch)

Try it out! [![view on requirebin](http://requirebin.com/badge.png)](http://requirebin.com/?gist=0dc5356985194d0b8466)

use with [browserify](http://browserify.org)

# methods

``` js

var sketch = require('svg-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](https://npmjs.org) do:

```

npm install svg-sketch

```

# test

```

npm test

```

# license

MIT