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
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 biasa1. 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:
var rect = new fabric.Rectvar circle = new fabric.Circlevar triangle = new fabric.TriangleGunakan 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 gambarGambar 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 kanvasJavaScript 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 ditekanmouse:move : saat mouse bergerakmouse:up : Saat mouse diangkatOperasi 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 ulangobject:selected : Objek dipilihobject:moving : objek bergerakobject:rotating : Objek diputarobject:added : Objek ditambahkanobject:removed : Objek dihapusnew 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 deserialisasiserialisasi
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.