Fabric.js هي مكتبة تعمل على تبسيط كتابة برامج Canvas. يوفر Fabric.js لـ Canvas نموذج الكائن المفقود ومحلل svg والتفاعل ومجموعة كاملة من الأدوات الأخرى التي لا غنى عنها. نظرًا لأن Fabric.js إطار عمل أجنبي، فإن واجهة برمجة التطبيقات الرسمية فوضوية ومتعددة، ومعظم المستندات ذات الصلة باللغة الإنجليزية، والعدد صغير، لذلك تهدف هذه المقالة إلى مساعدة المبتدئين على البدء بسرعة في استخدام Fabric.js مشروع واستمتع بعملية رسم القماش.
لماذا استخدام Fabric.js؟يوفر Canvas قدرة جيدة على استخدام Canvas، لكن واجهة برمجة التطبيقات (API) ليست ودية بدرجة كافية. إن رسم رسومات بسيطة أمر جيد في الواقع، لكن ليس من المناسب رسم بعض الرسومات المعقدة وكتابة بعض التأثيرات المعقدة. تم تطوير Fabric.js لهذا الغرض ويستخدم بشكل أساسي الكائنات لكتابة التعليمات البرمجية.
ما يمكن أن يفعله Fabric.js
تقديم Fabric.js إلى مشروع Vue
بافتراض أنك تستخدم ES6 وWebpack في مشروعك، يمكنك البدء في استخدام Fabric.js كما يلي:
1. في سطر الأوامر:
قماش تثبيت npm (أو نسيج إضافة غزل)
2. أدخله في ملف .vue
استيراد {قماش} من "قماش" 3. ابدأ رحلة Fabric.js الخاصة بك في دورة الحياة mounted: لملف واحد في .vue
ملحوظة: تنتج وحدة Fabric npm الافتراضية حزمًا كبيرة جدًا إذا كان لديك الكثير من الحزم في Fabric.js التي قد لا تحتاجها، وفي هذه الحالة يمكنك إنشاء نسختك الخاصة هنا أو في سطر الأوامر.
رسم الرسومات ارسم رسومات عادية1. أعلن قماش
var Canvas =new Fabric.Canvas('main');2. رسم الرسومات
var rect = new Fabric.Rect({ left:100,// المسافة من الجانب الأيسر من اللوحة القماشية، بالبكسل أعلى: 100,// المسافة من أعلى ملء اللوحة القماشية: 'أحمر'،// عرض لون التعبئة :30 ,//عرض ارتفاع المربع:30//ارتفاع المربع});3. أضف الرسومات إلى اللوحة القماشية
Canvas.add(rect);
رسومات القواعد الأخرى:
var rect = new fabric.Rectvar circle = new fabric.Circlevar triangle = new fabric.Triangleاستخدم رسم المسار: ارسم باستخدام حركة النقاط والخطوط. رسم أشكال معقدة للغاية من خلال تطبيق الخطوط والمنحنيات والأقواس.
في طريقة Fabric.Path()، يمثل M أمر الحركة، ويمثل M 00 نقل الفرشاة إلى إحداثيات النقطة (0,0).
L يمثل الخط، L 200 100 يعني استخدام القلم لرسم خط من (0,0) إحداثيات إلى (200,100) إحداثيات. z تعني إغلاق مسار الشكل.
بعد رسم المثلث، يمكننا استخدام طريقة set() لتعيين الموضع واللون والزاوية والشفافية والسمات الأخرى للمثلث.
الكود المحدد هو كما يلي:
var path = new Fabric.Path('M 0 0 L 200 100 L 170 200 z');path.set({ left: 120, top: 120,fill:'red' });canvas.add(path); العمليات على الصورHTML إدراج الصورة
<body> <canvas id=canvas width='800' height='800'></canvas> <img src=./2.png id=img> </body> ---------- ----------- var Canvas = new Fabric.Canvas('canvas');// أعلن عن اللوحة القماشية var imgElement = document.getElementById('img');// أعلن عن صورتنا var imgInstance = new Fabric.Image(imgElement,{ // اضبط موضع الصورة ومظهرها على اليسار:100، الأعلى:100، العرض:200، الارتفاع:100، الزاوية:30//اضبط زاوية دوران الرسم في اتجاه عقارب الساعة}); (imgInstance) ;// أضف إلى اللوحة القماشيةجافا سكريبت إدراج الصورة
var Canvas = new Fabric.Canvas('canvas'); Fabric.Image.fromURL('./2.png', function(oImg) { oImg.scale(0.1);// تم تصغير الصورة بمقدار 10 مرات Canvas. add(oImg }); تفاعل التفاعل مع القماش Canvas.add(imgInstance);// أضف إلى اللوحة القماشية var Canvas = new Fabric.Canvas('canvas'); Canvas.on('mouse:down', function(options) { console.log(options.e.clientX , options.e.clientY) })ملحوظة: أحداث المراقبة شائعة الاستخدام هي كما يلي:
mouse:down : عند الضغط على الماوسmouse:move : عندما يتحرك الماوسmouse:up : عند رفع الماوسالعمليات على الكائنات الموجودة على القماش
var Canvas = new Fabric.Canvas('canvas'); var rect = new Fabric.Rect({ width: 100, height: 50, fill: 'green' }); // حدد حدث الاستماع console.log('مستطيل محدد' }); var Circle = new Fabric.Circle({ radius: 75, fill: 'blue' }); Circle.on('selected', function() { console.log('selected Circle'); });ملحوظة: أحداث المراقبة شائعة الاستخدام هي كما يلي:
after:render : بعد إعادة رسم اللوحة القماشيةobject:selected : تم تحديد الكائنobject:moving : كائن متحركobject:rotating : يتم تدوير الكائنobject:added : تتم إضافة الكائنobject:removed : تمت إزالة الكائنnew Fabric.Group(): يقبل معلمتين: مصفوفة مكونة من أسماء الكائنات المراد دمجها، والسمات المشتركة للكائنات المدمجة.
var Canvas = new Fabric.Canvas('canvas'); var Circle = new Fabric.Circle({// ارسم دائرة نصف قطرها: 100، املأها: '#f00'، مقياس Y: 0.5، OriginX: 'center'،// اضبط إحداثيات المحور السيني للنقطة المركزية OriginY: 'center'// اضبط إحداثيات المحور Y للنقطة المركزية}); var text = new Fabric.Text('Hello World', {// ارسم حجم خط النص: 30, OriginX: 'center', OriginY: 'center' }) // دمج var group = new Fabric.Group([circle, text], { left: 150, top: 100, angle: 10 }) Canvas.add ( مجموعة)؛ التسلسل وإلغاء التسلسلالتسلسل
var Canvas = new Fabric.Canvas('canvas'); var rect = new Fabric.Rect({ width: 100, height: 100, fill: 'red' }); .stringify(canvas.toJSON()));إلغاء التسلسل
var Canvas = new Fabric.Canvas('canvas'); Canvas.loadFromJSON('{objects:[{type:rect,left:50,top:50,width:20,height:20,fill:green,overlayFill:null }')SVG
var Canvas = new Fabric.Canvas('canvas'); var rect = new Fabric.Rect({ width: 100, height: 100, fill: 'red' }); ;الوثائق المرجعية: http://fabricjs.com/articles/
ما ورد أعلاه هو المحتوى الكامل لهذه المقالة وآمل أن يكون مفيدًا لدراسة الجميع وآمل أيضًا أن يدعم الجميع شبكة VeVb Wulin.