Question

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

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

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

如果您有任何想法，我会：）

提前致谢

// 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

的文本框中的非标准参数缩小字体大小

＆＃13;

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

＆＃13;

canvas {
    border: 1px solid #999;
}

＆＃13;

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

＆＃13;

Answer 2

neopheus，

请检查此更新的fiddle

我定义了结构文本并将长文本放在那里。之后获取该文本的宽度并将该宽度分配给TextBox。

var someText = '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';
var textSize = new fabric.Text(someText,{
                    fontSize: 16
                });
var textBoxWidth = textSize.getWidth();

if (canvas.width < textBoxWidth){
textBoxWidth = canvas.width - 10;
}
var t2 = new fabric.Textbox(someText, {
    width: textBoxWidth,
    height: 200,
    top: 250,
    left: 5,
    fontSize: 16,
    textAlign: 'center'
});

Answer 3

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

（注意，如果你使用这个，你必须找到一种方法来阻止用户使用 enter 键。如果检测到输入键，我做了一个检查，基本上取消它。我的app 实际上有一个单独的表单来输入文本，所以我可以通过普通的 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" width="600" height="600"></canvas>

Fabricjs Textbox使文本缩小以适应

3 个答案: