Как создать масштабируемый текст - PullRequest
Новая
       24

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

0 голосов
/ 04 апреля 2019

Я хочу добавить масштабируемый текст к отображаемому изображению в 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);

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

1 Ответ

1 голос
/ 05 апреля 2019

Я разобрался, как это сделать. Я видел этот пример, который использует плагин svg , поэтому 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 + ')');

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

...