How to calculate SVG transform matrix from rotate/translate/scale values?

前端 未结 3 776
面向向阳花
面向向阳花 2020-12-07 16:38

I have following details with me :


Need to change above line to:

3条回答
  •  夕颜
    夕颜 (楼主)
    2020-12-07 17:17

    Maybe helpful:

    1. Live demo of how to find actual coordinates of transformed points

    2. An implementation of the accepted answer:

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

提交回复
热议问题