https://github.com/naknomum/scribby
small javascript library for scribbling on an svg element
https://github.com/naknomum/scribby
drawing javascript post-it scribble
Last synced: 3 months ago
JSON representation
small javascript library for scribbling on an svg element
- Host: GitHub
- URL: https://github.com/naknomum/scribby
- Owner: naknomum
- License: gpl-3.0
- Created: 2020-06-14T07:19:37.000Z (almost 6 years ago)
- Default Branch: master
- Last Pushed: 2021-11-30T08:56:30.000Z (over 4 years ago)
- Last Synced: 2024-06-11T16:29:00.396Z (almost 2 years ago)
- Topics: drawing, javascript, post-it, scribble
- Language: JavaScript
- Homepage:
- Size: 143 KB
- Stars: 57
- Watchers: 2
- Forks: 2
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# scribby
_scribby_ is a javascript library which lets users draw simple "scribbles" on a web page.
## Objectives
* svg-based, smooth/natural drawing
* simple/intuitive (non-existent) interface
* json representation
* localStorage and (experimental) rest-based persistence
* lightweight, no dependencies
## Components
The main functionality is in **scribby.js**, which handles the drawing on an svg dom element. Also included is **notey.js** which presents
a simple post-it note-like object on a webpage, as an example application using scribby.js. Utility functionality is found in draggy.js and resty.js (but these are only needed for the Notey app).
### Embeddable svg file
There is also a `scribby-embed.svg` file that can simply be inserted into a page as an HTML Object, such as:
``
## Usage examples
### Draw on svg
Using _scribby_ to enable drawing on an svg element:
```javascript
var svgEl = document.getElementById('svg');
var scr = new Scribby(svgEl);
scr.setAttrStroke('blue');
scr.setAttrStrokeWidth(4);
...
scr.undo();
scr.redo();
scr.reset();
var keep = scr.toJson();
var dup = new Scribby(svgEl2, keep);
```
### Notey usage
Using _notey_ to put a note on a page (which uses _scribby_ for its contents):
```javascript
var note = new Notey();
note.attachToBody();
note.save();
```
### Using scribby-embed.svg
Self-contained, simple, one-line usage. (May be used multiple times on a single page.)
```javascript
```
### Misc.
Typical json representation of a _note_:
```json
{
"id": "7654b53b-a087-45f7-8163-46e96081fca7",
"version": "1.0b",
"dateCreated": "2020-06-14T08:19:04.927Z",
"dateModified": "2020-06-14T08:19:11.316Z",
"dateSaved": "2020-06-14T08:19:11.316Z",
"dateSynced": "2020-06-14T08:19:04.930Z",
"bgColorId": 1,
"bgColor": "#FE8",
"strokeColorId": 0,
"strokeColor": "#000",
"width": 167,
"height": 167,
"x": 876,
"y": 353,
"scribby": {
"version": "1.0b",
"dateCreated": "2020-06-14T08:19:04.928Z",
"dateModified": "2020-06-14T08:19:11.316Z",
"svg": {
"width": 167,
"height": 167,
"content": ""
},
"strokeWidth": 2,
"bufferSize": 8
}
}
```
## Demo
[Try it out.](https://naknomum.github.io/scribby/)
## Future development
Possible features and improvements.... though these may go against the objective of simplified usage!
* multi-touch & pressure support
* better configuration via constructor
* generalize (or plugin?) rest support
* scaling / re-sizing
* sharing (live), see also:
* multi-user (as "layers")