Simple transformMatrix on object

[ejtipi]

I've moved from fabric.js 3.6.1 to 4.3.1 and i don't know how to apply transformMatrix to object. Earlier it was easy like:

var oText = new fabric.Textbox(value.text, {
...    
	'transformMatrix': [0.9844, -0.1758, 0.1758, 0.9844, 0, -6],
...
});

But now it doesn't work anymore. How to apply this?

[asturur]

Transform matrix was deprecated long ago and now removed.
Have a check at:

fabric.js/src/util/misc.js

Line 661 in 14c6b43

qrDecompose: function(a) {

This will give you object properties for given transform

If you need to add those properties to the existing one, is a bit more complicated but nothing hard.

What is your use case for this kind of use of transformMatrix?

[ejtipi]

Well I came earlier to this feature (qrDecompose) - it gives me an object with angle and stuff but if i apply this instead transformMatrix it gave me strange results. This is not the transformMatrix that was eralier. I'm reading files by loadSVGFromURL. Thx for reply.

[asturur]

That function is the one we use today to interpret transform matrix from SVG and that replace the old one. The exact old result is entirely possible.

Make a full example i ll help you.

[ejtipi]

I'm reading files by loadSVGFromURL. Tried to read matrix values like this:

var matrix = oText.calcTransformMatrix();
var finalValues = fabric.util.qrDecompose(matrix);

...but angle and stuff are deafults (0,1,1,0...). I can set angle and stuff like this:

fabric.loadSVGFromURL(svgFile, function(objects) {

	$.each(objects, function(index, value) {

		var oText = new fabric.Textbox(value.text, {
			...
			angle: value.angle,
			scaleX: value.scaleX,
			scaleY: value.scaleY,
			skewX: value.skewX,
			skewY: value.skewY
			...
		});
				
		canvas.add(oText);
				
	});
	
});

...but from where i can get correct translateX and translateY? If i console.log(value) in each in the example shown, the transformMatrix is null.

[asturur]

this does not seems like a full example, is still code mixed with text. Make a jsfiddle or something like that.
the loadSVG parse the transformMatrix, adds it to the object, then remove it. Is already absorbed in the object properties.
You won't get a transformMatrix as property in objects, is removed, unsupported, unused by the code.

[asturur]

@ejtipi did you solve?
If you give me an SVG with a transformMatrix or an object and a trasnform matrix i can show you that the SVG manages itself, or how to do it with objects.

[ejtipi]

Well, partially. When creating the example, it turned out to be my fault. When reading SVG file i'm setting object (Textbox) to 100%, like:

width: [100% of SVG],
fixedWidth: [100% of SVG],
maxWidth: [100% of SVG],

My website users enter their data there and i need this to be 100% and text center. So object matrix is good for an element with dimension X but if i enlarge X to 100% it doesn't fix.