Rumah > Artikel > hujung hadapan web > FabricJS - Cari konteks lukisan objek Poligon ditukar kepada HTMLCanvasElement?

FabricJS - Cari konteks lukisan objek Poligon ditukar kepada HTMLCanvasElement?

WBOYke hadapan: 2023-08-30 17:33:06701semak imbas

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

Kita boleh mencipta objek Poligon dengan mencipta contoh fabric.Polygon. Objek poligon boleh dicirikan sebagai sebarang bentuk tertutup yang terdiri daripada satu set segmen garis lurus yang bersambung. Memandangkan ia adalah salah satu elemen asas FabricJS, kami juga boleh menyesuaikannya dengan mudah dengan menggunakan sifat seperti sudut, kelegapan, dsb.

Untuk menukar objek poligon kepada HTMLCanvasElement, kami menggunakan kaedah toCanvasElement. Ia mengembalikan elemen DOM jenis HTMLCanvasElement, yang mewarisi sifat dan kaedahnya daripada antara muka HTMLElement. Kami menggunakan kaedah getContext untuk mencari konteks lukisan pada kanvas. Jika ID konteks tidak disokong, nilai nol dikembalikan.

Tatabahasa

HTMLCanvasElement.getContext():

Contoh 1: Menggunakan kaedah toCanvasElement

Mari kita lihat contoh kod untuk melihat output yang dilog apabila menggunakan kaedah toCanvasElement. Apabila menggunakan kaedah toCanvasElement, elemen DOM jenis HTMLCanvasElement akan dikembalikan. Anda boleh membuka konsol daripada alat dev untuk melihat bahawa elemen DOM jenis HTMLCanvasElement sedang dikembalikan.

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

Contoh 2: Menggunakan kaedah getContext

Mari kita lihat contoh kod output yang dilog apabila menggunakan kaedah getContext dan kaedah toCanvasElement untuk mencari konteks lukisan objek Poligon yang ditukar kepada HTMLCanvasElement. Konteks lukisan membolehkan kita melukis di atas kanvas. Memandangkan kami menghantar nilai "2d" kepada kaedah getContext, objek CanvasRenderingContext2D dikembalikan.

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

Kesimpulan

Dalam tutorial ini, kami menggunakan dua contoh mudah untuk menunjukkan cara mencari konteks lukisan objek Poligon yang ditukar kepada HTMLCanvasElement menggunakan FabricJS.

Atas ialah kandungan terperinci FabricJS - Cari konteks lukisan objek Poligon ditukar kepada HTMLCanvasElement?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

NULL 继承接口对象 dom fabric

Kenyataan：

Artikel ini dikembalikan pada:tutorialspoint.com. Jika ada pelanggaran, sila hubungi admin@php.cn Padam

Artikel sebelumnya：Mulakan Perjalanan Backbone.jsArtikel seterusnya：Mulakan Perjalanan Backbone.js

Artikel berkaitan

Lihat lagi