CODEWITHSUNDEEP
openseadragon
afriedman111
afriedman111

Reputation: 2331

How to create zoomable text

I am looking to add zoomable text to the rendered image in OpenSeadragon. The desired functionality is that when you are zoomed out, the text is very small, and as you zoom in, the text increases in size.

I have tried to add text to an overlay div DOM element. This adds text, but as you zoom out, the size of the div gets smaller but the text doesn't. The text gets squeezed to multiple lines.

I use the Render2 class in Angular 7 to manipulate the DOM, but this can be done in any framework/library:

      // create the DOM element need for SeaDragon's overlay
      let div = this.renderer.createElement('div');
      const text = this.renderer.createText(`x: ${xaxis}, y: ${yaxis}`);

      // append text to div element
      this.renderer.appendChild(div, text);

      // add id for Seadragon overlay creation and styling of overlay
      this.renderer.setAttribute(div, 'id', overlayname);
      this.renderer.setAttribute(div, 'class', 'image-ruler');

      // now append the div tag to ViewChild div
      this.renderer.appendChild(this.singleOverlay.nativeElement, div);

I expect the text to zoom with the image. Is this possible?

Upvotes: 0

Views: 513

Answers (1)

afriedman111
afriedman111

Reputation: 2331

I figured out how to do it. I saw this example that uses an svg plugin so d3 can be used to draw an overlay. After downloading this plugin, I noticed that when I printed text on the screen, it was incredibly large. Too large to read.

As d3 at this zoom level uses the scale of 0-1 for the size of the image, I had to divide the scale by the width of my image.

var p = viewer.viewport.pixelFromPoint(new OpenSeadragon.Point(0, 0), true);
var zoom = viewer.viewport.getZoom(true);
var rotation = viewer.viewport.getRotation();
var imageSize = viewer.world.getItemAt(0).getContentSize();
var scale = viewer.viewport._containerInnerSize.x * zoom / imageSize.x;
g.attr('transform', 
  'translate(' + p.x + ',' + p.y + ') scale(' + scale + ') rotate(' + rotation + ')');

I then reimplemented the plugin's resize function in my component as not to modify a node module. The result was small text on my enormous image that was readable when you zoom in.

Upvotes: 1

Related Questions