Frabricjs-限制文本输入区域 [英] Frabricjs - Limit Text Input Area

问题描述

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

I am trying to add some input fields / text area to the canvas.

我想以某种方式设置可以显示此文本的区域->(x，y)-位置，宽度，高度.内容不应超出定义的区域.

I would like to somehow set the area where this text could be displayed --> (x,y)-position, width, height of the area. The content should not flow outside the defined area.

是否可以自动更改字体大小，以使内容适合定义的区域? 例如此处的 http://www. my-wallsticker.de/index.php?cl=designer&html5=1&text=fabricjs

Is it possible to automatically change the font-size so that the content fits to the defined area? For example like here: http://www.my-wallsticker.de/index.php?cl=designer&html5=1&text=fabricjs

这是我的代码的一部分，在其中添加了带有区域的文本字段.

Here is a part of my code where I add a text field with an area.

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

整个代码位于我的jsfiddle 下.

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

I also noticed that my text-align is not working how I would like it to work. If I change the align for "title_input" nothing changes. I would like it to align the content inside the given area.

在此先感谢您的帮助.

推荐答案

要检查活动对象是否在边界内，我们可以将边界定义为矩形区域.

To check if active object is in boundaries, we could define boundary as rect area.

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

Each canvas object is encapsulate in BoundingRect. We can use this to get the width and the height of an element. If we want to check if active object is too wide or too long, we could use

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

这篇关于Frabricjs-限制文本输入区域的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！