Annotorious Tools Plugin

An Annotorious plugin that adds additional drawing tools.

Installation

npm install @itaysap/annotorious-plugin-tools

Tools

1. Ellipse

Draw ellipses or circles.

• Hold SHIFT – Constrain aspect ratio to circle
• Hold CTRL – Draw from the center outward

2. Circle

Draw circles.

• Hold CTRL – Draw from the center outward

3. Line

Draw a straight line between two points.

4. Path

Create polylines made of straight or curved segments.

Drawing:

• Click (or click and drag if drawingMode is set to drag) to start.
• Click to add more points.
• Open path: Double-click to finish.
• Closed shape: Click back on the first point.

Editing:

• Delete points: Press Del or Backspace while points are selected to remove those points from the path.
• Toggle corner/curve: Click a point to switch between corner and smooth curve (handles will appear when a single point is selected).
• Adjust curvature: Drag the handles to refine the shape.
• Sharp corner between curves: Hold Alt while dragging a handle to move it independently.
• Re-link handles: Double-click the point to snap handles back together.
• Select multiple points: Hold Ctrl (or Option on Mac) while clicking a point to add it to the selection

5. Polyline

Create straight-line polylines with straight segments only.

Drawing:

• Click to add points.
• Open path: Double-click to finish.
• Closed shape: Click back on the first point.

Editing:

• Delete points: Press Del or Backspace while points are selected.
• Move vertices: Click and drag points to reposition.
• Add vertices: Hover between points to insert midpoints.

Usage

The plugin works with both Annotorious versions: Image Annotator and OpenSeadragon Annotator.

Image Annotator

import { createImageAnnotator } from '@annotorious/annotorious';
import { mountPlugin as mountToolsPlugin } from '@itaysap/annotorious-plugin-tools';

import '@annotorious/annotorious/annotorious.css';
import '@itaysap/annotorious-plugin-tools/annotorious-plugin-tools.css';

var anno = createImageAnnotator('sample-image', {
  /** Annotorious init options **/
});

mountToolsPlugin(anno);

// ['rectangle', 'polygon', 'ellipse' , 'circle' , 'line', 'path' , 'polyline']
console.log(anno.listDrawingTools());

anno.setDrawingTool('path');

OpenSeadragon Annotator

import OpenSeadragon from 'openseadragon';
import { createOSDAnnotator } from '@annotorious/openseadragon';
import { mountPlugin as mountToolsPlugin } from '../src';

import '@annotorious/openseadragon/annotorious-openseadragon.css';
import '@itaysap/annotorious-plugin-tools/annotorious-plugin-tools.css';

const viewer = OpenSeadragon({
  /** OpenSeadragon init options **/
});

const anno = createOSDAnnotator(viewer, {
  /** Annotorious init options **/
});

mountToolsPlugin(anno);

// ['rectangle', 'polygon', 'ellipse' , 'circle' , 'line', 'path' , 'polyline']
console.log(anno.listDrawingTools());

anno.setDrawingTool('path');