Annotorious Tools Plugin

An Annotorious plugin that adds additional drawing tools.

Installation

npm install @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. Line

Draw a straight line between two points.

3. 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

Usage

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

Image Annotator

import{createImageAnnotator}from'@annotorious/annotorious';import{mountPluginasmountToolsPlugin}from'@annotorious/plugin-tools';import'@annotorious/annotorious/annotorious.css';import'@annotorious/plugin-tools/annotorious-plugin-tools.css';varanno=createImageAnnotator('sample-image',{/** Annotorious init options **/});mountToolsPlugin(anno);// ['rectangle', 'polygon', 'ellipse', 'line', 'path']console.log(anno.listDrawingTools());anno.setDrawingTool('path');

OpenSeadragon Annotator

importOpenSeadragonfrom'openseadragon';import{createOSDAnnotator}from'@annotorious/openseadragon';import{mountPluginasmountToolsPlugin}from'../src';import'@annotorious/openseadragon/annotorious-openseadragon.css';import'@annotorious/plugin-tools/annotorious-plugin-tools.css';constviewer=OpenSeadragon({/** OpenSeadragon init options **/});constanno=createOSDAnnotator(viewer,{/** Annotorious init options **/});mountToolsPlugin(anno);// ['rectangle', 'polygon', 'ellipse', 'line', 'path']console.log(anno.listDrawingTools());anno.setDrawingTool('path');