फैब्रिक.जेएस में कस्टम टेक्स्टबॉक्स कैसे बनाएं: स्ट्रोक्ड, राउंडेड और पैडेड

Fabric.js एक उल्लेखनीय जावास्क्रिप्ट लाइब्रेरी है जो HTML5 कैनवास तत्वों के उपयोग को सुव्यवस्थित करती है, डेवलपर्स को सहजता से आकर्षक वेब एप्लिकेशन बनाने के लिए सशक्त बनाती है। ढेर सारी खूबियों और टूल्स से लैस यह यूजर्स को इंटरएक्टिव और विजुअली स्टनिंग इंटरफेस डिजाइन करने में सक्षम बनाता है।

Fabric.js का एक उल्लेखनीय लाभ कस्टम वर्ग उत्पन्न करने की इसकी क्षमता में निहित है, जिससे डेवलपर्स अपनी क्षमताओं को बढ़ा सकते हैं और अपनी अनूठी आवश्यकताओं को पूरा करने के लिए इसे अनुकूलित कर सकते हैं।

यह ब्लॉग फैब्रिक.जेएस में एक व्यक्तिगत वर्ग को डिजाइन करने और उपयोग करने की प्रक्रिया में तल्लीन करेगा। हमारा ध्यान गोलाकार कोनों और पैडिंग के साथ एक स्ट्रोक टेक्स्टबॉक्स विकसित करने पर होगा। इसके अतिरिक्त, हम विभिन्न परिदृश्यों को पूरा करने के लिए इस वर्ग की अनुकूलता का पता लगाएंगे। इस ब्लॉग को पूरा करने पर, आपके पास Fabric.js में कस्टम क्लासेस बनाने और अपने कैनवास अनुप्रयोगों को उन्नत करने के लिए उनका उपयोग करने की व्यापक समझ होगी।

स्ट्रोक्ड टेक्स्टबॉक्स क्लास बनाना

स्ट्रोक्ड टेक्स्टबॉक्स क्लास फैब्रिक.जेएस में डिफ़ॉल्ट टेक्स्टबॉक्स क्लास का विस्तार है, जो स्ट्रोक चौड़ाई, स्ट्रोक रंग, पैडिंग और गोल कोनों जैसी विभिन्न अतिरिक्त सुविधाओं को पेश करता है।

आइए इस वर्ग के भीतर कोड की प्रत्येक पंक्ति का विश्लेषण करें:

• टाइप करें: "टेक्स्टबॉक्स": यह लाइन बनाई जा रही वस्तु के प्रकार को निर्दिष्ट करती है।

• स्ट्रोकविड्थ: 5: यह रेखा स्ट्रोक की चौड़ाई को 5 पिक्सेल पर सेट करती है।

• स्ट्रोक रंग: "#ffb64f": यह रेखा स्ट्रोक के रंग को #ffb64f के रूप में निर्धारित करती है।

• splitByGrapheme: सच: यह पंक्ति इंगित करती है कि टेक्स्टबॉक्स को ग्रैफेम के आधार पर विभाजित किया जाना चाहिए।

• rx: 0: यह रेखा x-अक्ष पर गोलाई की डिग्री को नियंत्रित करते हुए, rx को 0 का मान प्रदान करती है।

• ry: 0: यह रेखा y-अक्ष पर गोलाई की डिग्री को नियंत्रित करने के लिए 0 का मान निर्दिष्ट करती है।

• toObject: यह फ़ंक्शन टेक्स्टबॉक्स क्लास के सभी गुणों के साथ स्ट्रोक्ड टेक्स्टबॉक्स क्लास द्वारा पेश की गई नई संपत्तियों के साथ एक ऑब्जेक्ट देता है।

• _रेंडरबैकग्राउंड: _रेंडरबैकग्राउंड: यह फ़ंक्शन टेक्स्टबॉक्स की पृष्ठभूमि की रेंडरिंग प्रक्रिया की देखरेख करता है, जिसमें पैडिंग, गोलाकार कोने और स्ट्रोक शामिल हैं।

  
  

 fabric.TextboxWithPadding = fabric.util.createClass(fabric.Textbox, { type: "textbox", strokeWidth: 5, // Specifies the width of the stroke strokeColor: "#ffb64f", // Sets the color of the stroke splitByGrapheme: true, rx: 0, // Determines the rx value for rounded corners on the x-axis ry: 0, // Determines the ry value for rounded corners on the y-axis toObject: function() { return fabric.util.object.extend(this.callSuper("toObject"), { backgroundColor: this.get("backgroundColor"), padding: this.get("padding"), splitByGrapheme: this.get("splitByGrapheme"), rx: this.get("rx"), ry: this.get("ry") }); }, _renderBackground: function(ctx) { if (!this.backgroundColor) { return; } var dim = this._getNonTransformedDimensions(); ctx.fillStyle = this.backgroundColor; ctx.fillRect( -dim.x / 2 - this.padding, -dim.y / 2 - this.padding, dim.x + this.padding * 2, dim.y + this.padding * 2 ); // Stroke only at the top ctx.strokeStyle = this.strokeColor; ctx.lineWidth = this.strokeWidth; ctx.beginPath(); ctx.moveTo(-dim.x / 2 - this.padding, -dim.y / 2 - this.padding); ctx.lineTo(-dim.x / 2 - this.padding, dim.y / 2 + this.padding); ctx.stroke(); ctx.beginPath(); ctx.strokeStyle = this.strokeColor; ctx.lineWidth = 0.2; // Set line width to 1 ctx.lineTo(dim.x / 2 + this.padding, -dim.y / 2 - this.padding + 1); ctx.lineTo(dim.x / 2 + this.padding, dim.y / 2 + this.padding - 1); ctx.strokeStyle = "#9181fc"; ctx.lineWidth = 0.2; // Set line width to 1 ctx.lineTo(dim.x / 2 + this.padding - 1, dim.y / 2 + this.padding); ctx.lineTo(-dim.x / 2 - this.padding + 1, dim.y / 2 + this.padding); ctx.strokeStyle = "#9181fc"; ctx.lineWidth = 0.2; // Set line width to 1 ctx.lineTo(-dim.x / 2 - this.padding, dim.y / 2 + this.padding - 1); ctx.lineTo(-dim.x / 2 - this.padding, -dim.y / 2 - this.padding + 1); ctx.closePath(); ctx.stroke(); // If there is a background color, no other shadows should be casted this._removeShadow(ctx); } });

कोडबेस

https://github.com/dinesh-rawat-dev/Prodeasy-section-component

डेमो

https://y5k9l8.csb.app/

वर्ग का उपयोग करने के लाभ

स्ट्रोक्ड टेक्स्टबॉक्स वर्ग के उपयोग के साथ, हम विशिष्ट दृश्य विशेषताओं के साथ वैयक्तिकृत टेक्स्टबॉक्स उत्पन्न करने की क्षमता प्राप्त करते हैं जो डिफ़ॉल्ट टेक्स्टबॉक्स वर्ग की क्षमताओं को पार करते हैं। यह हमें ऐसे कैनवस एप्लिकेशन तैयार करने में सक्षम बनाता है जिनमें बेहतर विज़ुअल अपील होती है और दर्शकों को अपनी विशिष्टता से आकर्षित करते हैं, उन्हें इस क्षेत्र में दूसरों से अलग करते हैं।

स्ट्रोक्ड टेक्स्टबॉक्स क्लास का उपयोग करना

स्ट्रोक्ड टेक्स्टबॉक्स वर्ग का उपयोग करने के लिए, हम आसानी से वर्ग का एक नया उदाहरण उत्पन्न कर सकते हैं और आवश्यक पैरामीटर प्रदान कर सकते हैं। नीचे एक उदाहरण है जो कक्षा के उपयोग को प्रदर्शित करता है, पैडिंग, गोल कोनों और विभिन्न स्ट्रोक रंगों और चौड़ाई वाले टेक्स्टबॉक्स के निर्माण को प्रदर्शित करता है:

 const textbox = new fabric.TextboxWithPadding('Inpur field', { fontFamily: "Roboto", // fontSize: 20, padding: 5, width: 100, textAlign: 'left', //@ts-ignore // left: rect.left + 20, //@ts-ignore // top: rect.top + 10, selectable: true, evented: true, editable: true, //@ts-ignore placeholder: "", splitByGrapheme: true, // lockScalingX: true, // lockScalingY: true, lockMovementX: true, lockMovementY: true, fill: '#000000', fontSize: 10, // stroke: OBJECT_BORDER_COLOR, strokeWidth: 1, backgroundColor: "#d5d1eb", //@ts-ignore left: 30, //@ts-ignore top: 30, className: "text_box_with_padding", includeDefaultValues: true, intersectsWithFrame: true, hasControls: false, hasBorders: true, });

इस विशेष उदाहरण में, हमने fontFamily , padding , width , textAlign , selectable , evented , editable , splitByGrapheme , fill , fontSize , strokeWidth , backgroundColor , hasControls , और hasBorders जैसे गुणों को कॉन्फ़िगर करके टेक्स्टबॉक्स की उपस्थिति और व्यवहार को अनुकूलित किया है।

स्ट्रोक्ड टेक्स्टबॉक्स क्लास को अनुकूलित करना

स्ट्रोक्ड टेक्स्टबॉक्स क्लास को और अधिक अनुकूलित करने के लिए, आप दो तरीके अपना सकते हैं। सबसे पहले, आपके पास सीधे वर्ग के भीतर ही पैरामीटर मानों को संशोधित करने की क्षमता है।

वैकल्पिक रूप से, आप एक नया उपवर्ग बना सकते हैं जो स्ट्रोक्ड टेक्स्टबॉक्स वर्ग का विस्तार करता है और अतिरिक्त कार्यक्षमता का परिचय देता है। विशिष्ट आवश्यकताओं के अनुरूप कक्षा को तैयार करने के तरीके के बारे में यहां कुछ सुझाव दिए गए हैं:

1. स्ट्रोक की चौड़ाई समायोजित करें: स्ट्रोक की मोटाई बदलने के लिए, स्ट्रोकविड्थ पैरामीटर को संशोधित करें। पैरामीटर को समायोजित करके, आप स्ट्रोक की मोटाई को परिभाषित कर सकते हैं: मान बढ़ाने से अधिक बोल्ड स्ट्रोक प्राप्त होगा, जबकि इसे कम करने से एक महीन स्ट्रोक बनेगा।

   उदाहरण के लिए , स्ट्रोकविड्थ को 10 पर सेट करने से 5 के डिफ़ॉल्ट मान की तुलना में मोटा स्ट्रोक वाला टेक्स्टबॉक्स बन जाएगा।

   
   

2. स्ट्रोक का रंग बदलें:

   यह पैरामीटर आपको डिज़ाइन विकल्पों में अधिक लचीलापन प्रदान करते हुए, स्ट्रोक के रंग को बदलने के लिए सशक्त बनाता है।

   आप हेक्साडेसिमल कोड या नामित रंग का उपयोग कर सकते हैं। उदाहरण के लिए, strokeColor "#ff0000" पर सेट करने से लाल स्ट्रोक उत्पन्न होगा।

   
   

3. पैडिंग को संशोधित करें: स्ट्रोक का रंग बदलने के लिए, आप स्ट्रोककोलर के मान को समायोजित कर सकते हैं। यह टेक्स्ट और टेक्स्टबॉक्स के किनारों के बीच की जगह को निर्धारित करता है। उदाहरण के लिए, पैडिंग को 10 पर सेट करने से टेक्स्ट के चारों ओर रिक्ति बढ़ जाएगी।

   
   

4. कोनों की गोलाई को समायोजित करें: पाठ बॉक्स के कोनों पर गोलाई की डिग्री बदलने के लिए, rx और ry के मानों को संशोधित करें। ये पैरामीटर क्रमशः x और y अक्षों पर गोलाई के स्तर को नियंत्रित करते हैं। उदाहरण के लिए, rx और ry दोनों को 10 पर सेट करने से अधिक स्पष्ट गोल कोनों वाला टेक्स्टबॉक्स बन जाएगा।

इसके अलावा, आपके पास एक नया सबक्लास बनाने का विकल्प है जो स्ट्रोक्ड टेक्स्टबॉक्स क्लास को बढ़ाता है और अतिरिक्त कार्यक्षमता को शामिल करता है। यह दृष्टिकोण आपको और भी अधिक अनुकूलन संभावनाएँ प्रदान करता है, जिससे आप टेक्स्टबॉक्स में नई सुविधाएँ पेश कर सकते हैं। उदाहरण के लिए, आप एक उपवर्ग बना सकते हैं जो टेक्स्टबॉक्स में एक ड्रॉप शैडो जोड़ता है या उपयोगकर्ता इनपुट के आधार पर गतिशील रूप से फ़ॉन्ट बदलता है। अनुकूलन की संभावना बहुत बड़ी है, और स्ट्रोक्ड टेक्स्टबॉक्स वर्ग निर्माण के लिए एक उत्कृष्ट नींव के रूप में कार्य करता है।