Skip to main content

AnnotationLens

info

AnnotationLens 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.

pointerPosition#

  • Type : PointerPosition
  • Default : { x: 0.5, y: 0.5 }

Pointer position relative to image rendered by AnnotationViewer

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

zoomLevel#

  • Type : number
  • Default : 1.5

Zoom level

options#

  • Type : Object
  • Interface :
interface AnnotationLensOptions {  shapeConfig?: LineConfig}
  • 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.#

getStage#

  • Signature : (stage: Stage) => void

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

style#

  • Type : CSSProperties

CSS object

className#

  • Type : string

Container className