Que dispone de los siguientes detalles conmigo :

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

Necesidad de cambio por encima de la línea a:

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

Alguien me puede ayudar a conseguir esto?

InformationsquelleAutor Vinay Bagale | 2013-02-28

3 Comentarios

  1. 51

    Traducir(tx, ty) puede ser escrito como la matriz:

    1  0  tx
    0  1  ty
    0  0  1

    Escala(sx, sy) puede ser escrito como la matriz:

    sx  0  0
    0  sy  0
    0   0  1

    Girar(a) puede ser escrita como una matriz:

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

    Girar(a, cx, cy) es la combinación de una traducción (-cx, cy), una rotación de un grados y una traducción 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 usted acaba de multiplicar esta con la traducción de la matriz que se obtiene:

    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 SVG transformación de la matriz:

    (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 que es: matrix(0.866, -0.5 0.5 0.866 8.84 58.35).

    Si se incluye la escala (sx, sy) la transformación, 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 asume que usted está haciendo las transformaciones en el orden que usted escribió.

    • por favor, puedes elaborar una, cx, cy, tx y ty? así que no puedo probarlo.
    • En su ejemplo, a=-30 (grados), cx=10, cy=25, tx=20, ty=50 (sx=1, sy=1). En general, la rotación se da como girar(a, cx, cy) y la traducción como traducir(tx, ty).
    • Lo siento, pero en el ‘Girar(a, cx, cy)’ ¿qué hace el punto representa en ‘-cx.cos(a)»? Viniendo de un JavaScript fondo no entiendo lo que significa para aplicar cos/pecado a un objeto directamente, sin Matemáticas.cos().
    • Yo lo estaba usando como corto de la mano de la multiplicación, pero me he cambiado a un símbolo de multiplicación a ser menos ambiguo.
    • Que es increíblemente útil. No he hecho un cálculo matricial en muchos años. Así cx y cy son desplazamientos, no coordina…?
    • No te olvides de hacer el traducir de nuevo el post girar (como hice yo)
    • re: So cx and cy are offsets, not coordinates...? cx y cy son el centro de coordenadas alrededor de la cual la rotación se hace. No tiene que ser dentro de la figura que se giran.
    • Hey, gracias a Jesse. – Llegué en el final 🙂
    • ¿esto significa que cuando el skewX y skewY se aplican podríamos tener esto? (sx × cos(a), sy × sin(a) x tan(skY), -sx × sin(a) x tan(skX), sy × cos(a), (-cx × cos(a) + cy × sin(a) + cx) × sx + tx, (-cx × sin(a) - cy × cos(a) + cy) × sy + ty)
    • Acabo de probar mi anterior y es muy desagradable. Yo podría utilizar un poco de ayuda.
    • ¿Qué estás tratando de hacer? Dependerá del orden en que los sesgos son un hecho. Si usted está tratando de combinar múltiples transformaciones, manteniendo todas las variables, lo van a tener complicado.
    • sí, me decidí a salir de la excavación en este, regular transforma va a hacer, matrix es todavía un problema demasiado difícil para mí de manejar.

  2. 8

    Obtener primero el g elemento del documento.getElementById si tiene un atributo id o algún otro método apropiado, a continuación, llamar consolidar por ejemplo,

    var g = document.getElementById("<whatever the id is>");
    g.transform.baseVal.consolidate();
    • Estoy tratando de conseguir este Objetivo C/iOS. ¿hay algún método general para obtener la matriz?
    • Aunque Peters respuesta explica la teoría, y cómo calcular manualmente la matriz, creo Roberts respuesta debe ser aceptado. el.transformar.baseVal.consolidar() es lo que usted debe utilizar. No hay necesidad de reinventar la rueda.
    • el OP no podía usarlo como se explica en su comentario a mi respuesta así que ¿por qué iba a aceptar?
    • Para ser honesto, no he leído su comentario, pero el OP no mencionar Objetivo C/iOS en la pregunta. Yo se enfrentó al mismo problema como se indica en el OPs pregunta y casi llevó a la aceptación de la respuesta, aunque los nativos de javascript función de consolidar() era lo que realmente necesitaba.
    • Son ellos los descansos ;-), Askers a menudo no establecer claramente las limitaciones que están operando bajo cuando escriban su pregunta. Felices de mi respuesta ayudado a usted sin embargo.
    • Esto no parece funcionar si la transformación se establece a través del atributo de estilo CSS, que es la forma en la que Chrome lo hace en estos días

  3. 1

    Puede ser útil:

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

    2. Una implementación de la aceptó respuesta:

      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]})`);

Dejar respuesta

Please enter your comment!
Please enter your name here