将文本适配到框内

Question

在我的网站上，我允许用户创建带有他们指定的文字线条的图片。目前，我使用ImageMagick Convert完成这项任务。我会指定SVG模板并让Convert完成其余工作。以下是负责在图片中输出文本的代码片段。

  <text text-anchor="middle" x="50%%" y="%s"
        font-family="Times New Roman" font-size="55"
        style="fill:rgb(255,255,255);">
    %s
  </text>

我的问题是，如果用户提供非常长的字符串，文本就无法适应图像。

如果文本不适合图片，我希望它能自动调整大小以适合较小的字体。使用SVG模板是否可能实现这一点？如果不行，还有什么其他解决方案？

- Pavel K.

---

参见：https://dev59.com/lHA85IYBdhLWcg3wHvo0 - Has QUIT--Anony-Mousse

Answer 1

你可以在SVG模板中添加一个脚本，当SVG加载时调用它，并使用getComputedTextLength()来调整字体大小。这是一个有点hacky的解决方案，但似乎可行。

下面是一个快速示例，它绘制了一个框和一些文本。文本应该被调整大小以适应框的大小，无论它有多长（至少到某个程度）：

要在SVG加载时调用代码，请在SVG标记中包含onload="int(evt)"。

<?xml version="1.0" encoding="UTF-8" standalone="no"?> 
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.0//EN" "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd"> 
<svg xmlns="http://www.w3.org/2000/svg"
     xmlns:xlink="http://www.w3.org/1999/xlink"
     width="400" height="80"
     onload="init(evt)"> 

接下来是实际的脚本：

  <script type="text/ecmascript">
    <![CDATA[
    
    function init(evt)
    {
        if ( window.svgDocument == null )
        {
            svgDocument = evt.target.ownerDocument;
        }

        maximum_length = 300;
        my_text = svgDocument.getElementById('text-to-resize');

        for (var font_size=55; font_size>0; font_size--)
        {
            if(my_text.getComputedTextLength() < maximum_length){break;}
            my_text.setAttributeNS(null, "font-size", font_size);
        }

    }
    
    ]]>
  </script>

我刚刚使用了一个for循环来递减字体大小，直到文本长度小于最大值；我相信有更好的方法来调整文本大小。

最后是实际的文本和框：

<rect id="rect1" x="20" y="10" width="320" height="50" fill="white" stroke="black"/>
<text id="text-to-resize"
      text-anchor="middle"
      x="170" y="50"
      font-family="Times New Roman" font-size="55">
 whatever text
</text>
</svg>

如果您更改文本，字体大小应该随之改变以适应框内。您可能需要更改x和y值以正确居中文本。

- Peter Collingridge

---

啊，那将是一个很好的解决方案，但不幸的是，ImageMagick转换SVG到JPG时不执行ECMAScript :( - Pavel K.

哦，真遗憾。我不知道如何在没有 Ecmascript 的情况下完成它。 - Peter Collingridge

Answer 2

通过放弃使用svg并使用imagemagick convert和mvg模板来解决问题

如果有人追求类似的东西，这里是简化的脚本示例

脚本将图像和标题放在画布上。 标题是用单独的convert命令创建的，保存为临时文件，然后放到画布上。

#!/bin/sh

TEMPLATE="
push graphic-context
viewbox 0 0 600 600 
affine 1 0 0 1 0.0 0.0
push graphic-context
fill 'rgb(0,0,0)'
rectangle 0,0 600,600
pop graphic-context
push graphic-context
image Over 38,38 338,338 '%s' 
pop graphic-context
push graphic-context
image Over 36,400 529,55 '%s' 
pop graphic-context
pop graphic-context
";

#1. creating label fitting specified proportions 
#2. converting mvg template to jpeg image (and trimming it in process) 
#3. removing temp file with label

convert -size 529x55 -background black -family "Times New Roman" -gravity center -fill white label:"$2" "tmp/$1title.jpg" && printf "$TEMPLATE"  "images/$1.jpg" "tmp/$1title.jpg"  | convert mvg:- -trim +repage -bordercolor black -border 36  "images/$1converted.jpg" && rm "tmp/$1title.jpg"

#script parameters: $1 is image id, $2 is title text

- Pavel K.