подгонка текста в поле

Question

на моем веб-сайте я разрешаю пользователям создавать картинки с указанными ими линиями текста, нарисованными на картинке

В настоящее время я использую для этого конверта imagemagick - я указываю svg шаблон и позволяю конвертировать делать все остальное

вот часть кода, которая отвечает за вывод текста на картинке

  <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?если нет, то какие могут быть другие решения

Answer 1

Вы можете добавить скрипт в шаблон SVG, который вызывается при загрузке SVG и использует getComputedTextLength () для изменения размера шрифта. Это немного хакерское решение, но, похоже, оно работает.

Вот быстрый пример, который рисует прямоугольник и текст внутри него. Размер текста должен быть изменен таким образом, чтобы он всегда помещался в поле независимо от его длины (по крайней мере, до точки):

Чтобы вызвать код при загрузке SVG, включите onload = "int (evt)" в тег SVG.

<?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, чтобы правильно отцентрировать текст.

Answer 2

решено путем отказа от svg и выполнения всего с imagemagick convert и mvg template

вот пример упрощенного скрипта на случай, если кто-то преследует нечто подобное

скрипт ставит изображение и заголовок на холст. Заголовок создается с помощью отдельной команды конвертирования, сохраняется как временный файл и затем помещается на холст

#!/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