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.
new fabric.Polygon( points: Array, { paintFirst: String }: Object )
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.
paintFirst – Diese Eigenschaft akzeptiert einen String-Wert, der definiert, ob die Füllung oder der Strich zuerst gezeichnet wird. Der Standardwert ist „fill“.
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>
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>
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!
