Fabric.js: Lanjutan

Artikel ini menyelidiki ciri -ciri fabrik.js canggih: kumpulan, siri (dan deserialization), dan penciptaan kelas adat.

Konsep Utama:

• Kumpulan kain: dengan cekap menguruskan pelbagai objek sebagai satu unit, memudahkan manipulasi (bergerak, berskala, berputar).
• Serialization Canvas (JSON): Simpan dan memuatkan keadaan kanvas menggunakan JSON, kaedah yang lebih mesra jalur lebar daripada format imej.
• Penciptaan Kelas Custom: Extend fabric.js dengan tingkah laku objek dan sifat yang disesuaikan, dengan efisien bersiri dan deserialized.
• SVG Interoperability: Elemen kanvas eksport ke SVG dan mengimport kandungan SVG ke kanvas untuk fleksibiliti format.
Kaedah Deserialization:
• Gunakan dan untuk pemulihan keadaan kanvas lancar. loadFromJSON loadFromSVG
Kawalan Objek Lanjutan:
• Buat elemen interaktif kompleks dan objek yang sangat disesuaikan di luar bentuk asas melalui subclassing.

Kumpulan:

Kumpulan dalam fabric.js membenarkan menggabungkan objek ke dalam entiti tunggal. (Lihat Rajah 1). Mana -mana bilangan objek kanvas boleh dikumpulkan, membolehkan manipulasi bersatu. Skala, putaran, dan pengubahsuaian sifat kumpulan (warna, ketelusan, sempadan) semuanya mungkin. Fabrik secara tersirat mencipta kumpulan apabila memilih pelbagai objek.

Rajah 1 Penciptaan kumpulan programatik:

(lihat Rajah 2 untuk hasilnya). Objek individu dalam kumpulan diakses dan diubahsuai menggunakan kaedah

<code class="language-javascript">var text = new fabric.Text('hello world', { fontSize: 30 });
var circle = new fabric.Circle({ radius: 100, fill: '#eef', scaleY: 0.5 });
var group = new fabric.Group([text, circle], { left: 150, top: 100, angle: -10 });
canvas.add(group);</code>

.

item

Rajah 2 Mengubah Objek Kumpulan:

(lihat Rajah 3). Objek dalam kumpulan diposisikan berbanding dengan pusat kumpulan kecuali

<code class="language-javascript">group.item(0).set({ text: 'trololo', fill: 'white' });
group.item(1).setFill('red');</code>

/

koordinat ditentukan. left top

Rajah 3 Membuat kumpulan sejajar secara melintang:

(lihat Rajah 4). Bagi kumpulan yang mengandungi imej, pastikan imej dimuatkan sepenuhnya sebelum pengelompokan.

<code class="language-javascript">var circle1 = new fabric.Circle({ radius: 50, fill: 'red', left: 0 });
var circle2 = new fabric.Circle({ radius: 50, fill: 'green', left: 100 });
var circle3 = new fabric.Circle({ radius: 50, fill: 'blue', left: 200 });
var group = new fabric.Group([circle1, circle2, circle3], { left: 200, top: 100 });
canvas.add(group);</code>

Rajah 4 Kaedah kumpulan termasuk

,

, getObjects, size, contains, item, dan forEachObject. add Menambah objek semasa mengemas kini dimensi kumpulan. Pengklonan objek kanvas sedia ada diperlukan sebelum menambahkannya ke kumpulan baru. remove addWithUpdate

Serialization:

fabric.js menggunakan toObject dan toJSON untuk bersiri. toJSON secara tersirat memanggil toObject.

Contoh: bersiri kanvas kosong:

<code class="language-javascript">var text = new fabric.Text('hello world', { fontSize: 30 });
var circle = new fabric.Circle({ radius: 100, fill: '#eef', scaleY: 0.5 });
var group = new fabric.Group([text, circle], { left: 150, top: 100, angle: -10 });
canvas.add(group);</code>

Menambah objek mengemas kini perwakilan JSON. toObject Mengembalikan perwakilan objek bukan rentetan. Menyesuaikan Serialization Object dicapai dengan mengatasi atau memperluaskan kaedah toObject.

Contoh: Memperluas toObject:

<code class="language-javascript">group.item(0).set({ text: 'trololo', fill: 'white' });
group.item(1).setFill('red');</code>

SVG Serialization menggunakan kaedah toSVG, mewakilkan ke kaedah toSVG

deserialization:

dan loadFromJSON beban kanvas dari JSON. loadFromDatalessJSON dan loadSVGFromURL beban dari data SVG. loadSVGFromString mengendalikan data laluan besar dengan cekap dengan merujuk fail SVG luaran. loadFromDatalessJSON

subclassing:

fabric.js menggunakan

untuk subclassing. Harta fabric.util.createClass bertindak sebagai pembina. initialize memanggil kaedah kelas induk. callSuper

Contoh: Membuat kelas tersuai:

<code class="language-javascript">var circle1 = new fabric.Circle({ radius: 50, fill: 'red', left: 0 });
var circle2 = new fabric.Circle({ radius: 50, fill: 'green', left: 100 });
var circle3 = new fabric.Circle({ radius: 50, fill: 'blue', left: 200 });
var group = new fabric.Group([circle1, circle2, circle3], { left: 200, top: 100 });
canvas.add(group);</code>

(lihat Rajah 8 dan 9 untuk contoh

). Sifat tersuai harus dikendalikan dalam LabeledRect dan toObject. initialize

Soalan Lazim (Soalan Lazim): (Soalan Lazim yang disediakan sudah berstruktur dan komprehensif, jadi tiada perubahan diperlukan di sini.) Imej -imej itu dimasukkan seperti yang diminta, mengekalkan format dan kedudukan asalnya dalam teks.

Atas ialah kandungan terperinci Fabric.js: Lanjutan. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!