Fabricjs Textbox 使文本缩小以适应

Posted 2023-03-25

【中文标题】Fabricjs Textbox 使文本缩小以适应

【英文标题】：Fabricjs Textbox make the text shrink to fit

【发布时间】：2017-05-07 21:14:28

【问题描述】：

我会定义一个文本框（单行）

默认情况下，字符大小为 16（例如）

当文本比文本框大时，我不希望它换行或文本框变大，我希望文本大小适合文本框的最大大小。文本。当文本恢复到较小的大小时，它可以恢复其初始大小（在我们的示例 16 中）。可能管理最小尺寸

如果你有想法，我接受:)

提前致谢

测试用例：http://jsfiddle.net/Da7SP/273/

// initialize fabric canvas and assign to global windows object for debug
var canvas = window._canvas = new fabric.Canvas('c');

// ADD YOUR CODE HERE
var canvas = window._canvas = new fabric.Canvas('c');
var t1 = new fabric.Textbox('My Text', 
    width: 200,
    top: 5,
    left: 5,
    fontSize: 16,
    textAlign: 'center'
);

var t2 = new fabric.Textbox('My text is longer, but I do not want the box to grow, or the text to wrap. I only want the text to fit the available size', 
    width: 200,
    height: 200,
    top: 250,
    left: 5,
    fontSize: 16,
    textAlign: 'center'
);



canvas.add(t1);
canvas.add(t2);

一个小视频来解释我想要什么：

当文本比文本框大时，我希望文本大小适合文本框的最大大小。

【问题讨论】：

您找到解决问题的方法了吗？下面标记为正确答案的答案不包含文本的大小。当输入多个单词时，它会添加另一行 @neopheus

【参考方案1】：

这是一个基本的小提琴，可以复制你的想法。 关键是您有一个事件会在每次文本更改时触发，并且可以用来在文本框呈现之前执行某些操作。

在这种情况下，我会根据我添加到名为fixedWidth的文本框的非标准参数来缩小字体大小

// ADD YOUR CODE HERE
var canvas = new fabric.Canvas('c');
var t1 = new fabric.Textbox('MyText', 
    width: 150,
    top: 5,
    left: 5,
    fontSize: 16,
    textAlign: 'center',
    fixedWidth: 150
);

canvas.on('text:changed', function(opt) 
  var t1 = opt.target;
  if (t1.width > t1.fixedWidth) 
    t1.fontSize *= t1.fixedWidth / (t1.width + 1);
    t1.width = t1.fixedWidth;
  
);

canvas.add(t1);

canvas 
    border: 1px solid #999;

<script src="https://rawgithub.com/kangax/fabric.js/master/dist/fabric.js"></script>
<canvas id="c"  ></canvas>

【讨论】：

谢谢@AndreaBogazzi ;)

但是你知道在 TextBox 中禁用自动换行吗？谢谢

如果您不需要自动换行切换到 Itext。没有办法禁用它，因为制作文本框的唯一原因是启用自动换行

我需要有一个固定大小的区域，比如 TextBox。是否可以将固定大小区域的管理添加到 IText ？谢谢

如果他们当用户减少文本时应该恢复正常

【参考方案2】：

这是与https://***.com/a/41335051/1469525 类似的答案，但此示例将 fontSize 修改为 maxFontSize（初始 fontSize）。这允许文本缩小然后恢复到原始大小，并防止换行。

（注意，如果你使用它，你必须找到一种方法来阻止用户使用enter 键。我进行了检查，如果检测到回车键，则基本上取消它。我的应用程序实际上有一个单独的表单来输入文本，所以我可以通过普通的 javascript 来控制预防。我不太确定如何直接在画布元素上执行此操作，当它像这里一样可编辑时......）

var canvas = new fabric.Canvas('c');
var t1 = new fabric.Textbox('MyText', 
    width: 150,
    top: 5,
    left: 5,
    fontSize: 16,
    textAlign: 'center',
    maxFontSize: 16,
);

canvas.on('text:changed', function(opt) 
  var t1 = opt.target;
  if (t1.text.match(/[\r\n]/)) return;

  t1.set(
    fontSize: t1.maxFontSize,
  );
  while (t1._textLines.length > 1) 
    t1.set(
      fontSize: t1.fontSize - 1,
    );
  
);

canvas.add(t1);

canvas 
    border: 1px solid #999;

<script src="https://rawgithub.com/kangax/fabric.js/master/dist/fabric.js"></script>
<canvas id="c"  ></canvas>