FabricJS – Den Zeichnungskontext eines in ein HTMLCanvasElement konvertierten Polygon-Objekts finden?-js-Tutorial-php.cn

FabricJS – Den Zeichnungskontext eines in ein HTMLCanvasElement konvertierten Polygon-Objekts finden?

WBOY

Freigeben： 2023-08-30 17:33:06

nach vorne

756 Leute haben es durchsucht

FabricJS – 查找转换为 HTMLCanvasElement 的 Polygon 对象的绘图上下文？

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.

Grammatik

HTMLCanvasElement.getContext():

Nach dem Login kopieren

Beispiel 1: Verwendung der toCanvasElement-Methode

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>

Nach dem Login kopieren

Beispiel 2: Verwendung der getContext-Methode

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>

Nach dem Login kopieren

Fazit

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!