fabricjs ट्यूटोरियल
फैब्रिक्स के साथ शुरुआत करना
खोज…
टिप्पणियों
fabric.js HTML5 कैनवास के लिए एक शक्तिशाली और काफी सरल जावास्क्रिप्ट लाइब्रेरी है। यह HTML5 कैनवास के साथ काम करने के लिए एक इंटरैक्टिव प्लेटफॉर्म प्रदान करता है। कपड़े का उपयोग करके आप साधारण ज्यामितीय आकृतियों से लेकर जटिल आकृतियों तक कैनवास पर वस्तु / आकार बना सकते हैं। तुम भी fabric.js का उपयोग कर छवियों के साथ काम कर सकते हैं। fabric.js भी एनिमेशन का समर्थन करता है। यह उन्हें खींचने वाली छवियों के साथ काम करने के लिए नियंत्रण प्रदान करता है, उन्हें घुमाते हुए स्केलिंग करता है। यह आकृतियों / वस्तुओं के समूहन की अनुमति देता है जिन्हें एक साथ जोड़ दिया जा सकता है। यह केवल कैनवास तत्व तक ही सीमित नहीं है बल्कि वस्तुओं के साथ भी घटनाओं का समर्थन करता है। यह भी SVG या JSON में कैनवास को क्रमबद्ध करने के लिए फ़ंक्शनलैसिटी प्रदान करता है और आवश्यकतानुसार और इसका पुनः उपयोग करता है। यह भी Node.js के तहत कपड़े चलाने का समर्थन करता है, jsdom और नोड-कैनवास पुस्तकालयों की मदद से।
स्थापना या सेटअप
फैब्रिक.जेएस किसी अन्य जेएस लाइब्रेरी की तरह ही है जो कैनवास के लिए विशिष्ट है। सेटअप करना आसान है और आरंभ करें। आपको बस यहां से fabric.js डाउनलोड करना है और इसे अपनी परियोजना में उसी तरह शामिल करना है जैसे किसी अन्य JS लाइब्रेरी को उदाहरण के लिए जिस तरह से आप jQuery के लिए करते हैं। फिर html file suppose index.html बनाएं जैसे:
<head>
<script src="fabric.js"></script>
</head>
<body>
<canvas id="canvas" width="400" height="400" style="border:2px solid #000000</canvas>
<script>
var canvas = new fabric.Canvas('canvas');
canvas.add(new fabric.Circle({ radius: 30, fill: '#f55', top: 100, left: 100 }));
</script>
</body>
स्क्रिप्ट में src विशेषता एक फ़ाइल फैब्रिक का जिक्र कर रही है। उसी फ़ोल्डर में रखे गए जो आप इसे किसी अन्य फ़ोल्डर में रख सकते हैं और एक सापेक्ष पथ दे सकते हैं। और आप जाने के लिए अच्छे हैं। फैब्रिक के बारे में अधिक जानकारी के लिए ऑफिशियल पेज पर जाएं। यहां एक बहुत ही बुनियादी डेमो है
नमस्ते दुनिया
<canvas id="c" width="400" height="400"></canvas>
var canvas = new fabric.Canvas("c");
var text = new fabric.Textbox('Hello world From Fabric JS', {
width:250,
cursorColor :"blue",
top:10,
left:10
});
canvas.add(text)
उदाहरण 'Hello world From Fabric JS' उपयोग करके एक पाठ 'Hello world From Fabric JS' बनाता है। डेमो