如何检查fabricjs文本是多行的?

时间:2016-04-04 12:41:15

标签: fabricjs

我正在使用fabric js。 今天我打动了这个问题“如何检查fabricjs文本是多行?”。 请帮帮我。提前谢谢。

1 个答案:

答案 0 :(得分:3)

fabricjs文字具有_textLines属性。如果文本有多行,则此属性将每行添加为数组。因此,我们可以使用此行进行检查。

var canvas = window._canvas = new fabric.Canvas('c');

$('#multi').click(function(){
	canvas.clear();
  var text = new fabric.Text('Hai this is\nmulti line\nHello World', {});
  canvas.add(text);
  $('#check').removeAttr('disabled')
})
$('#single').click(function(){
	canvas.clear();
  var text = new fabric.Text('Hai this is single line Hello World', {});
  canvas.add(text);
  $('#check').removeAttr('disabled')
})
$('#check').click(function(){
	console.log(canvas.getObjects()[0]._textLines.length)
  check = canvas.getObjects()[0]._textLines.length;
	if(check>1){
  	alert("hey this is multi line text")
  }
  else if(check==1)
  {
  	alert("hey this is single line")
  }
}); 
<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/1.5.0/fabric.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<canvas id="c" width="400" height="100"></canvas>
<button id="multi">add multi line text
</button>
<button id="single">add single line text
</button>
<button id="check" disabled="">check
</button>

相关问题