Skip to main content

Lens

You can link the AnnotationLens component to AnnotationView to get a magnified vision that change based on pointer position. You should pass the same data props to the AnnotationLens to make sure the same data are shared between the two canvases.

Keep the pointer position provided by the AnnotationViewer in a state to pass it later to AnnotationLens.

const [pointerPosition, setPointerPosition] = useState<PointerPosition | null>(null)
return (  <AnnotationViewer    ...    getPointerPosition={(pointerPosition: PointerPosition) => setPointerPosition(pointerPosition)}  />  <AnnotationLens    ...    pointerPosition={pointerPosition}  />)

Full example#