Wir können Polygonobjekte erstellen, indem wir Instanzen 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.
new fabric.Polygon( points: Array, options: Object )
points – Dieser Parameter akzeptiert ein Array, das das Array von Punkten darstellt, aus denen das Polygonobjekt besteht.
Optionen (optional) – Dieser Parameter ist ein Objekt , das für unsere Zwecke nützlich ist. Verwenden Sie diesen Parameter, um den Ursprung, die Strichstärke und viele andere Eigenschaften zu ändern, die mit dem Polygon-Objekt verknüpft sind.
Schauen wir uns ein Codebeispiel zum Zeichnen von Sechsecken mithilfe von Polygonen an. Wir können viele Arten von Sechsecken zeichnen, in diesem Beispiel zeichnen wir jedoch ein regelmäßiges Sechseck. Wir wissen, dass ein regelmäßiges Sechseck sechs gleiche Seiten hat.
<!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>Drawing a Hexagon using Polygon</h2>
<p>You can see a hexagon 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);
// Initiating the angle of the hexagon
const a = (2 * Math.PI) / 6;
// Initiating the radius of the circle
const r = 50;
// Initiate a polygon object
var hexagon = new fabric.Polygon(
[
{ x: 50, y: 0 },
{ x: 25, y: 43.30},
{ x: -25, y: 43.301 },
{ x: -50, y: 0},
{ x: -25, y: -43.301},
{ x: 25, y: -43.301 },
],
{
stroke: "red",
left: 140,
top: 10,
strokeWidth: 2,
strokeLineJoin: "bevil",
}
);
// Adding it to the canvas
canvas.add(hexagon);
</script>
</body>
</html>
Schauen wir uns ein Codebeispiel an, um zu sehen, wie man ein sechseckiges Gitter erstellt. Wir können einfach eine Funktion namens drawHexagon(m,n) starten, wobei (m,n) der Mittelpunkt des Sechsecks ist. Bei jedem Aufruf dieser Funktion wird ein Sechseck gezeichnet. Wir starten auch die Funktion drawGrid(width, height), die aufeinanderfolgende Sechsecke zeichnet, indem sie die Position des nächsten Mittelpunkts der aufeinanderfolgenden Sechsecke berechnet.
<!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>Drawing a Hexagonal grid using Polygon</h2>
<p>You can see that a hexagonal grid has been drawn</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
function drawHexagon(left, top) {
var hexagon = new fabric.Polygon(
[
{ x: 50, y: 0 },
{ x: 25, y: 43.30},
{ x: -25, y: 43.301 },
{ x: -50, y: 0},
{ x: -25, y: -43.301},
{ x: 25, y: -43.301 },
],
{
stroke: "#EEC33D",
fill: "#BB900C",
strokeWidth: 5,
left: left,
top: top
}
);
// Adding it to the canvas
canvas.add(hexagon);
}
// Initiating the drawGrid function
function drawGrid() {
for (let y = 1; y < 4; y++) {
drawHexagon(80*y,45*y)
}
for (let y = 1; y < 4; y++) {
drawHexagon(80*y+160,45*y)
}
for (let y = 1; y < 4; y++) {
drawHexagon(80*y+320,45*y)
}
}
// Calling drawGrid function
drawGrid();
</script>
</body>
</html>
In diesem Tutorial zeigen wir anhand zweier einfacher Beispiele, wie man mithilfe der Polygon-Klasse und FabricJS ein sechseckiges Gitter zeichnet.
Das obige ist der detaillierte Inhalt vonFabric.js – So zeichnen Sie ein sechseckiges Gitter (Wabe) mit der Polygon-Klasse. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
