Concepts: Markers

Markers are the fundamental building blocks of annotations in marker.js 3. They define both the visual appearance and styling options for annotation elements that users can add to images.

Overview

Markers represent different types of visual annotations like:

Shapes (rectangles, ellipses)
Lines and arrows
Text and callout elements
Freehand drawings
Image-based markers
And more

Each marker type defines:

How it renders visually
What styling properties it supports
How it stores its state

Marker Hierarchy

Markers in marker.js 3 follow a hierarchical structure starting with (abstract) base marker classes that provide common functionality:

MarkerBase - The root base class for all markers specifying the core API all markers should implement.
- RectangularBoxMarkerBase - Base for markers contained in a rectangular box.
  - ShapeOutlineMarkerBase - Base for outline-only shapes like frames.
    - ShapeMarkerBase - Base for filled shape markers like filled rectangles and ellipsis.
- LinearMarkerBase - Base for line-based markers like arrows.
- ImageMarkerBase - Base for markers that display images.

Built-in Marker Types

marker.js 3 includes these built-in marker types for common annotation needs:

Basic Shapes

FrameMarker - Rectangular outline
CoverMarker - Filled rectangular shape
HighlightMarker - Semi-transparent highlight
EllipseFrameMarker - Elliptical outline
EllipseMarker - Filled elliptical shape

Lines and Arrows

LineMarker - Basic line
ArrowMarker - Line with arrow head(s)
MeasurementMarker - Line with measurement indicators

Text-Based Markers

TextMarker - Text annotation
CalloutMarker - Text with pointer
CaptionFrameMarker - Frame with caption

Advanced Markers

FreehandMarker - Freehand drawing
PolygonMarker - Multi-point polygon

Image-based Markers

CustomImageMarker - Custom image marker used to display user-set image
CheckImageMarker - Checkmark image
XImageMarker - X mark image

Creating Markers

User-driven marker creation is initiated in the MarkerArea editor component. To create a new marker, use the createMarker() method and specify the marker type:

markerArea.createMarker(ArrowMarker);
// or
markerArea.createMarker('ArrowMarker');

Marker State

Each marker maintains its own state including:

Position and size
Rotation
Style properties (colors, stroke width, etc.)
Type-specific properties

The marker states are included in the overall annotation state when saving/restoring annotations.

Integration

Markers are part of the Core module in marker.js 3 since they are used by all main components:

MarkerArea (Editor) - For creating and editing markers
MarkerView (Viewer) - For displaying markers
Renderer - For rendering markers to static images

Custom Markers

When none of the built-in markers satisfy your needs you may want to create a custom marker. The marker should be a descendant of MarkerBase (quite likely one of the base classes above is a better candidate to inherit) and should be able to generate its visual as well as provide and restore its state.

For mor information on creating custom markers please check this tutorial.