web-dev-qa-db-fra.com

Fabricjs Textbox fait rétrécir le texte pour l'adapter

Je définirais une zone de texte (une seule ligne)

Par défaut, avec une taille de caractère de 16 (par exemple)

Lorsque le texte devient plus grand que la zone de texte, je ne veux pas qu'il soit encapsulé ou la zone de texte s'agrandit, je veux que la taille du texte corresponde à la taille maximale de la zone de texte. texte. Lorsque le texte revient à une taille plus petite, il peut reprendre sa taille initiale (dans notre exemple 16). Gérer éventuellement une taille minimale

Si vous avez une idée, je prends :)

merci d'avance

Cas de test: 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);

Une petite vidéo pour expliquer ce que je veux:

enter image description here

Lorsque le texte est plus grand que la zone de texte, je souhaite que la taille du texte corresponde à la taille maximale de la zone de texte.

javascriptfabricjs
15
neopheus

Il s'agit d'un violon de base qui peut reproduire votre idée. Le fait est que vous avez un événement qui se déclenche à chaque changement de texte et qui peut être utilisé pour faire quelque chose avant le rendu de la zone de texte.

Dans ce cas, je réduis la taille de la police en fonction d'un paramètre non standard que j'ai ajouté à la zone de texte appelée 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>
18
AndreaBogazzi

neopheus,

Veuillez vérifier cette mise à jour violon

J'ai défini Text Text et y ai mis votre long texte. Après cela, obtenez la largeur de ce texte et affectez cette largeur à la 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'
});
0
Observer