@adamjarling/openseadragon-fabricjs-overlay
v0.3.2
Published
An OpenSeadragon plugin that adds fabricjs canvas overlay capability.
Downloads
111
Maintainers
Readme
@adamjarling/OpenSeadragonFabricjsOverlay
This package is a forked version of https://github.com/altert/OpenseadragonFabricjsOverlay
Please visit the original repository for details.
Differences in forked version
This forked version does a few things differently.
- Syncs Fabric JS object zoom levels to OpenSeadragon's image zoom level, instead of the viewport zoom level. Basically this better supports browser resizing, both horizontally and vertically.
- This package provides JS module exports for
initFabricJSOverlay
andfabric
, so you can@import
into your compiled JS app.
Usage
npm install @adamjarling/openseadragon-fabricjs-overlay
To import the fabric
module into your JavaScript app:
import { fabric } from '@adamjarling/openseadragon-fabricjs-overlay';
...
// Create a FabricJS object
const newShape = new fabric.Rect({
...shapeOptions,
...fillProps,
width: pointer.x - origX,
height: pointer.y - origY,
});
For example if you're syncing OpenSeadragon and FabricJS in a React app for example, you could do something like this:
import React from 'react';
import { useOpenSeadragon, OpenSeadragon } from 'use-open-seadragon';
import {
fabric,
initFabricJSOverlay,
} from '@adamjarling/openseadragon-fabricjs-overlay';
...
export default function MyFabricViewer() {
// Customize Fabric selection handles
fabric.Object.prototype.set({
borderColor: '#22a2f8',
borderScaleFactor: 2, // selection stroke width
cornerColor: 'white',
cornerSize: 10,
transparentCorners: false,
});
// Add Fabric support to OSD
initFabricJSOverlay(OpenSeadragon, fabric);
// Initialize our OpenSeadragon instance
const [ref, { viewer }] = useOpenSeadragon(tile, osdOptions);
React.useEffect(() => {
if (!viewer) return;
viewer.fabricjsOverlay({ scale: 1 })
}, [viewer]);
return (
<div ref={ref} />
);
}
For more info, check out how this project uses the module:
https://github.com/adamjarling/loc-speculative-annotations