Tools

Contents

• Polygon Tool
• Magic Wand

Tools are built with Vue components that use the tool.js mixin to inherit functions and properties. The mixins act as a parent class and bring structure to the design of tools in the annotator. Each tool initializes a Paper Tool, which is then configured to call specific functions within the component on common events which are overwritten by the child class. The mixin also sets the tools icon, appropriate colors and manages the tools state.

Polygon/Lasso Tool

The Polygon Tool creates polygonal shapes and paths (shape outlines). To complete a section place a point close to the start of your selection or click 'Close Polygon' found in the options panel. Once closed a simplification is applied to remove any excessive points and saved to the currently selected object layer.

Useful for creating accurate annotations, or annotation objects without distinct edges.

Option	Type	Description
Guidance	Toggle	Draws a line between the cursor and last added point
Delete Polygon	Operation	Removes currently selected polygon
Complete Distance	Integer	Distance between first and last point to trigger automatic completion

Polygon Keyboard Shortcuts

This tool can only be activated when an annotation layer is selected, otherwise, the tool is disabled.

Magic Wand Tool

Flood fill, also called seed fill, is the algorithm used in to create selections using the Magic Wand Tool. It works by determining the area connected to a given pixel by expanding outward until pixels no-longer are similar. It is useful for extracting objects from a flat background, quickly selecting an irregularly shaped area, or selecting a distinctly-colored element. This tool uses a library created by Paul Tamersoul called magic-wand-js.

When a user clicks a pixels on the image, a selection is made using the floodFill function which creates a binary mask. The gaussian-blur function, (gaussBlurOnlyBorder), is then applied to the binary mask to smooth out any inconsistencies. The final step converts the mask into a contour array (traceContours) which is passed to a Paper JS object to create a visual selection.

Option	Type	Description
Threshold	Number	Pixel similarity threshold
Blur	Number	Amount to blur outline for smoother outlines

Wand Keyboard Shortcuts

This tool can only be activated when an annotation layer is selected, otherwise, the tool is disabled.

Eraser Tool

Saving Data