FabricJS - Déterminer si le remplissage ou le contour doit être dessiné en premier pour un objet polygone ?-js tutoriel-php.cn

FabricJS - Déterminer si le remplissage ou le contour doit être dessiné en premier pour un objet polygone ?

王林

Libérer： 2023-08-24 17:01:10

avant

1383 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. Pour déterminer si le remplissage ou le contour doit être peint en premier, nous utilisons la propriété paintFirst.

Grammaire

new fabric.Polygon( points: Array, { paintFirst: String }: Object )

Copier après la connexion

Paramètres

points - Ce paramètre accepte un Array qui représente un tableau de points qui composent un objet polygone, où chaque point est dans un objet avec x et y .
Options (facultatif) - Ce paramètre est un objet qui fournit une personnalisation supplémentaire à notre objet. En utilisant ce paramètre, vous pouvez modifier l'origine, la largeur du trait et de nombreuses autres propriétés liées à l'objet Polygon, où paintFirst est une propriété de cet objet.

Touche d'option

paintFirst - Cette propriété accepte une valeur String qui définit si le fond ou le contour est dessiné en premier. La valeur par défaut est « remplir ».

Exemple 1 : Apparence par défaut des objets polygones

Regardons un exemple de code pour voir comment un objet polygone s'affiche lorsque l'attribut paintFirst n'est pas appliqué. Dans cet exemple, utilisez la valeur par défaut "fill". Cela signifie que lorsqu'un objet est dessiné, la couleur de remplissage est dessinée en premier, suivie de la couleur du contour.

<!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 polygon object</h2>
   <p>You can see the default appearance of polygon object</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,
         }
      );
      
      // Adding it to the canvas
      canvas.add(polygon);
   </script>
</body> 
</html>

Copier après la connexion

Exemple 2 : Utilisation de l'attribut paintFirst

Regardons un exemple de code sur la façon de modifier le comportement par défaut d'un objet polygone à l'aide de la propriété paintFirst. Ici, nous transmettons la valeur "lines" à l'attribut paintFirst. Cela garantit que le trait est dessiné en premier et non le remplissage.

<!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 paintFirst property</h2>
   <p>You can see that the stroke is painted first now</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,
            paintFirst: "stroke",
         }
      );
      
      // Adding it to the canvas
      canvas.add(polygon);
   </script>
</body> 
</html>

Copier après la connexion

Conclusion

Dans ce didacticiel, nous utilisons deux exemples simples pour montrer comment utiliser FabricJS afin de déterminer si un remplissage ou un contour doit être dessiné en premier pour un polygone.

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!