AnnotationViewer

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. Below is 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 : Object
• 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 shapeConfig object overrides all shapes custom configs.

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

onShapeMouseEnter

• Type : (shape: AnnotationShape) => void

Return the shape on mouse enter event. Check ShapeConfig to custom shape style and behaviour for each state.

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

onShapeMouseLeave

• Type : (shape: AnnotationShape) => void

Return the shape on mouse leave event. Check ShapeConfig to custom shape style and behaviour for each state.

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

onShapeClick

• Type : (shape: AnnotationShape) => void

Return the shape on click event. Check ShapeConfig to custom shape style and behaviour for each state.

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

onPointerMove

• Type : (pointerPosition: PointerPosition) => void

Return the pointer position on mouse move event

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

styles

• Type : CSSProperties

Regular CSS object to style the container

className

• Type : string

Container className