Fabricjs文本框使文本缩小以适合 [英] Fabricjs Textbox make the text shrink to fit

问题描述

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

I would define a text box (single-line)

默认情况下，字符大小为16(例如)

By default, with a character size of 16 (for example)

当文本大于文本框时，我不希望它换行或文本框变大，我希望文本大小适合文本框的最大大小.文本.当文本变小时，它可以恢复其初始大小(在我们的示例16中).可能管理最小尺寸

When the text gets bigger than the text box, I do not want it to wrap or the text box gets bigger, I want the text size to fit the maximum size of the text box. text. When the text returns to a smaller size, it can resume its initial size (in our example 16). Possibly manage a minimum size

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

If you have an idea, I take :)

预先感谢

测试用例: 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);

一段解释我想要什么的小视频:

A small video to explain what I want :

当文本大于文本框时，我希望文本大小适合文本框的最大大小.

When the text gets bigger than the text box, I want the text size fit the maximum size of the text box.

推荐答案

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

This is a basic fiddle that can replicate your idea. The point is that you have an event that fires on every text change and that can be used to do something before the textbox is rendered.

在这种情况下，我根据添加到名为fixedWidth

In this case i m shrinking font size based on a non standard parameter i added to textbox called 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>

这篇关于Fabricjs文本框使文本缩小以适合的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！