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.

    InformationsquelleAutor Peter Collingridge
  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

    InformationsquelleAutor Robert Longson
  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]})`);
    InformationsquelleAutor Ed Kolosovsky

Dejar respuesta

Please enter your comment!
Please enter your name here