Bagaimana untuk menetapkan kedudukan imej dari atas menggunakan FabricJS?-tutorial js-php.cn

Bagaimana untuk menetapkan kedudukan imej dari atas menggunakan FabricJS?

WBOY

Lepaskan： 2023-09-20 22:57:04

ke hadapan

1298 orang telah melayarinya

Bagaimana untuk menetapkan kedudukan imej dari atas menggunakan FabricJS?

Dalam tutorial ini kita akan belajar cara menetapkan kedudukan imej menggunakan Dari Atas FabricJS. Kita boleh mencipta objek Imej dengan mencipta instance fabric.Image. sejak Ia adalah salah satu elemen asas FabricJS dan kami juga boleh menyesuaikannya dengan mudah melalui aplikasi Sudut, kelegapan dan sifat lain. Untuk menetapkan kedudukan imej dari atas yang kami gunakan Atribut atas.

Tatabahasa

new fabric.Image( element: HTMLImageElement | HTMLCanvasElement | HTMLVideoElement | String, { top: Number }: Object, callback: function)

Salin selepas log masuk

Parameter

elemen - Parameter ini menerima HTMLImageElement, HTMLCanvasElement, HTMLVideoElement atau String mewakili elemen imej. Rentetan mestilah URL dan akan dimuatkan sebagai imej.
Pilihan (pilihan) - Parameter ini ialah objek yang menyediakan penyesuaian tambahan objek kami. Menggunakan parameter ini, anda boleh menukar asalan, lebar lejang dan banyak sifat lain yang dikaitkan dengan objek imej yang atas ialah atributnya.
panggil balik (pilihan) - Parameter ini ialah fungsi untuk dipanggil selepas penapis akhir digunakan.

Kunci pilihan

top - Hartanah ini menerima Nombor yang membolehkan kami menetapkan jarak Atas kanvas imej.

Kemunculan lalai objek Imej

Contoh

Mari kita lihat contoh kod untuk memahami rupa objek imej apabila atas Harta tidak digunakan.

<!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>Default appearance of the Image object</h2>
   <p>You can see the default appearance of Image object</p>
   <canvas id="canvas"></canvas>
   <img  src="https://www.tutorialspoint.com/images/logo.png" id="img1"   style="max-width:90%" / alt="Bagaimana untuk menetapkan kedudukan imej dari atas menggunakan FabricJS?" >
   <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, {
         left: 50,
      });
      
      // Add it to the canvas
      canvas.add(image);
   </script>
</body>
</html>

Salin selepas log masuk

Lepaskan atribut atas sebagai kunci dengan nilai tersuai

Contoh

Dalam contoh ini, kami menetapkan nilai 70 kepada atribut atas. Ini akan memastikan Objek imej kami diletakkan 70 piksel dari atas.

<!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>Passing the top property as key with a custom value</h2>
   <p>
      You can see that the Image object is placed at a distance of 70px from the top
   </p>
   <canvas id="canvas"></canvas>
   <img  src="https://www.tutorialspoint.com/images/logo.png" id="img1"   style="max-width:90%" / alt="Bagaimana untuk menetapkan kedudukan imej dari atas menggunakan FabricJS?" >
   <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: 70,
         left: 50,
      });
      
      // Add it to the canvas
      canvas.add(image);
   </script>
</body>
</html>

Salin selepas log masuk

Atas ialah kandungan terperinci Bagaimana untuk menetapkan kedudukan imej dari atas menggunakan FabricJS?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!