Comment faire réagir un objet polygone aux événements de redimensionnement à l'aide de FabricJS ?-js tutoriel-php.cn

Comment faire réagir un objet polygone aux événements de redimensionnement à l'aide de FabricJS ?

PHPz

Libérer： 2023-08-24 12:53:02

avant

1442 Les gens l'ont consulté

如何使用 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. Nous utilisons l'événement object:modified pour faire réagir l'objet polygone au redimensionnement.

Grammaire

object:modified

Copier après la connexion

Exemple 1 : Apparence par défaut des objets polygones

Regardons un exemple de code pour voir comment un objet polygone s'affiche lorsque l'événement object:modified n'est pas utilisé. Dans ce cas, l'objet polygone sera ajouté au canevas.

<!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>Default appearance of the polygon object</h2>
   <p>You can see that the polygon object has been added to the canvas</p>
   <canvas id="canvas"></canvas>
   <script>
      
      // Initiate a canvas instance
      var canvas = new fabric.Canvas("canvas");
      canvas.setWidth(document.body.scrollWidth);
      canvas.setHeight(250);
      
      // Initiate a polygon instance
      var polygon = new fabric.Polygon(
         [
            { x: 0, y: 0 },
            { x: 0, y: 50 },
            { x: 50, y: 50 },
            { x: 50, y: 0 },
         ],
         {
            left: 100,
            top: 30,
            fill: "red",
            stroke: "blue",
            strokeWidth: 2,
         }
      );
      
      // Adding it to the canvas
      canvas.add(polygon);
   </script>
</body>
</html>

Copier après la connexion

Exemple 2 : Montrez comment un objet réagit au redimensionnement

Regardons un exemple de code pour voir la sortie enregistrée lorsqu'un objet polygone est redimensionné. Nous avons utilisé l'événement object:modified, qui se déclenche à la fin de toute transformation d'objet ou de tout changement lié à l'objet. Dans ce cas, chaque fois que nous modifions l'échelle de l'objet, la hauteur et la largeur mises à l'échelle seront enregistrées sur la console.

<!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>Displaying how the object reacts to being resized</h2>
   <p>
      You can scale object using corner and open console from dev tools to see that the scaled width and height value of the polygon object is being logged
   </p>
   <canvas id="canvas"></canvas>
   <script>
      
      // Initiate a canvas instance
      var canvas = new fabric.Canvas("canvas");
      canvas.setWidth(document.body.scrollWidth);
      canvas.setHeight(250);
      
      // Initiate a polygon instance
      var polygon = new fabric.Polygon(
         [
            { x: 0, y: 0 },
            { x: 0, y: 50 },
            { x: 50, y: 50 },
            { x: 50, y: 0 },
         ],
         {
            left: 100,
            top: 30,
            fill: "red",
            stroke: "blue",
            strokeWidth: 2,
         }
      );
      
      // Adding it to the canvas
      canvas.add(polygon);
      
      // Using object:modified event
      canvas.on("object:modified", (e) => {
         canvas.getActiveObjects().forEach((o) => { 
            console.log(
               "Scaled Height of the polygon is: ",
               o.getScaledHeight(),
               "Scaled Width of the polygon is:",
               o.getScaledWidth()
            );
         });
      });
   </script>
</body>
</html>

Copier après la connexion

Conclusion

Dans ce didacticiel, nous utilisons deux exemples simples pour montrer comment faire réagir un objet polygone aux événements de redimensionnement à l'aide de FabricJS.

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!