在我的网站上,我允许用户使用他们在图片上绘制的指定文本行创建图片
目前我用于该 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 模板?如果没有,还有什么其他解决方案
最佳答案
您可以在 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 值以正确居中文本。
关于svg - 将文本放入框中,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/5933857/