Fabric.js เป็นไลบรารีที่ทำให้การเขียนโปรแกรม Canvas ง่ายขึ้น Fabric.js ช่วยให้ Canvas มีโมเดลออบเจ็กต์ที่ขาดหายไป ตัวแยกวิเคราะห์ svg การโต้ตอบ และโฮสต์ของเครื่องมือที่ขาดไม่ได้อื่นๆ เนื่องจาก Fabric.js เป็น framework ต่างประเทศ API อย่างเป็นทางการจึงยุ่งเหยิงและมีจำนวนมาก และเอกสารที่เกี่ยวข้องส่วนใหญ่เป็นภาษาอังกฤษ และมีจำนวนน้อย ดังนั้น บทความนี้จึงมุ่งหวังที่จะช่วยให้มือใหม่เริ่มต้นใช้งาน Fabric.js ได้อย่างรวดเร็ว โครงการและสนุกกับกระบวนการวาดภาพ Canvas
ทำไมต้องใช้ Fabric.js?Canvas มอบความสามารถด้าน Canvas ที่ดี แต่ API นั้นไม่เป็นมิตรเพียงพอ จริงๆ แล้วการวาดภาพกราฟิกแบบเรียบง่ายนั้นใช้ได้ แต่การวาดภาพกราฟิกที่ซับซ้อนและเขียนเอฟเฟกต์ที่ซับซ้อนนั้นไม่สะดวกนัก Fabric.js ได้รับการพัฒนาเพื่อจุดประสงค์นี้ โดยส่วนใหญ่จะใช้ object ในการเขียนโค้ด
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 = ผ้าใหม่ Canvas ('main');2. วาดกราฟิก
var rect = new fabric.Rect({ left:100,//ระยะห่างจากด้านซ้ายของผืนผ้าใบ มีหน่วยเป็นพิกเซล top:100,//ระยะห่างจากด้านบนของผืนผ้าใบเติม:'red',//เติมความกว้างของสี :30 ,//ความกว้างของความสูงของสี่เหลี่ยมจัตุรัส:30//ความสูงของสี่เหลี่ยมจัตุรัส});3. เพิ่มกราฟิกลงบนผืนผ้าใบ
canvas.add(ตรง);
กราฟิกกฎอื่นๆ:
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({ ซ้าย: 120, บน: 120,เติม:'red' });canvas.add(path); การดำเนินการเกี่ยวกับรูปภาพHTML แทรกรูปภาพ
<body> <canvas id=ความกว้างของผ้าใบ='800' height='800'></canvas> <img src=./2.png id=img> </body> ---------- ----------- var canvas = new fabric.Canvas('canvas');//ประกาศ canvas var imgElement = document.getElementById('img');//ประกาศรูปภาพของเรา var imgInstance = new fabric.Image(imgElement,{/ //ตั้งค่าตำแหน่งรูปภาพและลักษณะที่ปรากฏ ซ้าย:100, บน:100, กว้าง:200, สูง:100, มุม:30//ตั้งค่ามุมการหมุนตามเข็มนาฬิกาของกราฟิก}); (imgInstance) ;//เพิ่มลงบนผืนผ้าใบJavaScript แทรกรูปภาพ
var canvas = new fabric.Canvas('canvas'); fabric.Image.fromURL('./2.png', function(oImg) { oImg.scale(0.1);//รูปภาพลดลง 10 เท่าของแคนวาส เพิ่ม(oImg ); }); ปฏิสัมพันธ์ การโต้ตอบกับผืนผ้าใบ canvas.add(imgInstance);//เพิ่มลงใน canvas 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 ({ ความกว้าง: 100, สูง: 50, เติม: 'สีเขียว' }); //เลือกเหตุการณ์การฟัง console.log('เลือกสี่เหลี่ยมผืนผ้า' }); var circle = new fabric.Circle({ รัศมี: 75, เติม: 'สีน้ำเงิน' }); circle.on('selected', function() { console.log('selected a วงกลม'); }); canvas.add(rect); canvas.add(วงกลม);หมายเหตุ: เหตุการณ์การตรวจสอบที่ใช้กันทั่วไปมีดังนี้:
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', scaleY: 0.5, originX: 'center',// ปรับพิกัดแกน X ของจุดศูนย์กลาง Y: 'center'//ปรับพิกัดแกน Y ของจุดกึ่งกลาง}); var text = new fabric.Text('Hello World', {//Draw text fontSize: 30, originX: 'center', originY: 'center' }) //รวม var group = new fabric.Group([วงกลม, ข้อความ], { ซ้าย: 150, ด้านบน: 100, มุม: 10 }) canvas.add ( กลุ่ม); การทำให้เป็นอนุกรมและดีซีเรียลไลซ์การทำให้เป็นอนุกรม
var canvas = new fabric.Canvas('canvas'); var rect = new fabric.Rect ({ ความกว้าง: 100, สูง: 100, เติม: 'สีแดง' }); canvas.add (rect); .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 ({ กว้าง: 100, สูง: 100, เติม: 'สีแดง' }); ;เอกสารอ้างอิง: http://fabricjs.com/articles/
ข้างต้นคือเนื้อหาทั้งหมดของบทความนี้ ฉันหวังว่ามันจะเป็นประโยชน์ต่อการศึกษาของทุกคน ฉันหวังว่าทุกคนจะสนับสนุน VeVb Wulin Network