Website-Suche

angular - Wie man das Textskalieren verhindert, wenn man ein Textfeld mit fabricjs ändert


Ich bin neu bei FabricJs und meine Sorge betrifft das Ändern der Größe des Textfelds - ich habe die folgende Lösung, die es ermöglicht, das Textfeld vertikal und horizontal zu ändern, aber nicht gleichzeitig. Ich habe versucht, eine Lösung zu finden, die beides gleichzeitig ermöglicht, ohne dass der Text dabei skaliert wird. Können Sie mir bitte helfen, eine Lösung zu finden?

Hier ist ein Link zu meinem JSFiddle-Beispiel: http://jsfiddle.net/vstefani/s7yfu93w/27/

var canvas = new fabric.Canvas('canvas');
canvas.setWidth(500);
canvas.setHeight(500);

var myText = new fabric.Textbox("Some text", {
  width: 100,
  height: 100,
  top: 100,
  left: 100,
  fontSize: 20,
  textAlign: 'center',
  fontFamily: 'Arial',
  padding: 2,
});
canvas.add(myText);

let lastHeight: number;
const updateTextSize = () => {
  const controlPoint = myText.__corner;

  if (controlPoint && controlPoint !== 'mr' && controlPoint !== 'ml') {
    lastHeight = myText.height * myText.scaleY;
  }

  myText.set({
    height: lastHeight || myText.height,
    scaleY: 1,
  });
};

myText.on('scaling', updateTextSize);
myText.on('editing:entered', updateTextSize);
myText.on('text:changed', updateTextSize);

Antwort #1

Es scheint, dass die Steuerpunkte 'mr' und 'ml' nicht durch das 'scaling'-Ereignis, sondern durch das 'resizing'-Ereignis ausgelöst werden.

Eine Lösung (die bei mir funktioniert) ist es, folgendes hinzuzufügen :

textbox.on('resizing', updateTextSize);