Website-Suche

javascript - Größe der FabricJS-Textbox an die Textauswahl anpassen

Ich habe ein Stück Code, das auf diese Weise ein neues Textbox erstellt:

new fabric.Textbox('Ajouter du texte')

Das Problem ist, dass das Textfeld im Vergleich zu seinem Inhalt zu klein ist:

Wenn ich eine feste Breite einstelle, bekomme ich etwas Abstand darum:

new fabric.Textbox('Ajouter du texte', {width: 350})

Wie kann ich die Größe des Textfelds an die Größe der Textauswahl anpassen? Ich kann nichts darüber finden, wie man die Abmessungen der Auswahl erhält.

Ich verwende Fabric-Version 4.0.0-beta.5.

Antwort #1

Die Lösung, die ich vorerst beibehalte, besteht darin, die Breite schrittweise zu vergrößern, bis ich nicht mehr als 1 Zeile erhalte:

const text = new fabric.Textbox("Ajouter du texte")

while (text.textLines.length > 1) {
  text.set({width: text.getScaledWidth() + 1})
}

Zögern Sie nicht, eine bessere Lösung vorzuschlagen, damit ich die akzeptierte Antwort aktualisieren kann.

[BEARBEITEN]

Um es während der Textbearbeitung zum Laufen zu bringen:

function adjustTextWidth(evt: fabric.IEvent) {
  if (evt.target instanceof fabric.IText) {
    const text = evt.target.text || ""
    while (evt.target.textLines.length > text.split("\n").length) {
      evt.target.set({width: evt.target.getScaledWidth() + 1})
    }
  }
}

canvas.on("text:changed", adjustTextWidth)

[BEARBEITEN2]

Ich habe einen besseren Weg gefunden, mein Ziel zu erreichen:

fabric.Textbox.prototype._wordJoiners = /[]/;

Auf diese Weise wird das Leerzeichen nicht als Wortverknüpfer betrachtet und der Text bricht nur, wenn der Benutzer Enter eingibt. Ich habe auch diese Funktion hinzugefügt, um die Textfeldbreite anzupassen, wenn Text entfernt wird:

function fitTextboxToContent(text: fabric.IText) {
  const textLinesMaxWidth = text.textLines.reduce((max, _, i) => Math.max(max, text.getLineWidth(i)), 0);
  text.set({width: textLinesMaxWidth});
}

Antwort #2

Ich habe in der TextBox-Dokumentation nachgeschlagen, aber nichts gefunden, das den Container automatisch an die Textgröße anpasst.

Das Beste, was Sie tun können, ist, die Größe jeder Zeile zu ermitteln, und wenn die Breite insgesamt kleiner als ein maximal gewünschter Wert ist, dann setzen Sie die Breite in das Textfeld. Aus irgendeinem Grund müssen Sie auch eine kleine Breite hinzufügen.

var canvas = new fabric.Canvas("canvas");
var text = new fabric.Textbox("Ajouter du texte");

var textSize = 0;
for (var i = 0; i < text._textLines.length; i++) {
  textSize += text.measureLine(i).width;
}

var augmentedTextSize = textSize + 25;
if (augmentedTextSize < 500) {
  text.set({ width: augmentedTextSize });
}

canvas.add(text);
canvas.renderAll();

Sieh dir dieses Beispiel an: https://codesandbox.io/s/stackoverflow-60411035-fabric-js-400-beta5-7s7id

Es wäre schön, eine Art Eigenschaft für das Textfeld zu haben, wie zum Beispiel "max_width", die, wenn der Text kleiner ist als diese, automatisch die Größe an die Textgröße anpasst.

Verwandte Artikel