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