iText 样式数组上的 FabricJS lineHeight

Question

我正在用 FabricJs 将我的头撞到墙上。我正在寻找一种能够将行高应用于 iText 上的样式数组的解决方案；它似乎完全忽略了它。

所以如果我有 2 行文本并且希望第一行的行高为 5：

"测试线 1\n" "测试线 2\n"

我尝试如下的字符数组，它将字体大小应用于每个字符，但完全忽略了行高：

0:{
    0:{
        lineHeight:5,
        fontSize:10
    },
    1:{
        lineHeight:5,
        fontSize:10
    },
    2:{
        lineHeight:5,
        fontSize:10
    },
    3:{
        lineHeight:5,
        fontSize:10
    },
    4:{
        lineHeight:5,
        fontSize:10
    },
    5:{
        lineHeight:5,
        fontSize:10
    },
    6:{
        lineHeight:5,
        fontSize:10
    },
    7:{
        lineHeight:5,
        fontSize:10
    },
    8:{
        lineHeight:5,
        fontSize:10
    },
    9:{
        lineHeight:5,
        fontSize:10
    },
    10:{
        lineHeight:5,
        fontSize:10
    },
    11:{
        lineHeight:5,
        fontSize:10
    }
}    

Answer 1

将styles设置为对象，其中第一级是行号，然后是字符。

演示

var text = "Test Line 1\nTest Line 2\n";

var canvas = new fabric.Canvas('canvas', {
  selection: false
});

var textObj = new fabric.Text(text, {
lineHeight:5,
  styles: {
    1: {
      0: {
        fontSize: 10
      },
      1: {
        fontSize: 10
      },
      2: {
        fontSize: 10
      },
      3: {
        fontSize: 10
      },
      4: {
        fontSize: 10
      },
      5: {
        fontSize: 10
      },
      6: {
        fontSize: 10
      },
      7: {
        fontSize: 10
      },
      8: {
        fontSize: 10
      },
      9: {
        fontSize: 10
      },
      10: {
        fontSize: 10
      },
      11: {
        fontSize: 10
      }
    }
  }
});

canvas.add(textObj);

canvas{
 border:2px solid #000;
}

<script src="https://rawgit.com/kangax/fabric.js/master/dist/fabric.js"></script>
<canvas id='canvas' width=500 height=400>

对于 V-1.7.5，fabric.IText 包含样式属性，fabric.Text 不存在

演示

var text = "Test Line 1\nTest Line 2\n";

var canvas = new fabric.Canvas('canvas', {
  selection: false
});

var textObj = new fabric.IText(text, {
  lineHeight:5,
  styles: {
    1: {
      0: {
        fontSize: 5
      },
      1: {
        fontSize: 10
      },
      2: {
        fontSize: 10
      },
      3: {
        fontSize: 10
      },
      4: {
        fontSize: 10
      },
      5: {
        fontSize: 10
      },
      6: {
        fontSize: 10
      },
      7: {
        fontSize: 10
      },
      8: {
        fontSize: 10
      },
      9: {
        fontSize: 10
      },
      10: {
        fontSize: 10
      },
      11: {
        fontSize: 10
      }
    }
  }
});

canvas.add(textObj);

canvas{
 border:2px solid #000;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/1.7.5/fabric.js"></script>
<canvas id='canvas' width=500 height=400>