fabric.js не может выровнять текст с textAlign

Question

fabric.js не может выровнять текст с textAlign

1

Я не могу получить textAlign, работающий в fabric.js. 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 03 авг. 2017, в 16:33

Источник

Теги:

javascript

fabricjs

3 ответа

0

Это зависит от типа объекта. Если у вас есть, например, IText или Text выравнивание будет работать только в области самого холста.

Например, если вы хотите выровнять тип IText в центре холста, вы должны использовать:

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

Если вы хотите центрировать текст, он будет применяться только к типу Textbox, тогда вы сможете использовать:

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

Theo I. 22 дек. 2017, в 08:33

0

Я предполагаю, что основное дело в том, что если текст имеет только одну строку, ткань будет изменять размер ограничивающего прямоугольника текста до необходимой длины и не будет никакого выравнивания.

Если текст является многострочным, выравнивание должно работать.

Выравнивание - это ВСТАВЛЯЙТЕ поле и не является тем направлением, в котором размер окна увеличивается, когда текст растет.

AndreaBogazzi 05 авг. 2017, в 19:33

0

Спасибо за указание на то, что он работает на нескольких строках.
Aleksandra Chuprova 08 авг. 2017, в 10:06

Ещё вопросы

Спасибо за указание на то, что он работает на нескольких строках.

Durga · Accepted Answer · 2017-08-03T12-48-00.000Z

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 Он прав. В текстовом поле зависит от ширины первой строки, если вы хотите, то она будет работать для многострочных текстов. Проверьте фрагмент.

ткань. Текст должен работать в любом случае.
@AndreaBogazzi Я. Ченг в текст. Никогда не думал, что это будет работать.
Спасибо за код. Я не осознавал, что это работает с 1. многострочным текстовым и 2. он ограничен textBox. Есть ли способ установить ширину textBox на ширину холста? или иначе выровнять textBox относительно холста?
@AleksandraChuprova вы можете установить ширину холста для текстового поля, если это многострочный, то выравнивание будет работать.