Frabricjs - 限制文本輸入區域

我想添加一些輸入字段/文本區域到畫布。Frabricjs - 限制文本輸入區域

我想以某種方式設置該文本可以顯示的區域 - >（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」的對齊方式，則不會有任何更改。我希望它能對齊給定區域內的內容。

非常感謝您的幫助。

來源

2014-09-30 knospe

要檢查活動對象是否處於邊界，我們可以將邊界定義爲矩形區域。

// 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中。我們可以使用它來獲取元素的寬度和高度。如果我們想檢查活動對象是太寬還是太長，我們可以使用

來源

2014-10-15 10:25:49 knospe

Frabricjs - 限制文本輸入區域

回答

相關問題