Fabricjs Textbox сделать текст сжиматься, чтобы соответствовать

Question

Я бы определил текстовое поле (однострочный)

По умолчанию с размером символов из 16 (например)

Когда текст становится больше, чем текстовое поле, я не хочу, чтобы оно было обернуто, или текстовое поле становится больше, я хочу, чтобы размер текста соответствовал максимальному размеру текстового поля. текст. Когда текст возвращается к меньшему размеру, он может возобновить свой первоначальный размер (в нашем примере 16). Возможно управлять минимальный размер

Если у вас есть идея, я беру :)

заранее спасибо

Test Case: 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>

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' 
});