openseadragon - 如何创建可缩放的文本

Question

我希望将可缩放文本添加到 OpenSeadragon 中的渲染图像。所需的功能是，当您缩小时，文本非常小，而当您放大时，文本会增大。

我试图将文本添加到覆盖 div DOM 元素。这会添加文本，但当您缩小时，div 的大小会变小，但文本不会。文本被压缩成多行。

我使用 Angular 7 中的 Render2 类来操作 DOM，但这可以在任何框架/库中完成：

      // 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);

我希望文本随图像一起缩放。这可能吗？

Answer 1