Wir können Polygon-Objekte 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 ein Polygonobjekt in ein HTMLCanvasElement zu konvertieren, verwenden wir die Methode toCanvasElement. Es gibt ein DOM-Element vom Typ HTMLCanvasElement zurück, das seine Eigenschaften und Methoden von der HTMLElement-Schnittstelle erbt. Wir verwenden die Methode getContext, um den Zeichnungskontext auf der Leinwand zu finden. Wenn die Kontext-ID nicht unterstützt wird, wird ein Nullwert zurückgegeben.
HTMLCanvasElement.getContext():
Sehen wir uns ein Codebeispiel an, um die protokollierte Ausgabe bei Verwendung der Methode toCanvasElement zu sehen. Bei Verwendung der Methode toCanvasElement wird ein DOM-Element vom Typ HTMLCanvasElement zurückgegeben. Sie können die Konsole über die Entwicklungstools öffnen, um zu sehen, dass das DOM-Element vom Typ HTMLCanvasElement zurückgegeben 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 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>
Sehen wir uns ein Codebeispiel der protokollierten Ausgabe an, wenn die Methoden getContext und toCanvasElement verwendet werden, um den Zeichnungskontext eines Polygon-Objekts zu finden, das in ein HTMLCanvasElement konvertiert wurde. Der Zeichenkontext ermöglicht es uns, auf der Leinwand zu zeichnen. Da wir den Wert „2d“ an die getContext-Methode übergeben haben, wird ein CanvasRenderingContext2D-Objekt zurückgegeben.
<!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>
In diesem Tutorial zeigen wir anhand von zwei einfachen Beispielen, wie Sie den Zeichnungskontext eines Polygon-Objekts finden, das mithilfe von FabricJS in ein HTMLCanvasElement konvertiert wurde.
Das obige ist der detaillierte Inhalt vonFabricJS – Den Zeichnungskontext eines in ein HTMLCanvasElement konvertierten Polygon-Objekts finden?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
