masyarakat Belajar Perpustakaan Alatan Masa lapang
cari
Melayu
Rumah > hujung hadapan web > tutorial js > Bagaimana untuk membuat kanvas dengan imej latar belakang menggunakan FabricJS?

Bagaimana untuk membuat kanvas dengan imej latar belakang menggunakan FabricJS?

王林
Lepaskan： 2023-09-23 11:29:04
ke hadapan
1144 orang telah melayarinya

如何使用 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)
Salin selepas log masuk

Parameter

  • Elemen -Ini adalah elemen itu sendiri, anda boleh menggunakan Document.GetelementByid () 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>
Salin selepas log masuk
Kaedah 2: Gunakan kaedah setBackgroundImage< /p>Kita 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)
Salin selepas log masuk

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>
Salin selepas log masuk

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!

sumber：tutorialspoint.com
Artikel sebelumnya：Fabric.js – Cara melukis jaringan heksagon (sarang lebah) menggunakan kelas Poligon Artikel seterusnya：Laksanakan algoritma skrin hijau menggunakan JavaScript
Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Artikel terbaru oleh pengarang
Isu terkini
function_exists() tidak boleh menentukan fungsi tersuai Ujian fungsi () {return true;} jika (function_exists ('test')) {echo "test is functio...
daripada 2024-04-29 11:01:01
0
3
2357
Bagaimana untuk memaparkan versi mudah alih Google Chrome Hello cikgu, bagaimana saya boleh menukar Google Chrome kepada versi mudah alih?
daripada 2024-04-23 00:22:19
0
11
2489
Tetingkap anak mengendalikan tetingkap induk, tetapi output tidak bertindak balas. Dua ayat pertama boleh dilaksanakan, tetapi ayat terakhir tidak boleh dilaksanakan.
daripada 2024-04-19 15:37:47
0
1
2105
Tiada output dalam tetingkap induk document.onclick = function(){ window.opener.document.write('Saya adalah output tetingkap ...
daripada 2024-04-18 23:52:34
0
1
1985
Di manakah perisian kursus tentang pemetaan minda CSS? Perisian kursus
daripada 2024-04-16 10:10:18
0
0
2056
Topik-topik yang berkaitan
Lagi>
Cadangan popular
Tutorial Popular
Lagi>
Tutorial berkaitan
Cadangan popular
Kursus terkini
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan