Ткань js ограничения текста

Question

Как я могу достичь этого в fabric.js?

Ограничения текста: 1) - Если пользователь вводит слишком много текста в текстовое поле, он не должен позволять им, а сообщение должно отображаться, указывая им, чтобы выбрать другое сообщение или найти другой шрифт. Найден ответ на это ..

Просьба помочь мне для remaning 2

2) - если пользователь печатает сообщения, где есть много места осталось в текстовом поле в стороны, текстовое поле должен изменяться в пределах 1 мм от текста. Я предполагаю, что это в случае, если текстовое поле имеет пунктирную границу. Также обратите внимание, что фоновый рисунок не будет находиться под текстовым полем, что является еще одной причиной сокращения текстового поля, если текст не заполняет ширину (так что может отображаться больше фона).

3) - Клиент всегда хочет, чтобы максимальная высота текстового окна была максимальной, так что вершины букв всегда касались верхней части, а днища букв всегда касались дна, независимо от того, является ли это микс нижнего и верхнего регистров и независимо от того, имеют ли буквы хвосты.
Вот несколько примеров, чтобы объяснить, что должно произойти (пожалуйста, прочитайте до конца списка, чтобы правильно понять):
слово «HELLO» - все буквы будут касаться верхнего и нижнего
Слово «Hello» - «H» и «ll» коснутся верхней и нижней части
Слово «aaaa» - хотя нижний регистр коснется верхней и нижней части
Слово «aaah» - «h» коснется верхней и нижней частей, а «Aaa» будет касаться только нижнего
Слово «большой» - потому что «g» опускается, «g» коснется нижней части, но
«би» не будет. Слово действительно будет очень маленьким, потому что «b» коснется вершины, но не снизу, «g» коснется нижней, а не верхней, а «i» не коснется.

Answer 1

Для задачи 2, вам нужно, чтобы поймать событие,

, а затем внутри функции вы должны получить ширину текстового поля и ширины фактического текста и настроить ширину текстового поля, соответственно, что-то вроде

canvas.on('text:editing:exited', onTextExited) 
onTextExited = function(event) 
{ 
var onemm = 10; //Need to calculate what one mm is in pixels 
var canvasObj=event.target; 
if(canvasObj.width > canvasObj._getTextWidth()) 
{ 
//Adjust the width of object 
canvasObj.width = canvasObj._getTextWidth() + onemm; 
canvasObj.setCoords(); 
} 

}