Question

我无法让textAlign在fabric.js中工作fontSize，fontBackground正常工作，但不能正常工作。我错过了什么吗？

var canvas = new fabric.Canvas('myCanvas');

$('button.addText').click(function() {
  var text = new fabric.Text($(this).siblings().val(), {
    textAlign: 'center',
    fontSize: 40
  });
  canvas.add(text);
});

Answer 1

var canvas = new fabric.Canvas('myCanvas');
var align = ["left", "center", "right" , "justify"];
var el = document.getElementById('res');
var txt = 'FabricJS \n is \nAwsome';

var text = new fabric.Text(txt, {
    textAlign: 'left', //"left", "center", "right" or "justify".
    width:450,
    fontSize: 40
  });
canvas.add(text);
changeAlign();

function changeAlign(){
 var val = align[Math.floor(Math.random() * align.length)];
 text.set('textAlign',val);
 el.innerHTML = 'Text Alignment : ' +val;
 canvas.setActiveObject(text);
 canvas.renderAll();
}

canvas {
 border : 2px dotted blue;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/1.7.17/fabric.min.js"></script>
<canvas id="myCanvas" width="600" height="300"></canvas><br>
<button onclick='changeAlign()'>Change align</button><p id='res'></p>

@AndreaBogazzi他是对的。在文本中，框取决于第一行的宽度，如果需要，它将适用于多行文本。检查代码段。

Answer 2

我想主要的一点是，如果文本只是一行，则Fabric会将文本边界框的大小调整为必要的长度，并且不会有任何对齐。

如果文本是多行的，则对齐应该有效。

对齐位于框内，而不是文本增长时框增长的方向。

Answer 3

这取决于对象的类型。如果您有IText或Text，则对齐方式仅适用于画布本身区域。

例如，如果您想在画布中心对齐IText类型，则可以使用：

canvas.getActiveObject().centerV();
canvas.getActiveObject().setCoords(); 
canvas.renderAll();

如果您想将文字本身居中，它只适用于文本框类型，那么您就可以使用：

canvas.getActiveObject().textAlign = "center";

fabric.js无法将文本与textAlign

3 个答案: