Javascript / jQuery How to get scale value from matrix value

The matrix is โ€‹โ€‹taken first.

this.getMatrix = function(obj) { var matrix = obj.css("-webkit-transform") || obj.css("-moz-transform") || obj.css("-ms-transform") || obj.css("-o-transform") || obj.css("transform"); return matrix; }; 

And the scale value is acquired.

 this.getScaleDegrees = function(obj) { var matrix = this.getMatrix(obj), matrixRegex = /matrix\((-?\d*\.?\d+),\s*0,\s*0,\s*(-?\d*\.?\d+),\s*0,\s*0\)/, matches = matrix.match(matrixRegex); return matches; }; 

And gets the rotation value.

 this.getRotationDegrees = function(obj) { var matrix = this.getMatrix(obj), angle = 0; if(matrix !== 'none') { var values = matrix.split('(')[1].split(')')[0].split(','), a = values[0], b = values[1]; angle = Math.round(Math.atan2(b, a) * (180/Math.PI)); } return angle; }; 

Now I am facing a problem.
The function 'getScaleDegrees' failed when there are both rotations and scales of the element.
Since the function 'getRotationDegrees' works fine,
I think I will edit the getScaleDegrees function using the getRotationDegrees function process.

So the question is how to get the scale value.

Any good ideas or calculation methods?


EDIT:

There is a function for changing the scale and rotation, and the values โ€‹โ€‹of the scale and rotation are different each time. The value returned by getMatrix becomes so.

 none [no rotate & no scale] matrix(1.2, 0, 0, 1.2, 0, 0) [edit scale] matrix(0.965926, -0.258819, 0.258819, 0.965926, 0, 0) [edit rotate] matrix(1.3523, -0.362347, 0.362347, 1.3523, 0, 0) [edit rotate & edit scale] 
+4
source share
1 answer

One of the decisions was made.

convert matrix to array (thanx eicto)

 this.parseMatrix = function(_str) { return _str.replace(/^matrix(3d)?\((.*)\)$/,'$2').split(/, /); }; 

get scale value

 this.getScaleDegrees = function(obj) { var matrix = this.parseMatrix(this.getMatrix(obj)), scale = 1; if(matrix[0] !== 'none') { var a = matrix[0], b = matrix[1], d = 10; scale = Math.round( Math.sqrt( a*a + b*b ) * d ) / d; } return scale; }; 

' Math.sqrt( a*a + b*b ) ' refers to CSS-TRICKS .

+2
source

Source: https://habr.com/ru/post/1447872/


All Articles