marker.js 3 Documentation
    Preparing search index...

    Class CustomImageMarker

    Used to represent user-set images.

    Use this marker to display custom images at runtime. For example, you can use this type to represent emojis selected in an emoji picker.

    Hierarchy (View Summary)

    Index

    Accessors

    • get container(): SVGGElement

      SVG container object holding the marker's visual.

      Returns SVGGElement

    • get imageSrc(): undefined | string

      For bitmap images this holds the base64 encoded image.

      Returns undefined | string

      Technically this could be any URL but due to browser security constraints an external image will almost certainly cause bitmap rendering of the image to fail.

      In cases you know you will never render the annotation as a static image, it should be safe to use external URLs. Otherwise, use base64 encoded images like 'data:image/png;base64,...'.

    • set imageSrc(value: undefined | string): void

      Parameters

      • value: undefined | string

      Returns void

    Constructors

    Methods

    Properties

    _container: SVGGElement

    SVG container object holding the marker's visual.

    It is created and passed to the constructor by marker editor or viewer when creating the marker.

    _fillColor: string = 'transparent'

    Fill color of the marker.

    _imageSrc?: string

    For bitmap images this holds the base64 encoded image.

    _opacity: number = 1

    Opacity of the marker.

    _strokeColor: string = 'transparent'

    Stroke (outline) color of the marker.

    _strokeDasharray: string = ''

    Stroke (outline) dash array of the marker.

    _strokeWidth: number = 0

    Stroke (outline) width of the marker.

    _svgString?: string

    For SVG images this holds the SVG markup of the image.

    applyDefaultFilter: boolean = true

    When true, the default filter is applied to the marker's visual.

    3.2.0

    defaultSize: ISize = ...

    The default marker size when the marker is created with a click (without dragging).

    height: number = 0

    Marker height.

    imageType: ImageType = 'svg'

    Type of the image: SVG or bitmap.

    left: number = 0

    x coordinate of the top-left corner.

    naturalHeight: number = 24

    Natural (real) height of the image.

    naturalWidth: number = 24

    Natural (real) width of the image.

    notes?: string

    Additional information about the marker.

    Generally, this isn't used for anything functional. However, in a derived type it could be used for storing arbitrary data with no need to create extra properties and state types.

    rotationAngle: number = 0

    Marker's rotation angle.

    stage: MarkerStage = 'normal'

    Marker lifecycle stage.

    Most markers are created immediately after the user clicks on the canvas (normal). However, some markers are only finished creating after additional interactions (creating).

    SVGImage?: SVGImageElement | SVGSVGElement

    Main SVG or image element of the marker.

    title: string = 'Custom image marker'

    Marker type title (display name) used for accessibility and other attributes.

    top: number = 0

    y coordinate of the top-left corner.

    typeName: string = 'CustomImageMarker'

    Marker type name.

    It's important to set this in each derived class. This value is used to identify marker types when restoring marker state and other scenarios.

    width: number = 0

    Marker width.