web-dev-qa-db-fra.com

Comment calculer la matrice de transformation SVG à partir de valeurs de rotation/translation/mise à l'échelle?

J'ai les détails suivants avec moi:

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

Besoin de changer la ligne ci-dessus pour:

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

Quelqu'un peut-il m'aider à atteindre cet objectif?

svgcoordinate-transformation
26
Vinay Bagale

Translate (tx, ty) peut s’écrire sous forme de matrice:

1  0  tx
0  1  ty
0  0  1

Scale (sx, sy) peut s’écrire sous forme de matrice:

sx  0  0
0  sy  0
0   0  1

Rotate (a) peut s’écrire sous forme de matrice:

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

Rotation (a, cx, cy) est la combinaison d'une translation de (-cx, cy), d'une rotation d'un degré et d'une translation vers (cx, cy), ce qui donne:

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 vous ne faites que multiplier cela avec la matrice de traduction, vous obtenez:

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

Ce qui correspond à la matrice de transformation 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).

Dans votre cas, il s’agit de: matrix(0.866, -0.5 0.5 0.866 8.84 58.35).

Si vous incluez la transformation scale (sx, sy), la matrice est la suivante:

(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)

Notez que cela suppose que vous effectuez les transformations dans l'ordre dans lequel vous les avez écrites.

47
Peter Collingridge

Commencez par récupérer l'élément g à l'aide de document.getElementById s'il possède un attribut id ou une autre méthode appropriée, puis appelez consolidate p. Ex.

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

Peut-être utile:

  1. Démonstration en direct comment trouver les coordonnées réelles des points transformés

  2. Une implémentation de la réponse acceptée:

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