सीएसएस पेंट एपीआई

सामग्री के लेखक के अनुसार, जिसका अनुवाद आज हम प्रकाशित कर रहे हैं, सीएसएस पेंट एपीआई एक अविश्वसनीय रूप से दिलचस्प तकनीक है। इसके अलावा, हम न केवल इसकी वर्तमान क्षमताओं के बारे में बात कर रहे हैं, बल्कि इसे प्रस्तुत की गई घटनाओं के बारे में भी, और यह कि इसकी उपस्थिति सीएसएस दुनिया में बहुत ही उल्लेखनीय परिवर्तनों की शुरुआत को चिह्नित करती है। यहां हम CSS पेंट एपीआई और इसके स्वरूप के कारणों के बारे में बात करेंगे, और इसका उपयोग कैसे करें, इसके बारे में बात करेंगे।

CSS Paint API क्या है?

विचाराधीन एपीआई विनिर्देशों के नए सेट का सिर्फ एक छोटा सा हिस्सा है जिसे सीएसएस हुडिनी परियोजना के हिस्से के रूप में विकसित किया जा रहा है। इस परियोजना का संक्षेप में वर्णन करते हुए, इसका सार इस तथ्य से उबलता है कि यह डेवलपर्स को आंतरिक सीएसएस तंत्रों में निम्न-स्तरीय पहुंच प्रदान करता है।

सीएसएस पेंट एपीआई आपको उन स्थितियों में paint() फ़ंक्शन को कॉल करने की अनुमति देता है जहां, सामान्य परिस्थितियों में, काम किया जाएगा, उदाहरण के लिए, एक निश्चित मूल्य के साथ जो किसी प्रकार की छवि का वर्णन करता है। इसका एक सामान्य उदाहरण background-image संपत्ति है, जिसके साथ काम करते समय आप सिस्टम url() छवि फ़ाइल का लिंक पास करने के लिए url() फ़ंक्शन का उपयोग कर सकते हैं:

 area { background-image: url('assets/myimage.jpg'); } 

सीएसएस पेंट एपीआई आपको एक समान फ़ंक्शन, paint() फ़ंक्शन के बजाय कॉल करने की अनुमति देता है, और इसे जावास्क्रिप्ट द्वारा वर्णित तथाकथित वर्कलेट पास करता है। एक वोर्क्लेट को कोड के एक टुकड़े के रूप में माना जा सकता है जो एक डेवलपर को प्रोग्रामेटिक रूप से लगभग किसी भी चीज़ को आकर्षित करने की अनुमति देता है। और, चूंकि हम जावास्क्रिप्ट के बारे में बात कर रहे हैं, इसलिए छवि को गतिशील बनाया जा सकता है। अपने आप में, यह एपीआई HTML5 कैनवस एपीआई के समान है, और अब हम इस बारे में बात करेंगे कि यह कैसे काम करता है।

सीएसएस पेंट एपीआई सुविधाएँ

यदि अब आपको लगता है कि यह सब अच्छा लगता है, लेकिन यह जटिल लगता है, और आपको लगता है कि आप साधारण चित्रों का उपयोग करके काफी सहज हैं, तो ध्यान रखें कि सामान्य छवियां नई तकनीक के आगमन के साथ अपनी प्रासंगिकता नहीं खोती हैं। उनका उपयोग करना, जैसे उन्होंने हमेशा किया, बिल्कुल सामान्य है। तथ्य यह है कि क्षितिज पर कुछ नया दिखाई दिया है, और शायद आशाजनक है, इसका मतलब यह नहीं है कि हर किसी को तुरंत अपनी मौजूदा समस्याओं को हल करने के लिए इस नए का उपयोग करने की आवश्यकता है। हालाँकि, साधारण चित्र स्थिर होते हैं। नया एपीआई गतिशील चित्र बनाने के विचार से आकर्षित होता है।

आइए CSS फ़ंक्शन रैखिक-ढाल के बारे में सोचते हैं। बात बहुत शक्तिशाली है। उदाहरण के लिए इस पर एक नज़र डालें। लेकिन क्या आप कल्पना कर सकते हैं कि ओवरलैपिंग लेयर्स द्वारा गठित समान प्रभाव को प्राप्त करना कितना आसान होगा यदि आपको बहुत सारे बैकग्राउंड इमेज का उपयोग नहीं करना पड़ेगा? हालाँकि, यह एकमात्र बिंदु नहीं है। यदि आप सीएसएस पेंट एपीआई में तल्लीन हैं, तो आप समझ सकते हैं कि प्रोग्राम निष्पादन के दौरान ऐसी छवियां कैसे बनाई जाती हैं, और यह बहुत उपयोगी हो सकता है (वास्तव में, यह वही है जो हम यहां करने की योजना बना रहे हैं)।

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

ध्यान रखें कि यह सब CSS Houdini के रूप में ज्ञात सुविधाओं के एक बड़े समूह का हिस्सा है। यहां प्रोजेक्ट डॉक्यूमेंटेशन के बारे में कहा गया है: "CSS-TAG Houdini टास्क फोर्स (CSS Houdini) का लक्ष्य संयुक्त रूप से ऐसे तंत्र विकसित करना है जो वेब पेजों को स्टाइल करने और उनके लेआउट बनाने की तकनीक से रहस्य को तोड़ते हैं।"

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

नई तकनीकों के मानकीकरण की प्रक्रिया में कुछ समय लग सकता है। सबसे पहले, एक नई सीएसएस सुविधा के लिए एक सुझाव दिया गया है। अगला - एक विनिर्देश लिखा जाता है, अन्य प्रक्रियाएं होती हैं। नतीजतन, ब्राउज़र निर्माता नए विनिर्देशों को लागू कर रहे हैं। और, चूंकि डेवलपर्स अक्सर जल्द से जल्द नई सुविधाओं का उपयोग शुरू करने के लिए इंतजार नहीं कर सकते हैं, उन्हें इस तथ्य को ध्यान में रखना होगा कि पुराने ब्राउज़र नवाचारों का समर्थन नहीं कर सकते हैं, और अगर कुछ विनिर्देश अभी तक पूरी तरह से लागू नहीं हुए हैं, तो इसके पाठ्यक्रम में हो सकता है विकास, गंभीरता से परिवर्तन। शायद विभिन्न ब्राउज़रों में विभिन्न तकनीकों के कार्यान्वयन की विशिष्ट बारीकियों के बारे में बात करने के लिए कुछ भी नहीं है। हुडीनी परियोजना इन समस्याओं को कम करने में काफी दूर जा सकती है, जिससे हम अपने दम पर ब्राउज़र कार्यक्षमता विकसित कर सकते हैं, इसका उपयोग कर सकते हैं और कुछ विशेषताओं को लागू करने के लिए ब्राउज़र निर्माताओं की प्रतीक्षा कर सकते हैं। इस विषय पर कुछ सामग्री यहां दी गई है। पहला हुडिनी की शक्तियों के लिए समर्पित है, और दूसरा इस परियोजना की क्षमताओं का उपयोग जटिल एनिमेशन बनाने के लिए है।

ब्राउज़रों द्वारा सीएसएस पेंट एपीआई के लिए समर्थन

क्या मैं आज सीएसएस पेंट एपीआई का उपयोग कर सकता हूं? हम इस प्रश्न का सकारात्मक उत्तर दे सकते हैं, हालांकि यह ध्यान दिया जाना चाहिए कि सभी ब्राउज़र इस तकनीक का समर्थन करते हैं। इस API के लिए समर्थन जानकारी प्राप्त करने के लिए, आप caniuse.com संसाधन का उपयोग कर सकते हैं।


विभिन्न ब्राउज़रों द्वारा सीएसएस पेंट एपीआई के लिए समर्थन (जुलाई 2018)

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

चरण # 1: सीएसएस

याद रखें कि सीएसएस पेंट एपीआई का उपयोग करके एक छवि बनाने के लिए, विजेट जेएस कोड के टुकड़े हैं। इसलिए, शुरुआत के लिए, हमें वर्कलेट को एक नाम देना होगा और इसे सीएसएस में कॉल करना होगा। awesomePattern इसे awesomePattern कहते हैं। परिणामस्वरूप, सीएसएस इस तरह दिखेगा:

 section { background-image: url('fallback.png'); background-image: paint(awesomePattern); }; 

प्रारंभिक तैयारियां पूरी हो चुकी हैं, लेकिन जब तक हमारा बाकी उदाहरण तैयार नहीं हो जाता, तब तक यह सब काम नहीं करेगा।

चरण # 2: जावास्क्रिप्ट

अब हमें जेएस का उपयोग करके कार्यस्थल का वर्णन करने की आवश्यकता है। यहाँ यह दिखाया गया है कि कैसे, मुख्य स्क्रिप्ट में, एक और स्क्रिप्ट लोड की जाती है जो हमारे द्वारा आवश्यक कार्यक्षमता को लागू करती है।

 CSS.paintWorklet.addModule('patternWorklet.js'); 

इस स्तर पर, फिर से, कुछ भी नहीं होता है, क्योंकि patternWorklet.js फ़ाइल में सबसे दिलचस्प छिपा हुआ है।

patternWorklet.js फ़ाइल में patternWorklet.js हमें patternWorklet.js के वर्ग को पंजीकृत करने की आवश्यकता है:

 registerPaint('awesomePattern', Shape); 

यहां हम registerPaint() फ़ंक्शन को कॉल करते हैं और इसे पास करते हैं जो हम कार्यस्थल के रूप में सोचते हैं, इस मामले में awesomePattern । इसके अलावा, हम इस फ़ंक्शन को उस वर्ग के लिए एक लिंक देते हैं, जिसे हम इस मामले में, Shape में लिखेंगे। इस आदेश को संबंधित वर्ग की घोषणा के बाद जोड़ा जाना चाहिए। कक्षाओं की घोषणा और उपयोग करते समय, आप फ़ंक्शन घोषणाओं को बढ़ाने के लिए एक तंत्र की तरह कुछ पर भरोसा नहीं कर सकते। इससे पहले कि आप एक वर्ग का उपयोग कर सकें, आपको इसे घोषित करना होगा।

अगला, हम ECMAScript 2015 कक्षाओं की घोषणा के लिए वाक्यविन्यास का उपयोग करने जा रहे हैं और एक वर्ग लिखेंगे जो पृष्ठभूमि छवि को आकर्षित करेगा। चूंकि यह वर्ग अब श्रमिक वर्ग के रूप में पंजीकृत है, इसलिए हम इसमें कुछ विशेष तंत्रों का उपयोग कर सकते हैं जो इसमें स्वतः उपलब्ध होंगे।

 class Shape { paint(ctx, geom, properties) {   ctx.strokeStyle = 'white';   ctx.lineWidth = 4;   ctx.beginPath();   ctx.arc( 200, 200, 50, 0, 2*Math.PI);   ctx.stroke();   ctx.closePath(); } } 

paint() कॉलबैक में ctx , geom और properties पैरामीटर हैं। ctx पैरामीटर 2D प्रतिपादन संदर्भ के समान है जिसे <canvas> से प्राप्त किया जा सकता <canvas> । खैर, यह लगभग समान है। तथ्य यह है कि <canvas> आपको पिक्सेल डेटा पढ़ने की अनुमति देता है, लेकिन सीएसएस पेंट एपीआई इसकी अनुमति नहीं देता है। मतभेदों के बावजूद, ctx का उपयोग करके, हम उसी ग्राफिक आउटपुट विधियों का उपयोग कर सकते हैं जो <canvas> साथ काम करते समय उपयोग किए जाते हैं। इस उदाहरण में, arc() फ़ंक्शन का उपयोग करके, हम एक सर्कल बनाते हैं।

arc() फ़ंक्शन के लिए दिए गए पहले दो मान तत्व के ऊपरी बाएँ कोने में स्थित मूल के सापेक्ष, पिक्सेल में, सर्कल के केंद्र के एक्स और वाई निर्देशांक हैं। हालांकि, मैं चाहता हूं कि सर्कल तत्व के केंद्र में हो। इस समस्या को हल करने के लिए, geom पैरामीटर हमारे लिए उपयोगी है। यह PaintSize ऑब्जेक्ट तक पहुंच देता है, जो छवि सेटिंग्स का विवरण है। विशेष रूप से, इसका जिक्र करते हुए, हम width और height मापदंडों को पढ़ सकते हैं, और यही वह है जो हमें सर्कल को केंद्र में रखने के लिए आवश्यक है।

परिणामस्वरूप, हम इस कोड पर आते हैं:

 class Shape { paint(ctx, geom, properties) {     let x = geom.width/2;   let y = geom.height/2;   ctx.strokeStyle = 'white';   ctx.lineWidth = 4;   ctx.beginPath();   ctx.arc(x, y, 50, 0, 2*Math.PI);   ctx.stroke();   ctx.closePath();   } } registerPaint('awesomePattern', Shape); 

आप CodePen पर उदाहरण का कार्यशील संस्करण देख सकते हैं। सख्ती से, यह वही है जो यह कोड आउटपुट करता है।


सीएसएस पेंट एपीआई के साथ बनाया गया सर्कल

यह सब अच्छा है, लेकिन हमारा उदाहरण बहुत सरल है। आइए, सामान्य सर्कल के बजाय, कुछ और दिलचस्प बनाएं। उदाहरण के लिए - ऐसे तारांकन - css-tricks.com वेबसाइट लोगो।


Asterisk CSS Paint API के साथ बनाया गया है

यहां एक कोडपैन प्रोजेक्ट है जो आपको ऐसा करने की अनुमति देता है।

जब आप इस परियोजना के लिए जेएस कोड को देखते हैं, तो drawStar() विधि और कई कार्यों पर ध्यान दें जो <canvas> साथ काम करते समय उपयोग किए जाते हैं।

चरण # 3: कस्टम सीएसएस गुण

नई तकनीक का उपयोग करते हुए, हम ड्राइंग सर्कल और सितारों की तुलना में बहुत आगे जा सकते हैं। हम कस्टम सीएसएस संपत्तियों (चर) की शक्तिशाली विशेषताओं को देख सकते हैं। वे, वैसे, खुद से भी, बहुत दिलचस्प हैं। हमारे मामले में, वे विशेष रूप से उपयोगी हैं।

मान लीजिए कि हम पहले से बने लोगो के आकार या रंग को बदलने में सक्षम होना चाहते हैं। इन मापदंडों को कस्टम गुणों के रूप में सीएसएस कोड में रखा जा सकता है, और फिर प्रोग्राम में तीसरे पैरामीटर के माध्यम से paint() कॉलबैक में पारित किया जा सकता है। यह properties पैरामीटर के बारे में है।

हम अपने सीएसएस-कोड में --star-scale संपत्ति जोड़ते हैं, जिसका उद्देश्य छवि आकार को नियंत्रित करना है, और --star-color संपत्ति, जिसका उपयोग सीधे CSS में लोगो रंग परिवर्तन को व्यवस्थित करने के लिए किया जाता है। यहाँ हमें क्या मिला है:

 section { --star-scale: 2; --star-color: hsla(200, 50%, 50%, 1); background-image: paint(awesomePattern) }; 

अब वापस वर्कक्लॉथ की क्लास में। यहां हमें ऊपर वर्णित उपयोगकर्ता गुणों के साथ बातचीत करने की आवश्यकता है। यह inputProperties विधि का उपयोग करके किया जाता है, जो हमें सभी CSS गुणों और उनके असाइन किए गए मानों तक पहुंच प्रदान करता है।

 static get inputProperties() { return ['--star-scale','--star-color']; } 

अब आप paint() विधि में उनके साथ काम कर सकते हैं:

 const size = parseInt(properties.get('--shape-size').toString()); 

स्वाभाविक रूप से, प्राप्त मूल्यों का उपयोग छवि निर्माण के लिए जिम्मेदार कोड में किया जा सकता है। यह इस तथ्य की ओर जाता है कि अगर हम सीएसएस कोड में, --star-scale या --start-color के मूल्य को --star-scale --start-color , तो यह तुरंत प्रभावित करेगा कि छवि --start-color ।


समाप्त छवि पर कस्टम सीएसएस गुणों का प्रभाव

यह कार्यक्षमता उसी कोडपैन परियोजना में कार्यान्वित की जाती है जिसका हमने ऊपर उल्लेख किया था।

वैसे, यह ध्यान देने योग्य है कि नए एपीआई का उपयोग करते समय, तत्वों की पृष्ठभूमि सेट करने से संबंधित सभी सामान्य सीएसएस गुण, जैसे कि background-size और background-repeat , पहले की तरह ही काम करेंगे। उन्होंने प्रासंगिकता नहीं खोई है।

परिणाम

CSS Paint API एक बहुत ही शक्तिशाली तकनीक है जिसकी क्षमता पृष्ठभूमि चित्र बनाने तक सीमित नहीं है।

कल्पना करें कि तत्व में एक विशेष सीमा होनी चाहिए, उदाहरण के लिए, एक जो पूरी तरह से दिखाई नहीं दे रही है, या दोहरी है। शायद इस तरह के प्रभावों को प्राप्त करने के लिए, आप आमतौर पर छद्म तत्वों का उपयोग करते हैं ::before या ::after या शायद एक विशेष रूप से कॉन्फ़िगर किया गया box-shadow । सीएसएस पेंट एपीआई और border-image संपत्ति का उपयोग करके सीमाएं (और भी बहुत कुछ) लागू की जा सकती हैं।

CSS Paint API एक साथ कई शानदार फीचर लाता है, जैसे विगेट्स, ECMAScript 2015 क्लासेस और <canvas> की विशेषताएं। इसके अलावा, यह डेवलपर को जावास्क्रिप्ट-आधारित छवि प्रबंधन सॉफ्टवेयर प्रदान करता है। उदाहरण के लिए, ईवेंट तंत्र का उपयोग करके, आप कस्टम गुणों के अद्यतन को व्यवस्थित कर सकते हैं, जिसका अर्थ है कि छवि, उदाहरण के लिए, यहाँ किया गया है , जहाँ click इवेंट requestAnimationFrame में गुणों को अद्यतन करने की प्रक्रिया शुरू करती है, जो आपको उपयोगकर्ता के बटन पर क्लिक करने पर हर बार एनीमेशन बनाने की अनुमति देता है। इसके अलावा, जब आप क्लिक करते हैं, तब भी माउस कर्सर के निर्देशांक।

पहली नज़र में, यह सब थोड़ा भ्रामक लग सकता है, लेकिन आइए हम हौदिनी परियोजना के कुछ अन्य हिस्सों पर एक नज़र डालते हैं जिनसे हम मिल सकते हैं:

• CSS लेआउट API डेवलपर को display: layout('myCustomLayout') जैसे कुछ करने की अनुमति देता है display: layout('myCustomLayout') । एक विशिष्ट उदाहरण आपके स्वयं के चिनाई-शैली के लेआउट का निर्माण है, लेकिन इस सुविधा के उपयोग की सीमा बहुत व्यापक है।
• CSS गुण और मान API आपको कस्टम गुण प्रकार सेट करने की अनुमति देता है।
• CSS एनिमेशन वर्कलेट एपीआई मुख्य स्ट्रीम से परे एनिमेशन प्रोसेसिंग ऑपरेशंस को आगे बढ़ाता है , जिसे पूरी तरह से चिकनी एनिमेशन में अनुवाद करना चाहिए।

नतीजतन, हम कह सकते हैं कि, सचमुच हमारी आंखों के सामने, प्रौद्योगिकियों का उदय है जो वेब डेवलपर्स के लिए कई नए अवसरों को खोलते हैं। ब्राउज़रों में उनके मानकीकरण और कार्यान्वयन की प्रक्रिया इतनी तेज़ नहीं है, लेकिन वे, संभवतः, वेब पृष्ठों की स्टाइलिंग से संबंधित हर चीज पर जबरदस्त प्रभाव डालेंगे।

प्रिय पाठकों! सीएसएस पेंट एपीआई एप्लीकेशन के कौन से क्षेत्र आपको सबसे दिलचस्प लगते हैं?