Как создать масштабируемый текст

Я хочу добавить масштабируемый текст к визуализированному изображению в OpenSeadragon. Желаемая функциональность заключается в том, что при уменьшении масштаба текст становится очень маленьким, а при увеличении масштаба текст увеличивается в размере.

Я попытался добавить текст в оверлейный элемент DOM div. Это добавляет текст, но при уменьшении масштаба размер div становится меньше, а текст - нет. Текст сжимается до нескольких строк.

Я использую класс Render2 в Angular 7 для управления 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);

Я ожидаю, что текст будет увеличиваться вместе с изображением. Это возможно?


openseadragon
person afriedman111    schedule 04.04.2019    source источник

Ответы (1)


arrow_upward
1
arrow_downward

Я понял, как это сделать. Я видел этот пример, в котором используется svg plugin, чтобы можно было использовать d3 для рисования наложения. После загрузки этого плагина я заметил, что когда я печатал текст на экране, он был невероятно большим. Слишком большой для чтения.

Поскольку d3 на этом уровне масштабирования использует масштаб 0-1 для размера изображения, мне пришлось разделить масштаб на ширину моего изображения.

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 + ')');

Затем я повторно реализовал функцию изменения размера плагина в своем компоненте, чтобы не изменять модуль узла. В результате на моем огромном изображении получился небольшой текст, который можно было прочитать при увеличении масштаба.

person afriedman111    schedule 05.04.2019
comment
Это действительно то, что я бы порекомендовал! Один из вариантов, который следует учитывать, заключается в том, что вы можете указать ширину вашего изображения (в координатах области просмотра, которые используются в оверлее SVG) для чего-то более приятного для работы, например: tileSources: [ { tileSource: 'a.dzi', width: 100 } ] - person iangilman; 05.04.2019