Frabricjs - Область ввода текстового поля

Question

Я пытаюсь добавить некоторые поля ввода/область текста на холст.

Я хотел бы как-то установить область отображения этого текста -> (x, y) -позиция, ширина, высота области. Содержимое не должно течь за пределы определенной области.

Возможно ли автоматическое изменение размера шрифта, чтобы содержимое соответствовало определенной области? Например, как здесь: http://www.my-wallsticker.de/index.php?cl=designer&html5=1&text=fabricjs

Вот часть моего кода, где я добавляю текстовое поле с областью.

var title_input = new fabric.IText('Custom Text', { 
       fontFamily: 'arial black', 
       fontStyle: 'normal', 
       fontSize: $j('#configurator-fontsize').val(), 
       fill: 'red', 
       hasControls: false, 
       lockMovementX: true, 
       lockMovementY: true, 
       centerTransform: true, 
       left: 0, 
       top: 0 

});

var placeholder_title_input = new fabric.Rect({ 
       angle: 0, 
       backgroundColor: 'transparent', 
       fill: 'transparent', 
       borderColor: '#000', 
       originX: 'center', 
       originY: 'center', 
       selectable: true, 
       width: 300, 
       height: 90 

});

var title_group = new fabric.Group([placeholder_title_input, title_input], { 
       borderColor: '#f00', 
       selectable: true, 
       lockMovementX: true, 
       lockMovementY: true, 
       hasControls: false, 
       left: zero_position_left + 40, 
       top: zero_position_top - 60 

});

canvas.add(title_group);  

Весь код находится под my jsfiddle.

Я также заметил, что мой текст-выравнивание не работает, как бы я хотел, чтобы он работал. Если я изменил выравнивание для «title_input», ничего не изменится. Я бы хотел, чтобы он выравнивал содержимое внутри данной области.

Заранее благодарю вас за вашу помощь.

Answer 1

Чтобы проверить, находится ли активный объект в границах, мы можем определить границу как прямоугольную область.

// Define the boundary; TL = top left, BR = bottom right 
var TL_x = 0; 
var TL_y = 0; 
var BR_x = 50; 
var BR_y = 50; 

var activeObject = canvas.getActiveObject(); 
var checkFit = activeObject.isContainedWithinRect(new fabric.Point(TL_x, TL_y), new fabric.Point(BR_x, BR_y)); 
if(checkFit) console.log('In boundary.'); 
else console.log('Out of boundary.'); 

Каждый объект холста инкапсулируется в BoundingRect. Мы можем использовать это, чтобы получить ширину и высоту элемента. Если мы хотим проверить, является ли активный объект слишком широким или слишком длинным, мы могли бы использовать