Beranda>Tutorial Desain Web>tutorial HTML

Penjelasan mendetail tentang manual pustaka utilitas Canvas Fabric.js

Penulis：Eve Cole Waktu Pembaruan：2025-03-16 07:32:01
PendahuluanApa itu Fabric.js?

Fabric.js adalah perpustakaan yang menyederhanakan penulisan program Canvas. Fabric.js memberi Canvas model objek yang hilang, parser svg, interaktivitas, dan sejumlah alat penting lainnya. Karena Fabric.js adalah kerangka kerja asing, API resminya berantakan dan banyak, dan sebagian besar dokumen yang relevan dalam bahasa Inggris, dan jumlahnya sedikit. Oleh karena itu, artikel ini bertujuan untuk membantu pemula dengan cepat memulai dengan Fabric.js di proyek dan nikmati proses menggambar Kanvas.

Mengapa menggunakan Fabric.js?

Canvas menyediakan kemampuan kanvas yang baik, tetapi API-nya kurang ramah. Menggambar grafik sederhana sebenarnya oke, tetapi menggambar beberapa grafik yang rumit dan menulis beberapa efek yang rumit tidaklah mudah. Fabric.js dikembangkan untuk tujuan ini. Ini terutama menggunakan objek untuk menulis kode.

Apa yang bisa dilakukan Fabric.js

  • Membuat dan mengisi grafik di Canvas (termasuk gambar, teks, grafik biasa, dan grafik jalur kompleks).
  • Isi bentuk dengan warna gradien.
  • Grafik gabungan (termasuk grafik gabungan, teks grafik, gambar, dll.).
  • Atur animasi grafis mengatur interaksi pengguna.
  • Hasilkan JSON, data SVG, dll.
  • Hasilkan objek Canvas dengan fungsi drag and drop bawaan.
Awal

Memperkenalkan Fabric.js ke dalam proyek Vue

Dengan asumsi Anda menggunakan ES6 dan Webpack dalam proyek Anda, Anda dapat mulai menggunakan Fabric.js sebagai berikut:

1. Di baris perintah: 

 npm install fabric (atau benang tambahkan kain)

2. Masukkan ke dalam file .vue 

 impor { kain } dari 'kain'

3. Mulai perjalanan Fabric.js Anda dalam siklus hidup mounted: dari satu file di .vue

Catatan: Modul fabric npm default menghasilkan paket yang cukup besar. Jika Anda memiliki banyak paket di Fabric.js yang mungkin tidak Anda perlukan, dalam hal ini Anda dapat membuat versi Anda sendiri di sini atau di baris perintah.

Menggambar grafik

Gambarlah grafik biasa

1. Deklarasikan kanvas 

 var kanvas =kain baru.Kanvas('utama');

2. Menggambar grafik 

 var rect = kain baru.Rect({ kiri:100,//Jarak dari sisi kiri kanvas, dalam piksel atas:100,//Jarak dari atas kanvas isian:'merah',//Isi lebar warna :30 ,//Lebar persegi, tinggi:30//Tinggi persegi});

3. Tambahkan grafik ke kanvas 

 canvas.add(lurus);

Grafik aturan lainnya:

  • Gambarlah persegi var rect = new fabric.Rect
  • Gambarlah sebuah lingkaran var circle = new fabric.Circle
  • Gambarlah segitiga var triangle = new fabric.Triangle

Gambarlah bentuk yang tidak beraturan

Gunakan gambar jalur: menggambar menggunakan pergerakan titik dan garis. Menggambar bentuk yang sangat kompleks melalui penerapan garis, kurva, dan busur.

Dalam metode fabric.Path(), M mewakili perintah gerakan, dan M 00 ini mewakili pergerakan kuas ke koordinat titik (0,0).

L melambangkan garis, L 200 100 artinya menggunakan pulpen untuk menggambar garis dari koordinat (0,0) ke koordinat (200,100). z berarti menutup jalur bentuk.

Setelah menggambar segitiga, kita dapat menggunakan metode set() untuk mengatur posisi, warna, sudut, transparansi dan atribut segitiga lainnya.

Kode spesifiknya adalah sebagai berikut: 

 var path = new fabric.Path('M 0 0 L 200 100 L 170 200 z');path.set({ kiri: 120, atas: 120,isi:'merah' });canvas.add(path);

Operasi pada gambar

Gambar sisipan HTML 

 <body> <kanvas id=kanvas lebar='800' tinggi='800'></canvas> <img src=./2.png id=img> </body> ---------- ----------- var canvas = new fabric.Canvas('canvas');//Deklarasikan kanvas var imgElement = document.getElementById('img');//Deklarasikan gambar kita var imgInstance = new fabric.Image(imgElement,{ //Mengatur posisi dan tampilan gambar ke kiri:100, atas:100, lebar:200, tinggi:100, sudut:30//Mengatur sudut rotasi grafik searah jarum jam}); (imgInstance) ;//Tambahkan ke kanvas

JavaScript menyisipkan gambar 

 var canvas = new fabric.Canvas('canvas'); fabric.Image.fromURL('./2.png', function(oImg) { oImg.scale(0.1);//Gambar dikurangi 10 kali kanvas. tambahkan(oImg );
interaksi

Interaksi dengan kanvas 

 canvas.add(imgInstance);//Tambahkan ke kanvas var canvas = new fabric.Canvas('canvas'); canvas.on('mouse:down', function(options) { console.log(options.e.clientX , options.e.clientY) })

Catatan: Peristiwa pemantauan yang umum digunakan adalah sebagai berikut:

  • mouse:down : ketika mouse ditekan
  • mouse:move : saat mouse bergerak
  • mouse:up : Saat mouse diangkat

Operasi pada objek di kanvas 

 var kanvas = kain baru.Kanvas('kanvas'); var rect = kain baru.Rect({ lebar: 100, tinggi: 50, isi: 'hijau' }); //Pilih acara mendengarkan console.log('memilih persegi panjang' }); var lingkaran = new fabric.Circle({ radius: 75, isi: 'biru'); }); lingkaran.on('dipilih', fungsi() { console.log('dipilih lingkaran'); });

Catatan: Peristiwa pemantauan yang umum digunakan adalah sebagai berikut:

  • after:render : setelah kanvas digambar ulang
  • object:selected : Objek dipilih
  • object:moving : objek bergerak
  • object:rotating : Objek diputar
  • object:added : Objek ditambahkan
  • object:removed : Objek dihapus

kombinasi

new fabric.Group(): menerima dua parameter: array yang terdiri dari nama objek yang akan digabungkan, dan atribut umum dari objek yang digabungkan. 

 var canvas = new fabric.Canvas('canvas'); var lingkaran = new fabric.Circle({//Gambarlah radius lingkaran: 100, isi: '#f00', skalaY: 0.5, originX: 'center',// Sesuaikan koordinat sumbu X titik pusat originY: 'center'//Sesuaikan koordinat sumbu Y titik pusat}); var text = new fabric.Text('Hello World', {//Gambar teks fontSize: 30, originX: 'center', originY: 'center' }) //Gabungkan var group = new fabric.Group([lingkaran, teks], { kiri: 150, atas: 100, sudut: 10 }) canvas.add ( kelompok);

Serialisasi dan deserialisasi

serialisasi 

 var kanvas = kain baru.Kanvas('kanvas'); var rect = kain baru.Rect({ lebar: 100, tinggi: 100, isi: 'merah' }); .stringify(kanvas.toJSON()));

Deserialisasi 

 var kanvas = new fabric.Canvas('canvas'); canvas.loadFromJSON('{objek:[{type:rect,left:50,top:50,width:20,height:20,fill:green,overlayFill:null }')

SVG 

 var kanvas = kain baru.Kanvas('kanvas'); var rect = kain baru.Rect({ lebar: 100, tinggi: 100, isi: 'merah' }); ;

Dokumentasi referensi: http://fabricjs.com/articles/

Di atas adalah keseluruhan isi artikel ini, saya harap dapat bermanfaat untuk pembelajaran semua orang. Saya juga berharap semua orang mendukung VeVb Wulin Network.

Artikel Terkait