Question

我正在使用fabricJs textbox，

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＆gt;对于在svg中撰写tcpdf时造成问题的每个文字。它显示pdf中文本之间的错误间距。

是错误还是默认行为？

Answer 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);

Answer 2

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

fabricJs to toSvg导致文本框出现问题

2 个答案: