Maison >interface Web >js tutoriel >FabricJS - Trouver la matrice de transformation représentant la transformation actuelle d'un objet polygone ?

FabricJS - Trouver la matrice de transformation représentant la transformation actuelle d'un objet polygone ?

PHPzavant: 2023-08-29 12:17:101290parcourir

FabricJS – 找到表示多边形对象当前变换的变换矩阵？

Nous pouvons créer un objet Polygon en créant une instance de fabric.Polygon. Un objet polygone peut être caractérisé comme n’importe quelle forme fermée constituée d’un ensemble de segments de ligne droite connectés. Puisqu'il s'agit de l'un des éléments de base de FabricJS, nous pouvons également le personnaliser facilement en appliquant des propriétés telles que l'angle, l'opacité, etc. Pour trouver la matrice de transformation qui représente la transformation actuelle, nous utilisons la méthode calcOwnMatrix.

Grammaire

calcOwnMatrix(): Array

Exemple 1 : Utilisation de la méthode calcOwnMatrix

Regardons un exemple de code sur la façon d'utiliser la méthode calcOwnMatrix pour trouver la matrice de transformation qui représente la transformation actuelle d'un polygone. Vous pouvez ouvrir la console à partir des outils de développement pour voir les valeurs du tableau affichées.

<!DOCTYPE html>
<html>
<head>
   <!-- Adding the Fabric JS Library-->
   <script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/510/fabric.min.js"></script>
</head>
<body>
   <h2>Using the calcOwnMatrix method</h2>
   <p>
      You can open console from dev tools and see that the logged output contains the transform matrix of the polygon instance
   </p>
   <canvas id="canvas"></canvas>
   <script> 
      
      // Initiate a canvas instance
      var canvas = new fabric.Canvas("canvas");
      canvas.setWidth(document.body.scrollWidth);
      canvas.setHeight(250);
      
      // Initiating a polygon object
      var polygon = new fabric.Polygon(
         [
            { x: 200, y: 10 },
            { x: 250, y: 50 },
            { x: 250, y: 180 },
            { x: 150, y: 180 },
            { x: 150, y: 50 },
            { x: 200, y: 10 },
         ],
         {
            fill: "green",
            stroke: "blue",
            strokeWidth: 20,
            skewX: 15,
         }
      );
      
      // Adding it to the canvas
      canvas.add(polygon);
      
      // Using calcOwnMatrix method
      console.log(
         "The transform matrix which represents current transformation of the polygon instance is: ",
         polygon.calcOwnMatrix()
      );
   </script>
</body>
</html>

Exemple 2 : Utilisation de la méthode calcOwnMatrix et de la propriété ScaleX

Regardons un exemple de code pour comprendre comment les valeurs du tableau renvoyé sont affectées lorsque nous appliquons une mise à l'échelle horizontale à un objet polygone. Ici, nous avons transmis la valeur 2 à la propriété scaleX. Cela garantit que notre objet polygone est mis à l'échelle 2x horizontalement. Nous pouvons également voir dans la console que la 0ème valeur d'index du tableau renvoyé a changé. En effet, le 0ème index représente la valeur scaleX.

<!DOCTYPE html>
<html>
<head>
   <!-- Adding the Fabric JS Library-->
   <script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/510/fabric.min.js"></script>
</head>
<body>
   <h2>Using the calcOwnMatrix method along with scaleX property</h2>
   <p>
      You can open console from dev tools and see that the logged output has changed
   </p>
   <canvas id="canvas"></canvas>
   <script>
      
      // Initiate a canvas instance
      var canvas = new fabric.Canvas("canvas");
      canvas.setWidth(document.body.scrollWidth);
      canvas.setHeight(250);
      
      // Initiating a polygon object
      var polygon = new fabric.Polygon(
         [
            { x: 200, y: 10 },
            { x: 250, y: 50 },
            { x: 250, y: 180 },
            { x: 150, y: 180 },
            { x: 150, y: 50 },
            { x: 200, y: 10 },
         ],
         {
            fill: "green",
            stroke: "blue",
            strokeWidth: 20,
            skewX: 15,
            scaleX: 2,
         }
      );
      
      // Adding it to the canvas
      canvas.add(polygon);
      
      // Using calcOwnMatrix method
      console.log(
         "The transform matrix which represents current transformation of the polygon instance is: ",
         polygon.calcOwnMatrix()
      );
   </script>
</body>
</html>

Conclusion

Dans ce tutoriel, nous utilisons deux exemples simples pour montrer comment utiliser FabricJS pour trouver la matrice de transformation qui représente la transformation actuelle d'un objet Polygon.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

对象 fabric

Déclaration：

Cet article est reproduit dans:. en cas de violation, veuillez contacter admin@php.cn Supprimer

Article précédent：Comment faire réagir un objet polygone aux événements de zoom à l'aide de FabricJS ?Article suivant：Comment faire réagir un objet polygone aux événements de zoom à l'aide de FabricJS ?

Articles Liés

Voir plus