fabric.js无法使文本与textAlign对齐。

Question

我无法在fabric.js中使textAlign起作用。fontSize、fontBackground正常工作，但是textAlign没有。我是否遗漏了什么？

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);
});

- Aleksandra Chuprova

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 他是对的。在文本中，文本框取决于第一行的宽度，如果你想要的话，它也适用于多行文本。请查看片段。

- Durga

---

@AndreaBogazzi 已更改为 Text。从未想过这会起作用。 - Durga

谢谢提供代码。我没有意识到这适用于1.多行文本和2.它绑定到textBox。那么有没有办法将textBox的宽度设置为画布的宽度？或者相对于画布对齐textBox？ - Aleksandra Chuprova

@AleksandraChuprova，你可以将画布宽度设置为文本框，如果是多行，则对齐将起作用。 - Durga

Answer 2

我猜主要问题在于，如果文本只有一行，面料将会根据所需长度调整文本边界框的大小，而且不需要任何对齐操作。

如果文本是多行的，那么对齐就应该起作用了。

对齐是在框内部进行的，而不是文本增长时框增长的方向。

- AndreaBogazzi

---

感谢您指出它可以在多行上工作的事实。 - Aleksandra Chuprova

Answer 3

这取决于对象的类型。如果您有例如IText或Text，则对齐仅在画布本身的区域中起作用。

例如，如果您想将IText类型与画布的中心对齐，则应使用：

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

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

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

- Theo I.