Fabricjs文本间距

Question

我已经重写了fabricjs文本对象来设置字母间距

fabric.util.object.extend(fabric.Text.prototype, {
    letterSpace: 0,
    _renderChars: function(method, ctx, chars, left, top) {
        if(!this.letterSpace){
            ctx[method](chars, left, top);
            return;
        }
        var charShift = 0;
        for(var i = 0; i < chars.length; i++){
            if(i > 0){
                charShift += this.letterSpace + ctx.measureText(chars.charAt(i-1)).width;
           }
           ctx[method](chars.charAt(i), left+charShift, top);
       }
    },
    _getLineWidth: function(ctx, lineIndex) {
        if (this.__lineWidths[lineIndex]) {
            return this.__lineWidths[lineIndex];
        }
        var lineLength = this._textLines[lineIndex].length;
        var additionalSpaceSum = 0
        if(lineLength > 0){
            additionalSpaceSum = this.letterSpace * (lineLength - 1);
        }
        this.__lineWidths[lineIndex] = ctx.measureText(this._textLines[lineIndex]).width + additionalSpaceSum;
        return this.__lineWidths[lineIndex];
    }
});

间距很好，但宽度不正确，如何改进宽度计算？

我在这个问题中改进了我的代码，现在它工作得很好))

很抱歉没有显示之前的错误，但这里太难明确的代码，我已经纠正了这个问题的前面。

但是我已经写了左文本对齐，如果你使用不同的对齐，你需要更正它。对我来说，这已经足够了

Answer 1

我已经改进了我的代码，现在它工作得很好)对不起。

但是我已经写了左文本对齐，如果你使用不同的对齐，你需要更正它。对我来说，这已经足够了

fabric.util.object.extend(fabric.Text.prototype, {
    letterSpace: 0,
    _renderChars: function (method, ctx, chars, left, top) {
        if (!this.letterSpace) {
            ctx[method](chars, left, top);
            return;
        }
        var charShift = 0;
        for (var i = 0; i < chars.length; i++) {
            if (i > 0) {
                charShift += this.letterSpace + ctx.measureText(chars.charAt(i - 1)).width;
            }
            ctx[method](chars.charAt(i), left + charShift, top);
        }
    },
    _getLineWidth: function (ctx, lineIndex) {
        var lineLength = this._textLines[lineIndex].length;
        var additionalSpaceSum = 0
        if (lineLength > 0) {
            additionalSpaceSum = this.letterSpace * (lineLength - 1);
        }
        this.__lineWidths[lineIndex] = ctx.measureText(this._textLines[lineIndex]).width + additionalSpaceSum;
        return this.__lineWidths[lineIndex];
    },
    _renderExtended: function (ctx) {
        this.clipTo && fabric.util.clipContext(this, ctx);
        this.extendedRender = true;
        this._renderTextBackground(ctx);
        this._renderText(ctx);

        this._renderTextDecoration(ctx);
        this.clipTo && ctx.restore();
    }
});

Answer 2

此代码适用于所有路线：

fabric.util.object.extend(fabric.Text.prototype, {
letterSpace: 0,
_renderChars: function (method, ctx, chars, left, top) {
    if (!this.letterSpace) {
        ctx[method](chars, left, top);
        return;
    }
    var characters = String.prototype.split.call(chars, '');
    if(this.textAlign == 'left'){
        var charShift = 0;
        for (var i = 0; i < chars.length; i++) {
            if (i > 0) {
                charShift += this.letterSpace + ctx.measureText(chars.charAt(i - 1)).width;
            }
            ctx[method](chars.charAt(i), left + charShift, top);
        }    
    }else if(this.textAlign == 'right'){

        characters.reverse();
        chars = characters.join('');
        var charShift = 0;
        for (var i = 0; i < chars.length; i++) {
            if (i > 0) {
                charShift += this.letterSpace + ctx.measureText(chars.charAt(i - 1)).width;
            }
            ctx[method](chars.charAt(i), left - charShift, top);
        }    
    }else if(this.textAlign == 'center'){

        var totalWidth = 0;
        for (var i = 0; i < characters.length; i++) {
            totalWidth += (ctx.measureText(characters[i]).width + this.letterSpace);
        }
        var currentPosition = left - (totalWidth / 2);


        var charShift = 0;
        for (var i = 0; i < chars.length; i++) {
            if (i > 0) {
                charShift += this.letterSpace + ctx.measureText(chars.charAt(i - 1)).width;
            }
            ctx[method](chars.charAt(i), currentPosition + left + charShift, top);
        }    
    }

},
_getLineWidth: function (ctx, lineIndex) {
    var lineLength = this._textLines[lineIndex].length;
    var additionalSpaceSum = 0
    if (lineLength > 0) {
        additionalSpaceSum = this.letterSpace * (lineLength - 1);
    }
    this.__lineWidths[lineIndex] = ctx.measureText(this._textLines[lineIndex]).width + additionalSpaceSum;
    return this.__lineWidths[lineIndex];
},
_renderExtended: function (ctx) {
    this.clipTo && fabric.util.clipContext(this, ctx);
    this.extendedRender = true;
    this._renderTextBackground(ctx);
    this._renderText(ctx);

    this._renderTextDecoration(ctx);
    this.clipTo && ctx.restore();
}});

下面是一个示例：http://jsfiddle.net/peybdq94/