svg - घूर्णन/अनुवाद/स्केल मानों से एसवीजी ट्रांसफॉर्म मैट्रिक्स की गणना कैसे करें?




coordinate-transformation (2)

मेरे पास निम्नलिखित विवरण हैं:

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

ऊपर पंक्ति को बदलने की आवश्यकता है:

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

क्या कोई इसे हासिल करने में मेरी मदद कर सकता है?


अनुवाद (टीएक्स, टाई) मैट्रिक्स के रूप में लिखा जा सकता है:

1  0  tx
0  1  ty
0  0  1

स्केल (एसएक्स, सी) मैट्रिक्स के रूप में लिखा जा सकता है:

sx  0  0
0  sy  0
0   0  1

घुमाएं (ए) एक मैट्रिक्स के रूप में लिखा जा सकता है:

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

घुमाएं (ए, सीएक्स, साइ) एक अनुवाद का संयोजन है (-सीएक्स, साइ), एक डिग्री का घूर्णन और एक अनुवाद (सीएक्स, साइ), जो देता है:

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

यदि आप इसे अनुवाद मैट्रिक्स के साथ गुणा करते हैं तो आपको मिलता है:

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

जो एसवीजी ट्रांसफॉर्म मैट्रिक्स से मेल खाता है:

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

आपके मामले में यह है: matrix(0.866, -0.5 0.5 0.866 8.84 58.35)

यदि आप स्केल (एसएक्स, सी) ट्रांसफॉर्म शामिल करते हैं, तो मैट्रिक्स है:

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

ध्यान दें कि यह मानता है कि आप उन्हें लिखने के क्रम में परिवर्तन कर रहे हैं।


शायद मददगार:

  1. रूपांतरित बिंदुओं के वास्तविक निर्देशांक कैसे प्राप्त करें के लाइव डेमो

  2. स्वीकृत उत्तर का कार्यान्वयन:

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




coordinate-transformation