cari

Rumah  >  Artikel  >  hujung hadapan web  >  FabricJS - Bagaimana untuk mencipta contoh fabric.Imej daripada perwakilan objeknya?

FabricJS - Bagaimana untuk mencipta contoh fabric.Imej daripada perwakilan objeknya?

WBOY
WBOYke hadapan
2023-08-25 21:17:14769semak imbas

FabricJS – 如何从其对象表示创建fabric.Image 的实例？

Dalam tutorial ini kami akan menunjukkan kepada anda cara membuat contoh Fabric.Image Diperolehi daripada perwakilan objeknya menggunakan FabricJS. Kita boleh mencipta objek Imej dengan Buat contoh fabrik.Imej. Oleh kerana ia adalah salah satu elemen asas FabricJS, Kami juga boleh menyesuaikannya dengan mudah dengan menggunakan sifat seperti sudut, kelegapan, dsb. Untuk mencipta contoh fabrik.Imej daripada perwakilan objeknya, kami gunakan kaedah fromObject.

Tatabahasa

fromObject(object: Object, callback: function)

Parameter

  • objek - Parameter ini menerima objek yang mewakili objek yang akan diperolehi daripada Imej akan dibuat.

  • panggilan balik - Parameter ini ialah fungsi apabila imej Contoh dibuat.

Jangan gunakan fromObjectkaedah

Contoh

Mari kita lihat contoh kod untuk memahami cara objek Imej muncul apabila fromObject Kaedah tidak digunakan. Dalam kes ini, kita hanya perlu mencipta contoh fabrik.Imej dan Tambahkan ini pada kanvas kami. 

<!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>Without using the fromObject method</h2>
   <p>You can see that the image object has been added to the canvas</p>
   <canvas id="canvas"></canvas>
   <img src="https://www.tutorialspoint.com/images/logo.png" id="img1" style="display: none" />
   <script>
      // Initiate a canvas instance
      var canvas = new fabric.Canvas("canvas");
      canvas.setWidth(document.body.scrollWidth);
      canvas.setHeight(250);
      
      // Initiating the image element
      var imageElement = document.getElementById("img1");
      
      // Initiate an Image object
      var image = new fabric.Image(imageElement, {
         top: 50,
         left: 110,
      });
      
      // Add it to the canvas
      canvas.add(image);
   </script>
</body>
</html>

Gunakan fromObjectkaedah

Contoh

Dalam contoh ini, kami menggunakan kaedah fromObject untuk menunjukkan bahawa kami boleh Objek imej boleh dibuat walaupun kita tidak mempunyai elemen imej. Dalam kes ini kita Objek dari mana contoh imej perlu dibuat. selepas Panggil fungsi panggil balik dan tambahkannya pada kanvas. 

<!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 fromObject method</h2>
   <p>You can see that the image has been added</p>
   <canvas id="canvas"></canvas>
   <script>
      // Initiate a canvas instance
      var canvas = new fabric.Canvas("canvas");
      canvas.setWidth(document.body.scrollWidth);
      canvas.setHeight(250);
      
      // Using fromObject method
      fabric.Image.fromObject({
            type: "image",
            version: "5.1.0",
            originX: "left",
            originY: "top",
            left: 110,
            src: "https://www.tutorialspoint.com/images/logo.png",
         },
         function(oImg) {
            oImg.set("top", 50);
            canvas.add(oImg);
         }
      );
   </script>
</body>
</html>

Kesimpulan

Dalam tutorial ini, kami menggunakan dua contoh untuk menunjukkan cara mencipta tika Dapatkan Fabric.Image daripada perwakilan objeknya menggunakan FabricJS.

Atas ialah kandungan terperinci FabricJS - Bagaimana untuk mencipta contoh fabric.Imej daripada perwakilan objeknya?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Object 回调函数 对象 fabric
Kenyataan：
Artikel ini dikembalikan pada:tutorialspoint.com. Jika ada pelanggaran, sila hubungi admin@php.cn Padam
Artikel sebelumnya：Bagaimana untuk menetapkan faktor skala menegak elips menggunakan FabricJS?Artikel seterusnya：Bagaimana untuk menetapkan faktor skala menegak elips menggunakan FabricJS?

Artikel berkaitan

Lihat lagi