ajuste de texto en el cuadro de

Question

en mi sitio web I permiten a los usuarios crear imágenes con línea de texto que especifican mostrados en el dibujo

Actualmente utilizo para que convierten ImageMagick - i especifican plantilla SVG y permiten convertir haga el resto

aquí es parte del código que se encarga de la salida de texto en la imagen

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

mi problema es que si el usuario proporciona cadenas muy largas, el texto no encaja en la imagen.

Me gustaría que el texto cambie de tamaño automáticamente a una fuente más pequeña si no se ajusta a la imagen. ¿Es posible hacer con plantillas svg? si no, lo que podría ser otras soluciones

Answer 1

resuelto por el abandono de SVG y haciendo todo con convert de ImageMagick y la plantilla MVG

aquí está el ejemplo de escritura simplificada en el caso de que alguien está tratando de obtener algo similar

guión está poniendo una imagen y un título en el lienzo. título se crea con mando separado convertido, guardado como archivo temporal y luego poner en el lienzo

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

Answer 2

Podría agregar un script dentro de la plantilla SVG que llamó cuando se cargó el SVG y usa getComputedTextLength() para cambiar el tamaño de la fuente. Es una solución algo hacky, pero parece funcionar.

Aquí hay un ejemplo rápido que dibuja una caja y texto dentro de ella. El texto debe cambiar su tamaño para que quepa siempre en el cuadro, sin importar cuánto dure (al menos hasta el punto):

Para invocar el código cuando se carga el SVG, incluya onload = "int (evt)" en el SVG etiqueta.

<?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)"> 

Entonces la secuencia de comandos real:

<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> 

I acaba de utilizar un bucle for para disminuir el tamaño de fuente hasta que la longitud del texto es menor que el máximo especificado; Estoy seguro de que hay una mejor manera de cambiar el tamaño del texto.

Por último, el texto real y la caja:

<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> 

Si cambia el texto, el tamaño de fuente debe cambiar para que se ajuste dentro de la caja. Probablemente desee cambiar los valores x e y para centrar correctamente el texto también.