javascript - 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 包含 styles 属性，而对于 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>