Fabric Js - 限制文本输入区域答案

【问题标题】：Frabricjs - Limit Text Input AreaFabric Js - 限制文本输入区域
【发布时间】：2014-10-15 18:25:49
【问题描述】：

我正在尝试向画布添加一些输入字段/文本区域。

我想以某种方式设置可以显示此文本的区域 --> (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下。

我还注意到我的 text-align 无法正常工作。如果我更改“title_input”的对齐方式，则没有任何变化。我希望它对齐给定区域内的内容。

提前感谢您的所有帮助。

【问题讨论】：

标签： fabricjs

【解决方案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 中。我们可以使用它来获取元素的宽度和高度。如果我们想检查活动对象是否太宽或太长，我们可以使用

if(activeObject.getBoundingRectWidth() > (BR_x - TL_x)) console.log('Too wide.');
if(activeObject.getBoundingRectHeight() > (BR_y - TL_y)) console.log('Too long.');

【讨论】：