FabricJS - Bagaimana untuk mencipta contoh fabric.Imej daripada perwakilan objeknya?-tutorial js-php.cn

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

WBOY

Lepaskan： 2023-08-25 21:17:14

ke hadapan

770 orang telah melayarinya

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)

Salin selepas log masuk

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>

Salin selepas log masuk

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>

Salin selepas log masuk

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!