-
Notifications
You must be signed in to change notification settings - Fork 456
Tools
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.
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 |
This tool can only be activated when an annotation layer is selected, otherwise, the tool is disabled.
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 |
This tool can only be activated when an annotation layer is selected, otherwise, the tool is disabled.