Fabricjs Textbox使文本缩小以适应

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

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

在这种情况下,我缩小字体大小基于我添加到文本框中的非标准参数调用 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>