Compare behavior of Context2d and WebGL (via three.js) drawers
Context2d drawer (default in OSD <= 4.1.0)
New WebGL drawer
Image options (drag and drop to re-order images)
Use a custom plugin drawer - example using three.js
The context2d drawing operations in core OpenSeadragon have been
consolidated from the
TiledImageand
Tileclasses into the
Drawerclass, which inherits from a new
DrawerBasebase class. The
TiledImageand
Tileclasses now handle the logic of managing tile positioning and image data, with cleaner separation from details of the rendering process.
DrawerBasedefines a public API that core OpenSeadragon code uses to interact with the drawer implementation. To use a custom drawer/render, define a new class that inherits from
DrawerBaseand implements the public API. The constructor of this class can be passed in during construction of the viewer using the new
customDraweroption.
import { ThreeJSDrawer } from './threejsdrawer.js'; let viewer = OpenSeadragon({ ... drawer: ThreeJSDrawer, ... });
HTMLDrawer: legacy pre-HTML5 drawer that uses <img> elements for tiles
HTML-based rendering can be selected in two different ways:
// via the 'html' drawer option: let viewer = OpenSeadragon({ ... drawer: 'html', ... }); // or by passing the HTMLDrawer constructor let viewer = OpenSeadragon({ ... drawer:OpenSeadragon.HTMLDrawer, ... });