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>