c# - 如何为 blazor 应用程序以像素为单位查找 svg 文本大小？

Question

我在我们的 blazor 应用程序中使用 svg 元素。因为我在 Svg 中使用文本元素。同时我需要文本元素的高度和宽度(以像素为单位)。基于此，我正在对 SVG 元素进行一些尺寸更改。不幸的是，我不知道如何获取文本元素的大小。
在 ASP.Net 应用程序中，有如下方式，

using System.Drawing;
private float GetWidthOfString(string str)
{
    Bitmap objBitmap = default(Bitmap);
    Graphics objGraphics = default(Graphics);
    objBitmap = new Bitmap(500, 200);
    objGraphics = Graphics.FromImage(objBitmap);
    SizeF stringSize = objGraphics.MeasureString(str, new Font("Arial", 12));
    objBitmap.Dispose();
    objGraphics.Dispose();
    return stringSize.Width;
}

但我不能在 blazor 应用程序中使用它。有没有办法以像素为单位找到文本元素的大小？

Answer 1

在 Blazor 中获取图形信息的最简单方法是使用 DOM。
通过创建临时 svg 元素，使用 javascript 测量文本。
在您的 javascript 中，创建以下函数:

window.measureString = function(textParams) {
    const svg = `
    <svg style="position:absolute">
            <text 
             font-family="${textParams.Font}" 
             font-size="${textParams.Size}">
                    ${textParams.Text}
            </text>
    </svg>`;
    const el = document.createElement("div");
    el.innerHTML = svg;
    document.body.appendChild(el);
    const svgText = el.querySelector('text').getBBox();
    el.remove();
    return { Height: svgText.height, Width: svgText.width };
}

...并与该功能互操作。
在您的 .blazor文件:

@inject IJsInterop js;

@code {
   
   public class Measurement { public decimal Width { get;set; } public decimal Height { get;set; }}

   Task MeasureString(string text, string font, int size) {
      var measurement = await js.InvokeAsync<Measurement>("measureString", 
          new {
              Text = text,
              Font = font,
              Size = size
          });
      Console.WriteLine($"Width: {measurement.Width} Height: {measurement.Height}";
   }
}

以上代码的平均值为 2ms每次通话。
出于好奇，我还找到了一种使用库 SixLabors.Fonts 对原生 c# 进行(或多或少)相同测量的方法。 .
以下代码为您提供了测量结果。字体本身必须首先作为 Stream 提供。 ，所以相当多的工作。此外，测量产生的结果与上面的 js 代码不同，因此可能与 SVG 测量不兼容。我用过 C:\Windows\Fonts\Arial.ttf作为 MemoryStream 中的来源.

using SixLabors.Fonts;

var fontStream = GetFontAsMemoryStream();
var fonts = new FontCollection();    
var font = fonts.Install(fontStream);
var renderOption = new RendererOptions(font.CreateFont(size));
var measurement = TextMeasurer.Measure(text, renderOption);

以上代码均值为 2500ms ，所以比js互操作慢1000多倍。可能缓存 fonts.Install() 的结果不知何故，但我没有立即成功重新使用 font实例无一异常(exception)。