代码之家 › 专栏 › 技术社区 › Glen Elkins

iText样式数组上的FabricJS LineHeight

fabricjs javascript

Glen Elkins · 技术社区 · 6 年前

我的头撞在墙上。我正在寻找一个能够将线条高度应用到IText上的样式数组的解决方案;它似乎完全忽略了它。

因此,如果我有两行文本,希望第一行的行高为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
    }
}

1 回复 | 直到 6 年前

Durga 6 年前

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

帆布{
边框:2倍纯色000;
}

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