fabricJs toSvg 导致文本框出现问题答案

【问题标题】：fabricJs to toSvg causing trouble for textboxfabricJs toSvg 导致文本框出现问题
【发布时间】：2017-02-13 16:45:20
【问题描述】：

我正在像这样使用fabricJstextbox，

var text = 'Type Text Here';

    var textSample = new fabric.Textbox(text, {
        left: 200,
        top: 70,
        width: 200,
        height: 20,
        fontFamily: 'Helvetica',
        fontWeight: '',
        fontSize: parseInt('25'),
        originX: 'center',
        hasRotatingPoint: true,
        centerTransform: true,
    });

    canvas.add(textSample);

当我这样做时，

fabric.log('SVG output with viewBox attribute: ', canvas.toSVG({
            viewBox: {
                x: 50,
                y: 50,
                width: 250,
                height: 250
            }
        }));

它像这样创建跨度，

<tspan x="-100" y="7.87" fill="rgb(0,0,0)">Type Text Here</tspan>

没关系，但是如果我在该文本框中更改文本，如果我再次生成 svg 将看起来像这样，

<text font-family="Helvetica" font-size="25" style="stroke: none; stroke-width: 1; stroke-dasharray: none; stroke-linecap: butt; stroke-linejoin: miter; stroke-miterlimit: 10; fill: rgb(0,0,0); fill-rule: nonzero; opacity: 1;" >
        <tspan x="-100" y="7.87" style="stroke: none; stroke-width: 0; stroke-dasharray: none; stroke-linecap: butt; stroke-linejoin: miter; stroke-miterlimit: 4; fill: rgb(0,0,0); fill-rule: ; opacity: 1;">t</tspan>
        <tspan x="-93" y="7.87" style="stroke: none; stroke-width: 0; stroke-dasharray: none; stroke-linecap: butt; stroke-linejoin: miter; stroke-miterlimit: 4; fill: rgb(0,0,0); fill-rule: ; opacity: 1;">e</tspan>
        <tspan x="-79" y="7.87" style="stroke: none; stroke-width: 0; stroke-dasharray: none; stroke-linecap: butt; stroke-linejoin: miter; stroke-miterlimit: 4; fill: rgb(0,0,0); fill-rule: ; opacity: 1;">s</tspan>
        <tspan x="-66" y="7.87" style="stroke: none; stroke-width: 0; stroke-dasharray: none; stroke-linecap: butt; stroke-linejoin: miter; stroke-miterlimit: 4; fill: rgb(0,0,0); fill-rule: ; opacity: 1;">t</tspan>
    </text>

它将为每个文本生成<tspan>，这会在tcpdf 中写入svg 时造成麻烦。它显示pdf 中文本之间的间距错误。

是错误还是默认行为？

【问题讨论】：

标签： svg fabricjs

【解决方案1】：

Textbox 扩展了 i-text，i-text 自己保存每个字母，以便您可以单独更改每个字母的颜色。

常规文本改为保存文本块。尝试使用文本：

var text = 'Type Text Here';

var textSample = new fabric.Text(text, {
    left: 200,
    top: 70,
    width: 200,
    height: 20,
    fontFamily: 'Helvetica',
    fontWeight: '',
    fontSize: parseInt('25'),
    originX: 'center',
    hasRotatingPoint: true,
    centerTransform: true,
});

canvas.add(textSample);

【讨论】：

【解决方案2】：

您正在使用 itext。尝试使用常规文本

【讨论】：

我可能不熟悉fabricjs，但我在问题的任何地方都看不到itext这个词。
我这里没有使用 iText
是的，你是......见上面的答案。