Búsqueda de sitios web

javascript - fabric.js no puede alinear el texto con textAlign


No puedo hacer que textAlign funcione en fabric.js. fontSize y fontBackground funcionan correctamente, pero textAlign no. ¿Me estoy perdiendo de algo?

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

Respuesta #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 Él tiene razón. En Text, el cuadro depende del ancho de la primera línea, si quieres entonces funcionará para textos de varias líneas. Revisa el Fragmento.

Respuesta #2

Supongo que el punto principal es que si el texto es de una sola línea, Fabric ajustará el tamaño del cuadro delimitador del texto a la longitud necesaria y no habrá ninguna alineación que hacer.

Si el texto tiene varias líneas, la alineación debería funcionar.

La alineación está DENTRO de la caja y no es la dirección en la que la caja crece cuando el texto crece.