Author: | rough-stuff |
---|---|
Views Total: | 1,257 views |
Official Page: | Go to website |
Last Update: | June 24, 2020 |
License: | MIT |
Preview:

Description:
Rough Notation is a fancy JavaScript library for annotating your text with animated, sketchy/hand-drawn styled graphics using Rough.js.
Full responsive and easy to use. It will automatically re-draw the text annotations when the screen is resized.
Supported Annotation Types:
- Box
- Circle
- Crossed-off
- Highlight
- strike-through
- Underline
- Bracket
How to use it:
1. Install and import the Rough Notation as an ES module. This module exposes 2 modules:
- annotate: annotate a single element
- annotationGroup: annotate a group of elements
# NPM $ npm install rough-notation --save
import { annotate, annotationGroup } from 'rough-notation';
2. Or directly import the module and register the components in your document.
<script src="https://unpkg.com/rough-notation/lib/rough-notation.iife.js"></script>
const annotate = RoughNotation.annotate; const annotationGroup = RoughNotation.annotationGroup;
3. Annote a single element and determine the annotation type as follows:
const example = document.querySelector('#example'); const annotation = annotate(e, { type: 'underline' // default: 'highlight' }); annotation.show();
4. Annote a group of elements.
const e1 = annotate(element1, { type: 'highlight'}); const e2 = annotate(element2, { type: 'box'}); const e3 = annotate(element3, { type: 'underline'}); const ag = annotationGroup([e1, e2, e3]); ag.show();
5. Possible options to config the text annotation.
annotate(e, { // annotation type type: 'highlight', // enable/disable/config the animation animate: true, animationDuration: 300, animationDelay: 0, // annotation color color: "#000", // stroke width in pixels strokeWidth: 1, // space between element and annotation padding: 5 // for Bracket type brackets: ['left', 'right'] });
6. API methods.
annotation.show(); annotation.hide(); annotation.remove(); annotation.isShowing(); annotationGroup.show(); annotationGroup.hide();
Changelog:
2020-06-24
- Added new annotation type ‘bracket
2020-06-03
- Fixed demo page