FabricJS - Trouver le contexte de dessin d'un objet Polygon converti en HTMLCanvasElement ?-js tutoriel-php.cn

FabricJS - Trouver le contexte de dessin d'un objet Polygon converti en HTMLCanvasElement ?

WBOY

Libérer： 2023-08-30 17:33:06

avant

733 Les gens l'ont consulté

FabricJS – 查找转换为 HTMLCanvasElement 的 Polygon 对象的绘图上下文？

Nous pouvons créer des objets 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 convertir un objet polygone en HTMLCanvasElement, nous utilisons la méthode toCanvasElement. Il renvoie un élément DOM de type HTMLCanvasElement, qui hérite de ses propriétés et méthodes de l'interface HTMLElement. Nous utilisons la méthode getContext pour trouver le contexte de dessin sur le canevas. Si l'ID de contexte n'est pas pris en charge, une valeur nulle est renvoyée.

Grammaire

HTMLCanvasElement.getContext():

Copier après la connexion

Exemple 1 : Utilisation de la méthode toCanvasElement

Regardons un exemple de code pour voir la sortie enregistrée lors de l'utilisation de la méthode toCanvasElement. Lors de l'utilisation de la méthode toCanvasElement, un élément DOM de type HTMLCanvasElement sera renvoyé. Vous pouvez ouvrir la console à partir des outils de développement pour voir que l'élément DOM de type HTMLCanvasElement est renvoyé.

<!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 toCanvasElement method</h2>
   <p>You can open console from dev tools to see the logged output</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 object
      var polygon = new fabric.Polygon(
         [
            { x: 600, y: 310 },
            { x: 650, y: 450 },
            { x: 600, y: 480 },
            { x: 550, y: 480 },
            { x: 450, y: 460 },
            { x: 300, y: 210 },
         ],
         {
            fill: "#778899",
            stroke: "blue",
            strokeWidth: 5,
            top: 50,
            left: 100,
            scaleX: 0.5,
            scaleY: 0.5,
         }
      );
      
      // Adding it to the canvas
      canvas.add(polygon);
      
      // Using toCanvasElement method
      console.log(
         "The output on using toCanvasElement method is:",
         polygon.toCanvasElement()
      );
   </script>
</body>
</html>

Copier après la connexion

Exemple 2 : Utilisation de la méthode getContext

Regardons un exemple de code de la sortie enregistrée lors de l'utilisation de la méthode getContext et de la méthode toCanvasElement pour trouver le contexte de dessin d'un objet Polygon converti en HTMLCanvasElement. Le contexte de dessin nous permet de dessiner sur la toile. Puisque nous avons transmis la valeur "2d" à la méthode getContext, un objet CanvasRenderingContext2D est renvoyé.

<!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 getContext method</h2>
   <p>
      You can open console from dev tools to see that the CanvasRenderingContext2D object is being returned
   </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 object
      var polygon = new fabric.Polygon(
         [
            { x: 600, y: 310 },
            { x: 650, y: 450 },
            { x: 600, y: 480 },
            { x: 550, y: 480 },
            { x: 450, y: 460 },
            { x: 300, y: 210 },
         ],
         {
            fill: "#778899",
            stroke: "blue",
            strokeWidth: 5,
            top: 50,
            left: 100,
            scaleX: 0.5,
            scaleY: 0.5,
         }
      );
      
      // Adding it to the canvas
      canvas.add(polygon);
      
      // Using toCanvasElement method
      var polygonCanvas = polygon.toCanvasElement({
         width: 200,
      });
      
      // Using getContext method
      console.log(
         "The drawing context of a Polygon object converted to HTMLCanvasElement is as follows:",
         polygonCanvas.getContext("2d")
      );
   </script>
</body>
</html>

Copier après la connexion

Conclusion

Dans ce didacticiel, nous utilisons deux exemples simples pour montrer comment trouver le contexte de dessin d'un objet Polygon converti en HTMLCanvasElement à 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!