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

我想出了办法。我看到了使用this的svg plugin示例，因此可以使用d3绘制覆盖图。下载此插件后，我注意到当我在屏幕上打印文本时，它非常大。太大而无法阅读。

由于在此缩放级别下d3使用0-1的比例表示图像的大小，因此我不得不将比例除以图像的宽度。

<UserControl x:Class="BindingUserControl.Pages.UserControl1"
         xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
         xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
         xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
         xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
         xmlns:Local="clr-namespace:BindingUserControl"
         mc:Ignorable="d" 
         d:DesignHeight="450" d:DesignWidth="800">
    <Grid>
        <TextBox Width="100" Height="100" Text="{Binding CommonProperity  ,Mode=TwoWay}" />
    </Grid>
</UserControl>

然后，我在组件中重新实现了插件的调整大小功能，以免修改节点模块。结果是我巨大的图像上的小文本在放大时可读。

如何创建可缩放的文本

1 个答案: