AnnotationLens

AnnotationViewer use KonvaJs HTML5 2d canvas js library for desktop and mobile applications

image

• Type : string
• Required : true

Image URL or base64. If you have an object of type File ( typically generated by file upload libraries) in hand you must use URL.createObjectURL() to generate a valid URL object.

shapes

• Type : AnnotationShape[]
• Default : []

List of shapes to draw on canvas. Check ShapeConfig to custom shape style and behaviour for each state.

Warning : you must provide a unique "id" to each shape for optimization matters.

type AnnotationShape = {
    id: string
    coordinates: number[][]
    crop?: string
    config: ShapeConfig
}

options

• Type : Option
• Default:

{
    backgroundColor: 'black',
    shapeConfig: {
        stroke: 'red',
        strokeWidth: 3,
        listening: true,
    },
    zoom: {
        modifier: 1.2,
        max: 10,
        defaultZoom: 1,
    },
  }

• Object of options to change default style and behavior. Here you can pass a custom style to all shape as you may do for each one.
• Note that shape object overrides shapes individual custom style.

type Option = {
  backgroundColor?: string
  zoom?: {
    modifier: number
    max: number
    defaultZoom: number
  }
  shapeConfig?: ShapeConfig
}

orientation

• Type : number
• Default : 0

Rotation in degree applied to the provided image

pointerPosition

• Type : PointerPosition
• Default : null

Pointer position relative to image rendered by AnnotationViewer

type PointerPosition = {
  x: number,
  y: number,
}

zoomLevel

• Type : number
• Default : 2

Zoom level

styles

• Type : CSSProperties

Regular CSS object to style the container

className

• Type : string

Container className