FabricJS – Bestimmen Sie, ob für ein Polygonobjekt zuerst Füllung oder Strich gezeichnet werden soll?-js-Tutorial-php.cn

FabricJS – Bestimmen Sie, ob für ein Polygonobjekt zuerst Füllung oder Strich gezeichnet werden soll?

王林

Freigeben： 2023-08-24 17:01:10

nach vorne

1384 Leute haben es durchsucht

FabricJS – 确定对于多边形对象应该首先绘制填充还是描边？

Wir können ein Polygon-Objekt erstellen, indem wir eine Instanz von fabric.Polygon erstellen. Ein Polygonobjekt kann als jede geschlossene Form charakterisiert werden, die aus einer Reihe verbundener gerader Liniensegmente besteht. Da es eines der Grundelemente von FabricJS ist, können wir es auch einfach anpassen, indem wir Eigenschaften wie Winkel, Deckkraft usw. anwenden. Um zu bestimmen, ob die Füllung oder der Strich zuerst gemalt werden soll, verwenden wir die Eigenschaft paintFirst.

Grammatik

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

Nach dem Login kopieren

Parameter

points – Dieser Parameter akzeptiert ein Array, das ein Array von Punkten darstellt, die ein Polygonobjekt bilden, wobei sich jeder Punkt in einem Objekt mit x und y befindet.
Optionen (optional) – Dieser Parameter ist ein Objekt, das unserem Objekt zusätzliche Anpassungen ermöglicht. Mit diesem Parameter können Sie den Ursprung, die Strichstärke und viele andere Eigenschaften im Zusammenhang mit dem Polygon-Objekt ändern, wobei paintFirst eine Eigenschaft dieses Objekts ist.

Wahltaste

paintFirst – Diese Eigenschaft akzeptiert einen String-Wert, der definiert, ob die Füllung oder der Strich zuerst gezeichnet wird. Der Standardwert ist „fill“.

Beispiel 1: Standarddarstellung von Polygonobjekten

Sehen wir uns ein Codebeispiel an, um zu sehen, wie ein Polygonobjekt angezeigt wird, wenn das Attribut paintFirst nicht angewendet wird. Verwenden Sie in diesem Beispiel den Standardwert „fill“. Das bedeutet, dass beim Zeichnen eines Objekts zuerst die Füllfarbe und dann die Strichfarbe gezeichnet werden.

<!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>

Nach dem Login kopieren

Beispiel 2: Verwendung des paintFirst-Attributs

Schauen wir uns ein Codebeispiel an, wie man mit der Eigenschaft paintFirst das Standardverhalten eines Polygonobjekts ändert. Hier übergeben wir den Wert „lines“ an das Attribut paintFirst. Dadurch wird sichergestellt, dass zuerst der Strich und nicht die Füllung gezeichnet wird.

<!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>

Nach dem Login kopieren

Fazit

In diesem Tutorial zeigen wir anhand von zwei einfachen Beispielen, wie Sie mit FabricJS bestimmen, ob für ein Polygon zuerst eine Füllung oder ein Strich gezeichnet werden soll.

Das obige ist der detaillierte Inhalt vonFabricJS – Bestimmen Sie, ob für ein Polygonobjekt zuerst Füllung oder Strich gezeichnet werden soll?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!