An Annotorious plugin that adds additional drawing tools.
npm install @annotorious/plugin-tools
Draw ellipses or circles.
- Hold
SHIFT– Constrain aspect ratio to circle - Hold
CTRL– Draw from the center outward
Draw a straight line between two points.
Create polylines made of straight or curved segments.
Drawing:
- Click (or click and drag if
drawingModeis set todrag) 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
DelorBackspacewhile 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
Altwhile dragging a handle to move it independently. - Re-link handles: Double-click the point to snap handles back together.
- Select multiple points: Hold
Ctrl(orOptionon Mac) while clicking a point to add it to the selection
The plugin works with both Annotorious versions: Image Annotator and OpenSeadragon Annotator.
import { createImageAnnotator } from '@annotorious/annotorious'; import { mountPlugin as mountToolsPlugin } from '@annotorious/plugin-tools'; import '@annotorious/annotorious/annotorious.css'; import '@annotorious/plugin-tools/annotorious-plugin-tools.css'; var anno = createImageAnnotator('sample-image', { /** Annotorious init options **/ }); mountToolsPlugin(anno); // ['rectangle', 'polygon', 'ellipse', 'line', 'path'] console.log(anno.listDrawingTools()); anno.setDrawingTool('path');
import OpenSeadragon from 'openseadragon'; import { createOSDAnnotator } from '@annotorious/openseadragon'; import { mountPlugin as mountToolsPlugin } from '../src'; import '@annotorious/openseadragon/annotorious-openseadragon.css'; import '@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', 'line', 'path'] console.log(anno.listDrawingTools()); anno.setDrawingTool('path');