Question

是否有一种语法可以在一个IText对象中允许不同的行高（lineHeight）？我试图通过将linesHeight添加到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

一旦有了＃34;不支持的功能＆＃34;允许您将换行符的fontSize设置为大fontSize以模拟更高的lineHeight。

现在通过代码重构，此过程不再起作用。

你仍然可以

1）更新到最新的fabricjs版本

2）覆盖_getLineHeight（）方法，如代码片段

3）在你的样式对象中为行中的最后一个字符设置一个大的fontSize。

覆盖方法包括将for循环从＆＃34; 1扩展到＆lt; LEN＆＃34; to＆＃34; 1 to = len＆＃34;没有别的。

＆＃13;

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));

＆＃13;

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

＆＃13;

fabricjs IText- Varied LineHeight

1 个答案: