Skip to main content

AnnotationViewer

info

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

data#

  • Type : object
  • Required : true
  • Interface
type AnnotationData = {  image: string  orientation: 0 | 90 | 180 | 270  shapes: AnnotationShape[]}
type AnnotationShape = {  id: string  coordinates: number[][]  config?: LineConfig}

image property should be either an URL object or a base64. If you have an object of type File ( typically generated by file upload libraries) instead you may need to use URL.createObjectURL() to generate a valid URL object.

caution

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

Check LineConfig for more params.

options#

  • Type : Object
  • Interface :
interface AnnotationViewerOptions {  shapeConfig?: LineConfig  selectionRectConfig?: RectConfig  enableSelection?: boolean  onMouseEnter?: (polygon: Line) => void  onMouseLeave?: (polygon: Line) => void  onClick?: (polygon: Line) => void  zoom?: {    modifier: number    max: number    defaultZoom: number  }}
  • 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.

Check Customization section for more details.#

onShapeMouseEnter#

  • Signature : (shape: AnnotationShape) => void

Return the shape on mouse enter event. Check LineConfig for more params..

Check AnnotationViewer

onShapeMouseLeave#

  • Signature : (shape: AnnotationShape) => void

Return the shape on mouse leave event. Check LineConfig for more params..

Check AnnotationViewer

onShapeClick#

  • Signature : (shape: AnnotationShape) => void

Return the shape on click event. Check LineConfig for more params..

Check AnnotationViewer

getStage#

  • Signature : (stage: Stage) => void

Return the stage object. Check Stage for more details..

onShapeMultiSelect#

  • Signature : (selectedShapes: AnnotationShape[]) => void

Return the selected shapes

onPointerMove#

  • Signature : (pointerPosition: PointerPosition) => void

Return the pointer position on mouse move event

type PointerPosition = {  x: number  y: number}

customStagePosition#

  • Type : PointerPosition
  • Default : undefined

Controlled stage position

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

customZoomLevel#

  • Type : number
  • Default : 1

Controlled zoom level

style#

  • Type : CSSProperties

CSS object

className#

  • Type : string

Container className