Блог

Я использую 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 > для каждого текста, который вызывает проблемы при записи svg tcpdf . Он показывает неправильный интервал между текстом pdf .

Это ошибка или поведение по умолчанию?

Текстовое поле расширяет 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);
  

Вы используете itext. Попробуйте использовать обычный текст