guia - ¿Cómo se calcula la matriz de transformación SVG a partir de los valores de rotación/traducción/escala?

qgis español

Question

Tengo los siguientes detalles conmigo:

<g transform="translate(20, 50) scale(1, 1) rotate(-30 10 25)">

Necesita cambiar la línea anterior a:

<g transform="matrix(?,?,?,?,?,?)">

¿Alguien puede ayudarme a lograr esto?

Answer 1

Primero obtenga el elemento g usando document.getElementById si tiene un atributo id o algún otro método apropiado, luego llame consolidate por ej.

var g = document.getElementById("<whatever the id is>");
g.transform.baseVal.consolidate();

Answer 2

Quizás útil:

1. Demostración en vivo de cómo encontrar las coordenadas reales de los puntos transformados

2. Una implementación de la respuesta aceptada:

   function multiplyMatrices(matrixA, matrixB) {
   let aNumRows = matrixA.length;
   let aNumCols = matrixA[0].length;
   let bNumRows = matrixB.length;
   let bNumCols = matrixB[0].length;
   let newMatrix = new Array(aNumRows);
   for (let r = 0; r < aNumRows; ++r) {
   newMatrix[r] = new Array(bNumCols);
   for (let c = 0; c < bNumCols; ++c) {
   newMatrix[r][c] = 0;
   for (let i = 0; i < aNumCols; ++i) {
   newMatrix[r][c] += matrixA[r][i] * matrixB[i][c];
   }
   }
   }
   return newMatrix;
   }
   let translation = {
   x: 200,
   y: 50
   };
   let scaling = {
   x: 1.5,
   y: 1.5
   };
   let angleInDegrees = 25;
   let angleInRadians = angleInDegrees * (Math.PI / 180);
   let translationMatrix = [
   [1, 0, translation.x],
   [0, 1, translation.y],
   [0, 0, 1],
   ];
   let scalingMatrix = [
   [scaling.x, 0, 0],
   [0, scaling.y, 0],
   [0, 0, 1],
   ];
   let rotationMatrix = [
   [Math.cos(angleInRadians), -Math.sin(angleInRadians), 0],
   [Math.sin(angleInRadians), Math.cos(angleInRadians), 0],
   [0, 0, 1],
   ];
   let transformMatrix = multiplyMatrices(multiplyMatrices(translationMatrix, scalingMatrix), rotationMatrix);
   console.log(`matrix(${transformMatrix[0][0]}, ${transformMatrix[1][0]}, ${transformMatrix[0][1]}, ${transformMatrix[1][1]}, ${transformMatrix[0][2]}, ${transformMatrix[1][2]})`);

Answer 3

Traducir (tx, ty) se puede escribir como la matriz:

1 0 tx
0 1 ty
0 0 1

La escala (sx, sy) se puede escribir como la matriz:

sx 0 0
0 sy 0
0 0 1

Girar (a) se puede escribir como una matriz:

cos(a) -sin(a) 0
sin(a) cos(a) 0
0 0 1

Rotate (a, cx, cy) es la combinación de una traducción por (-cx, cy), una rotación de un grado y una traducción de vuelta a (cx, cy), lo que da:

cos(a) -sin(a) -cx × cos(a) + cy × sin(a) + cx
sin(a) cos(a) -cx × sin(a) - cy × cos(a) + cy
0 0 1

Si simplemente multiplicas esto con la matriz de traducción obtienes:

cos(a) -sin(a) -cx × cos(a) + cy × sin(a) + cx + tx
sin(a) cos(a) -cx × sin(a) - cy × cos(a) + cy + ty
0 0 1

Que corresponde a la matriz de transformación SVG:

(cos(a), sin(a), -sin(a), cos(a), -cx × cos(a) + cy × sin(a) + cx + tx, -cx × sin(a) - cy × cos(a) + cy + ty) .

En su caso, esto es: matrix(0.866, -0.5 0.5 0.866 8.84 58.35) .

Si incluye la transformación de escala (sx, sy), la matriz es:

(sx × cos(a), sy × sin(a), -sx × sin(a), sy × cos(a), (-cx × cos(a) + cy × sin(a) + cx) × sx + tx, (-cx × sin(a) - cy × cos(a) + cy) × sy + ty)

Tenga en cuenta que esto supone que está haciendo las transformaciones en el orden en que las escribió.