Fabric.js multiplyTransformMatrices() Method

0 0 1 minute read

The multiplyTransformMatrices() method is used to multiply two specified matrices to nest transformation. For example, if the function is multiplyTransformMatrices(a, b), it means matrix a will be multiplied by matrix b.

Syntax:

multiplyTransformMatrices(a, b, is2x2)

Parameters: This method accepts a parameter as mentioned above and described below:

a: This parameter holds the first specified transform matrix.
b: This parameter holds the second specified transform matrix.
is2x2: This parameter is a Boolean value that holds the flag to multiply matrices as 2×2 matrices.

Return Value: This method returns the product of the two specified transform matrices.

Example 1:

HTML

<!DOCTYPE html>
<html>
 
<head>
  <script src=
"https://cdnjs.cloudflare.com/ajax/libs/fabric.js/3.6.2/fabric.min.js" >
  </script>
 
  <script type="text/javascript" src=
"https://cdnjs.cloudflare.com/ajax/libs/fabric.js/3.6.2/fabric.min.js.map">
  </script>
 
  <script type="text/javascript" src=
"https://cdnjs.cloudflare.com/ajax/libs/fabric.js/3.6.2/fabric.js">
  </script>
</head>
 
<body>
  <script type="text/javascript">
    // Calling multiplyTransformMatrices() function over
    // some specified arrays
    console.log(fabric.util.multiplyTransformMatrices([1, 2], [3, 4]));
    console.log(fabric.util.multiplyTransformMatrices([1, 2], [3, 4], true));
    console.log(fabric.util.multiplyTransformMatrices([1, 2], [3, 4], false));
    console.log(fabric.util.multiplyTransformMatrices([1, 2, 3, 4], 
                                                      [5, 6, 7, 8]));
    console.log(fabric.util.multiplyTransformMatrices([1, 2, 3, 4], 
                                                      [5, 6, 7, 8], true));
    console.log(fabric.util.multiplyTransformMatrices([1, 2, 3, 4], 
                                                      [5, 6, 7, 8], false));
  </script>
</body>
 
</html>

Output:

[null,null,null,null,null,null]
[null,null,null,null,0,0]
[null,null,null,null,null,null]
[23,34,31,46,null,null]
[23,34,31,46,0,0]
[23,34,31,46,null,null]

Example 2:

HTML

<!DOCTYPE html>
<html>
 
<head>
  <script src=
"https://cdnjs.cloudflare.com/ajax/libs/fabric.js/3.6.2/fabric.min.js" >
  </script>
 
  <script type="text/javascript" src=
"https://cdnjs.cloudflare.com/ajax/libs/fabric.js/3.6.2/fabric.min.js.map">
  </script>
 
  <script type="text/javascript" src=
"https://cdnjs.cloudflare.com/ajax/libs/fabric.js/3.6.2/fabric.js">
  </script>
</head>
 
<body>
  <script type="text/javascript">
    // Specifying some arrays
    var a = [2, 4, 6, 8];
    var b = [1, 3, 5, 7];
 
    // Calling multiplyTransformMatrices() function over
    // the above specified arrays
    console.log(fabric.util.multiplyTransformMatrices(a, b, true));
    console.log(fabric.util.multiplyTransformMatrices(a, b, false));
  </script>
</body>
 
</html>

Output:

[20,28,52,76,0,0]
[20,28,52,76,null,null]

Whether you’re preparing for your first job interview or aiming to upskill in this ever-evolving tech landscape, zambiatek Courses are your key to success. We provide top-quality content at affordable prices, all geared towards accelerating your growth in a time-bound manner. Join the millions we’ve already empowered, and we’re here to do the same for you. Don’t miss out – check it out now!