cari

Rumah  >  Artikel  >  hujung hadapan web  >  Bagaimana untuk membuat kanvas dengan imej latar belakang menggunakan FabricJS?

Bagaimana untuk membuat kanvas dengan imej latar belakang menggunakan FabricJS?

王林
王林ke hadapan
2023-09-23 11:29:041086semak imbas

如何使用 FabricJS 创建带有背景图像的画布？

Dalam artikel ini, kami akan mencipta kanvas dengan imej latar belakang menggunakan FabricJS. Terdapat dua kaedah dalam FabricJS untuk menukar imej latar belakang kanvas.

  • Cara pertama ialah menggunakan kelas Kanvas itu sendiri dan lulus backgroundImage.

  • Kaedah kedua ialah menggunakan kaedah setBackgroundColor. Mari kita fahami mereka melalui contoh.

Kaedah 1: Menggunakan kelas Canvas

Dalam kaedah pertama, kita akan menggunakan kelas Canvas itu sendiri dengan menghantar backgroundImage dalam parameter kedua kelas. Tatabahasa semula 

new fabric.Canvas(element: HTMLElement|String, {backgroundImage: fabric.Image}: Object)

Parameter

  • Elemen -Ini adalah elemen itu sendiri, anda boleh menggunakan Document.GetelementByid () em> elemen sendiri () Kanvas FabricJS akan dimulakan pada elemen ini.

  • Pilihan (pilihan)

    - Parameter ini ialah objek yang menyediakan penyesuaian tambahan pada kanvas, backgroundImage adalah salah satu daripadanya, ia akan membantu kami menyesuaikan imej latar belakang. Imej latar belakang Gunakan fabrik.Imej sebagai nilai imej latar belakang kanvas yang ditentukan.

    Contoh 1
Lihat contoh berikut yang menunjukkan cara mencipta Kanvas dengan imej latar belakang menggunakan FabricJS. Memandangkan FabricJS berfungsi di atas API Kanvas, kami akan mencipta elemen HTML menggunakan teg

dan memberikannya id. Selain itu, kami akan menghantar id itu kepada API FabricJS supaya ia boleh memulakan tika FabricJS Canvas pada teg

, dan dalam parameter kedua kami akan menghantar objek dengan imej latar belakang utama dan nilainya sebagai URL imej. 

<!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> Creating a Canvas with a Background Image in Fabric.js </h2>
   <canvas id="canvas"> </canvas>
   <script>
      //Initiate a canvas instance
      var canvas = new fabric.Canvas("canvas", {
         backgroundImage: "https://www.tutorialspoint.com/tools/images/logo.png",
      });
      canvas.setWidth(document.body.scrollWidth);
      canvas.setHeight(250);
   </script>
</body>
</html>
Kaedah 2: Gunakan kaedah setBackgroundImageKita juga boleh menggunakan kaedah

setBackgroundImage

yang disediakan dalam kelas Canvas selepas mencipta kanvas. Mari kita lihat lebih dekat bagaimana untuk mencapai ini.

Syntax

canvas.setBackgroundImage(image: fabric.Image | String, callback: function, options: Object)

Parameter

  • imej

    - Parameter ini menerima fabrik.Imej atau URL rentetan yang dipetik bagi imej yang ingin kita tetapkan latar belakangnya.

  • panggilan balik

    - Parameter ini mengambil fungsi panggil balik yang dipanggil apabila imej dimuatkan dan ditetapkan sebagai latar belakang.

  • Pilihan (pilihan):

    - Parameter ini ialah objek di mana kita boleh menentukan pilihan imej latar belakang. Kita boleh menukar kelegapan, membesarkan atau mengurangkan imej, dsb.

    Contoh 2
Mula-mula, kami menetapkan URL imej kepada pembolehubah dan menggunakannya sebagai parameter pertama. Dalam parameter kedua kami akan mengikat kanvas menggunakan kaedah renderAll() selepas menetapkan imej latar belakang seperti yang ditunjukkan dalam kod di bawah -

<!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> Creating a Canvas with a Background Image in Fabric.js </h2>
   <p> Here we have used the setBackgroundImage method. </p>
   <canvas id="canvas"> </canvas>
   <script>
      // Initiate a canvas instance
      var canvas = new fabric.Canvas("canvas");
      // Image URL
      var imageURL = "https://www.tutorialspoint.com/tools/images/logo.png";
      canvas.setBackgroundImage(imageURL, canvas.renderAll.bind(canvas), {
         backgroundImageOpacity: 1,
         originX: "left",
         originY: "top",
         top: 90,
         left: 70,
         scaleX: 1.1,
         scaleY: 1.1,
      });
      canvas.setWidth(document.body.scrollWidth);
      canvas.setHeight(250);
   </script>
</body>
</html>

Atas ialah kandungan terperinci Bagaimana untuk membuat kanvas dengan imej latar belakang menggunakan FabricJS?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

html 回调函数 字符串 对象 canvas fabric
Kenyataan：
Artikel ini dikembalikan pada:tutorialspoint.com. Jika ada pelanggaran, sila hubungi admin@php.cn Padam
Artikel sebelumnya：Fabric.js – Cara melukis jaringan heksagon (sarang lebah) menggunakan kelas PoligonArtikel seterusnya：Fabric.js – Cara melukis jaringan heksagon (sarang lebah) menggunakan kelas Poligon

Artikel berkaitan

Lihat lagi