Wyszukiwanie w witrynie

angular - Jak zapobiec skalowaniu tekstu podczas zmiany rozmiaru pola tekstowego za pomocą fabricjs


Jestem nowy w FabricJs i moja obawa dotyczy zmiany rozmiaru pola tekstowego - mam następujące rozwiązanie, które umożliwia zmianę rozmiaru pola tekstowego pionowo i poziomo, ale nie jednocześnie. Próbowałem znaleźć rozwiązanie, które robi obie rzeczy jednocześnie bez zmiany rozmiaru tekstu. Czy możesz mi pomóc znaleźć takie rozwiązanie?

Oto link do mojego przykładu w jsfiddle: 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);

Odpowiedź #1

Wygląda na to, że punkt kontrolny 'mr' i 'ml' nie są wywoływane przez zdarzenie 'skalowanie', ale przez 'zmianę rozmiaru'.

Rozwiązaniem (działającym dla mnie) jest dodanie:

textbox.on('resizing', updateTextSize);