设置textAlign基于文本/ iText /文本框对象的每行

时间:2016-09-30 09:34:31

标签: fabricjs

设置textAlign on a line on a text / iText / textbox object

我想为文本/ iText / textbox对象的每一行设置单独的文本对齐。

1 个答案:

答案 0 :(得分:0)

我认为目前没有办法做到这一点。子范围样式按字符设置,即使您为一行中的每个字符赋予相同的textAlign,也不会影响文本的布局方式。 textAlign仅适用于整个对象。

window.canvas = new fabric.Canvas('c', { selection: false, preserveObjectStacking:true });

canvas.add(new fabric.IText(`some text
here on
multiple lines`,{ 
  left: 100, 
  top: 100, 
  fill: 'red', 
  originX: 'left', 
  originY: 'top',
  centeredRotation: true,
  textAlign: 'center',
  styles: {
  	0: {
    	0: { fill: 'blue', textAlign: 'right' },
    	1: { fill: 'blue', textAlign: 'right' },
    	2: { fill: 'blue', textAlign: 'right' },
    	3: { fill: 'blue', textAlign: 'right' },
    	4: { fill: 'green', textAlign: 'right' },
    	5: { fill: 'green', textAlign: 'right' },
    	6: { fill: 'green', textAlign: 'right' },
    	7: { fill: 'green', textAlign: 'right' },
    	8: { fill: 'green', textAlign: 'right' }
    }
  }
}));
<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/1.6.4/fabric.min.js"></script>
<canvas id="c" width="600" height="600"></canvas>