Animated Handdrawn Text Annotation Library – Rough Notation

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

Preview:

Animated Handdrawn Text Annotation Library – Rough Notation

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

You Might Be Interested In:


Leave a Reply