Question

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

我想以某种方式设置可以显示此文本的区域 - ＆gt; （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不起作用我希望它如何工作。如果我更改＆＃34; title_input＆＃34;没有什么变化。我希望它能够在给定区域内对齐内容。

提前感谢您的帮助。

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.');

每个canvas对象都封装在BoundingRect中。我们可以使用它来获取元素的宽度和高度。如果我们想检查活动对象是太宽还是太长，我们可以使用

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

Fabric Js - 限制文本输入区域

1 个答案: