Javascript fabric.IText到SVG为每个字符生成TSPAN

如果没有对文本应用特殊格式，如何强制fabricjs IText对象生成单个文本

使用初始文本值创建新的fabric.IText对象实例时，svg输出与预期一致

例如：

    var textObject = new fabric.IText('{{variable2}}', {
        left: options.e.layerX,
        top: options.e.layerY,
        fontFamily: 'helvetica',
        fontSize: 10,
        angle: 0,
        fill: '#000000',
        scaleX: 1,
        scaleY: 1,
        fontWeight: '',
        originX: 'left',
        hasRotatingPoint: true,
        centerTransform: true
    });

    canvas.add(textObject);

调用canvas.toSVG后生成以下输出，这是我所期望的

<text font-family="helvetica" ...>
     <tspan x="-27" y="2.246" fill="#000000">{{variable2}}</tspan>
</text>

编辑：我相信这与插入字符时插入的复制样式有关。看

具体而言： activeObject.insertStyleObjects\u chars、isEndOfLine、activeObject.copiedStyles

---

有没有办法在不添加样式的情况下插入字符？

我修改了fabric.js中的_setSVGTextLineChars以满足我的需要

修改后的方法按样式对所有字符进行分组。如果当前样式与以前的样式不同，将定义新的分组

对于每个组，将使用相关样式创建一个tspan

我将在下面发布代码片段，直到其他人能够提供更好的答案

    /**
     * @private
     */
    _setSVGTextLineChars: function (lineIndex, textSpans, height, textLeftOffset, textBgRects) {

        var chars = this._textLines[lineIndex].split(''),
            lineLeftOffset = this._getSVGLineLeftOffset(lineIndex) - this.width / 2,
            lineOffset = this._getSVGLineTopOffset(lineIndex),
            heightOfLine = this._getHeightOfLine(this.ctx, lineIndex);

        var previousStyleDecl = undefined;
        var groups = [];
        var currentGroup = undefined;

        for (var i = 0, len = chars.length; i < len; i++) {
            var styleDecl = this.styles[lineIndex][i] || {};

            var a = JSON.stringify(previousStyleDecl), b = JSON.stringify(styleDecl);
            if (!a) a = '';
            if (!b) b = '';
            var areEqualStyles = (a.split('').sort().join('') == b.split('').sort().join(''));

            var charWidth = this._getWidthOfChar(this.ctx, chars[i], lineIndex, i);

            // If the previous style is not defined,
            // or, the current style does not match the previous style, then
            // create a new grouping
            if (previousStyleDecl == undefined || !areEqualStyles) {

                var prevCharOffset = 0;

                if (currentGroup != undefined) {
                    prevCharOffset = currentGroup.charWidth;
                }

                currentGroup = {
                    style: styleDecl,
                    text: chars[i],
                    charWidth: charWidth,
                    charOffset: prevCharOffset
                }

                groups.push(currentGroup);
            }

            // if the styles are equal, then add the current character to the group
            if (areEqualStyles) {
                if (currentGroup) {
                    currentGroup.text += chars[i];
                    currentGroup.charWidth += charWidth;
                }
            } 

            previousStyleDecl = styleDecl;
        }

        var charOffset = 0;
        for (var j = 0; j < groups.length; j++) {
            var group = groups[j];

            charOffset += group.charOffset;

            textSpans.push(this._createTextCharSpan(group.text, group.style, lineLeftOffset, lineOffset.lineTop + lineOffset.offset, charOffset));

            if (group.style.textBackgroundColor) {
                textBgRects.push(this._createTextCharBg(group.style, lineLeftOffset, lineOffset.lineTop, heightOfLine, group.charOffset, charOffset));
            }
        }
    },

---

我修改了fabric.js中的_setSVGTextLineChars以满足我的需要

修改后的方法按样式对所有字符进行分组。如果当前样式与以前的样式不同，将定义新的分组

对于每个组，将使用相关样式创建一个tspan

我将在下面发布代码片段，直到其他人能够提供更好的答案

    /**
     * @private
     */
    _setSVGTextLineChars: function (lineIndex, textSpans, height, textLeftOffset, textBgRects) {

        var chars = this._textLines[lineIndex].split(''),
            lineLeftOffset = this._getSVGLineLeftOffset(lineIndex) - this.width / 2,
            lineOffset = this._getSVGLineTopOffset(lineIndex),
            heightOfLine = this._getHeightOfLine(this.ctx, lineIndex);

        var previousStyleDecl = undefined;
        var groups = [];
        var currentGroup = undefined;

        for (var i = 0, len = chars.length; i < len; i++) {
            var styleDecl = this.styles[lineIndex][i] || {};

            var a = JSON.stringify(previousStyleDecl), b = JSON.stringify(styleDecl);
            if (!a) a = '';
            if (!b) b = '';
            var areEqualStyles = (a.split('').sort().join('') == b.split('').sort().join(''));

            var charWidth = this._getWidthOfChar(this.ctx, chars[i], lineIndex, i);

            // If the previous style is not defined,
            // or, the current style does not match the previous style, then
            // create a new grouping
            if (previousStyleDecl == undefined || !areEqualStyles) {

                var prevCharOffset = 0;

                if (currentGroup != undefined) {
                    prevCharOffset = currentGroup.charWidth;
                }

                currentGroup = {
                    style: styleDecl,
                    text: chars[i],
                    charWidth: charWidth,
                    charOffset: prevCharOffset
                }

                groups.push(currentGroup);
            }

            // if the styles are equal, then add the current character to the group
            if (areEqualStyles) {
                if (currentGroup) {
                    currentGroup.text += chars[i];
                    currentGroup.charWidth += charWidth;
                }
            } 

            previousStyleDecl = styleDecl;
        }

        var charOffset = 0;
        for (var j = 0; j < groups.length; j++) {
            var group = groups[j];

            charOffset += group.charOffset;

            textSpans.push(this._createTextCharSpan(group.text, group.style, lineLeftOffset, lineOffset.lineTop + lineOffset.offset, charOffset));

            if (group.style.textBackgroundColor) {
                textBgRects.push(this._createTextCharBg(group.style, lineLeftOffset, lineOffset.lineTop, heightOfLine, group.charOffset, charOffset));
            }
        }
    },

    /**
     * @private
     */
    _setSVGTextLineChars: function (lineIndex, textSpans, height, textLeftOffset, textBgRects) {

        var chars = this._textLines[lineIndex].split(''),
            lineLeftOffset = this._getSVGLineLeftOffset(lineIndex) - this.width / 2,
            lineOffset = this._getSVGLineTopOffset(lineIndex),
            heightOfLine = this._getHeightOfLine(this.ctx, lineIndex);

        var previousStyleDecl = undefined;
        var groups = [];
        var currentGroup = undefined;

        for (var i = 0, len = chars.length; i < len; i++) {
            var styleDecl = this.styles[lineIndex][i] || {};

            var a = JSON.stringify(previousStyleDecl), b = JSON.stringify(styleDecl);
            if (!a) a = '';
            if (!b) b = '';
            var areEqualStyles = (a.split('').sort().join('') == b.split('').sort().join(''));

            var charWidth = this._getWidthOfChar(this.ctx, chars[i], lineIndex, i);

            // If the previous style is not defined,
            // or, the current style does not match the previous style, then
            // create a new grouping
            if (previousStyleDecl == undefined || !areEqualStyles) {

                var prevCharOffset = 0;

                if (currentGroup != undefined) {
                    prevCharOffset = currentGroup.charWidth;
                }

                currentGroup = {
                    style: styleDecl,
                    text: chars[i],
                    charWidth: charWidth,
                    charOffset: prevCharOffset
                }

                groups.push(currentGroup);
            }

            // if the styles are equal, then add the current character to the group
            if (areEqualStyles) {
                if (currentGroup) {
                    currentGroup.text += chars[i];
                    currentGroup.charWidth += charWidth;
                }
            } 

            previousStyleDecl = styleDecl;
        }

        var charOffset = 0;
        for (var j = 0; j < groups.length; j++) {
            var group = groups[j];

            charOffset += group.charOffset;

            textSpans.push(this._createTextCharSpan(group.text, group.style, lineLeftOffset, lineOffset.lineTop + lineOffset.offset, charOffset));

            if (group.style.textBackgroundColor) {
                textBgRects.push(this._createTextCharBg(group.style, lineLeftOffset, lineOffset.lineTop, heightOfLine, group.charOffset, charOffset));
            }
        }
    },