javascript - Fabricjs 文本框使文本缩小以适合

Question

我会定义一个文本框(单行)

默认情况下，字符大小为 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);

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

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

Answer 1

这是一个基本的 fiddle ，可以复制您的想法。重点是您有一个事件，该事件会在每次文本更改时触发，并且可用于在呈现文本框之前执行某些操作。

在这种情况下，我根据添加到名为 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" width="600" height="600"></canvas>