fabricjs IText- Varied LineHeight

Question

是否有一种语法允许在一个IText对象内使用不同的线高度（lineHeight）？我试图通过将styleHeight添加到styles属性来完成此操作，但它似乎并没有解释不同的lineHeight。

styles: { 
0: { 
    0: { textDecoration: 'underline', fontSize: 80, lineHeight: 1 }, 
    1: { textBackgroundColor: 'red', lineHeight: 1 } 
}, 

渲染了lineHeight是= 1： http://jsfiddle.net/xmfw65qg/44/

渲染在lineHeight是= 2.5： http://jsfiddle.net/xmfw65qg/43/

注意，他们相同的渲染和不解释的行高。有没有不同的方式来做到这一点？

Answer 1

一旦出现“不支持的功能”，允许您将换行符的fontSize设置为较大的fontSize以模拟较高的lineHeight。

现在代码重构此过程不再工作。

您仍然可以

1）更新至最新fabricjs版本

2）覆盖_getLineHeight（）的方法，在你的风格对象大fontSize的用于设置片段

3）该行中的最后一个字符。

覆盖方法包括将for循环从“1到< len”扩展到“1 to = len”，没有别的。

var text = {"type":"i-text","originX":"left","originY":"top","left":1,"top":1,"width":230.05,"height":235.94,"fill":"#333","stroke":null,"strokeWidth":1,"strokeDashArray":null,"strokeLineCap":"butt","strokeLineJoin":"miter","strokeMiterLimit":10,"scaleX":1,"scaleY":1,"angle":0,"flipX":false,"flipY":false,"opacity":1,"shadow":null,"visible":true,"clipTo":null,"backgroundColor":"","fillRule":"nonzero","globalCompositeOperation":"source-over","transformMatrix":null,"skewX":0,"skewY":0,"text":"lorem ipsum\ndolor\nsit Amet\nconsectetur","fontSize":40,"fontWeight":"normal","fontFamily":"Helvetica","fontStyle":"","lineHeight":1.16,"textDecoration":"","textAlign":"left","textBackgroundColor":"","styles":{"0":{"0":{"fill":"red","fontSize":20,"fontFamily":"Helvetica","fontWeight":"normal","fontStyle":""},"1":{"fill":"red","fontSize":30,"fontFamily":"Helvetica","fontWeight":"normal","fontStyle":""},"2":{"fill":"red","fontSize":40,"fontFamily":"Helvetica","fontWeight":"normal","fontStyle":""},"3":{"fill":"red","fontSize":50,"fontFamily":"Helvetica","fontWeight":"normal","fontStyle":""},"4":{"fill":"red","fontSize":60,"fontFamily":"Helvetica","fontWeight":"normal","fontStyle":""},"6":{"textBackgroundColor":"yellow"},"7":{"textBackgroundColor":"yellow"},"8":{"textBackgroundColor":"yellow"},"9":{"textBackgroundColor":"yellow","fontFamily":"Helvetica","fontSize":40,"fontWeight":"normal","fontStyle":""},"11":{"fontSize":80}},"1":{"0":{"textDecoration":"underline"},"1":{"textDecoration":"underline","fontFamily":"Helvetica","fontSize":40,"fontWeight":"normal","fontStyle":""},"2":{"fill":"green","fontStyle":"italic","textDecoration":"underline"},"3":{"fill":"green","fontStyle":"italic","textDecoration":"underline"},"4":{"fill":"green","fontStyle":"italic","textDecoration":"underline","fontFamily":"Helvetica","fontSize":40,"fontWeight":"normal"}},"2":{"0":{"fill":"blue","fontWeight":"bold"},"1":{"fill":"blue","fontWeight":"bold"},"2":{"fill":"blue","fontWeight":"bold","fontFamily":"Helvetica","fontSize":40,"fontStyle":""},"4":{"fontFamily":"Courier","textDecoration":"line-through"},"5":{"fontFamily":"Courier","textDecoration":"line-through"},"6":{"fontFamily":"Courier","textDecoration":"line-through"},"7":{"fontFamily":"Courier","textDecoration":"line-through","fontSize":40,"fontWeight":"normal","fontStyle":""}, "8":{"fontSize":100}},"3":{"0":{"fontFamily":"Impact","fill":"#666","textDecoration":"line-through"},"1":{"fontFamily":"Impact","fill":"#666","textDecoration":"line-through"},"2":{"fontFamily":"Impact","fill":"#666","textDecoration":"line-through"},"3":{"fontFamily":"Impact","fill":"#666","textDecoration":"line-through"},"4":{"fontFamily":"Impact","fill":"#666","textDecoration":"line-through","fontSize":40,"fontWeight":"normal","fontStyle":""}}}}; 
 

 

 
fabric.IText.prototype._getHeightOfLine = function(ctx, lineIndex) { 
 
     if (this.__lineHeights[lineIndex]) { 
 
     return this.__lineHeights[lineIndex]; 
 
     } 
 

 
     var line = this._textLines[lineIndex], 
 
      maxHeight = this._getHeightOfChar(ctx, lineIndex, 0); 
 

 
     for (var i = 1, len = line.length; i <= len; i++) { 
 
     var currentCharHeight = this._getHeightOfChar(ctx, lineIndex, i); 
 
     if (currentCharHeight > maxHeight) { 
 
      maxHeight = currentCharHeight; 
 
     } 
 
     } 
 
     this.__lineHeights[lineIndex] = maxHeight * this.lineHeight * this._fontSizeMult; 
 
     return this.__lineHeights[lineIndex]; 
 
    }; 
 

 
var canvas = new fabric.Canvas('canvas'); 
 
canvas.add(new fabric.IText.fromObject(text));

<script src="http://www.deltalink.it/andreab/fabric/fabric.js" ></script> 
 
     <canvas id="canvas" width=500 height=400 style="height:500px;width:500px;"></canvas>