'How to prevent text scaling when resizing textbox with fabricjs
I am new to FabricJs and my concern is regarding resizing the textbox - I have a following solution that enables to resize the Textbox vertically and horizontally, but not at the same time. I´ve been trying to find a solution that does both at the same time without text being resized. Can you please help me find a solution?
Here is a link to my jsfiddle example: 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);
Sources
This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.
Source: Stack Overflow
| Solution | Source |
|---|
