🏂🏻 👰🏽 👩🏻‍🍳 [कैनवास पर ग्राफिक संपादक] सॉफ्ट ब्रश 🎬 👩🏻‍⚖️ 🙄

यदि आप कैनवास पर एक ग्राफिक संपादक बना रहे हैं, तो आप संभवतः अपने शस्त्रागार में एक नरम ब्रश रखना चाहेंगे। इसलिए, यह कार्य काफी गैर-तुच्छ है और मैं मुख्य कठिनाइयों को उजागर करने और समाधान सुझाने का प्रयास करूंगा।
(चित्र GIMP में एक नरम ब्रश कैसे काम करता है इसका एक उदाहरण दिखाता है)
पढ़ने से पहले, मेरा सुझाव है कि आप पिछले लेख को पढ़ें।

सबसे पहले, आपको अपने संपादक के दर्शकों और उद्देश्य को समझना चाहिए। इससे आपको प्राथमिकताएँ निर्धारित करने में मदद मिलेगी, जिनमें से दो को इस समस्या के लिए पहचाना जा सकता है:

काम की गति
काम की गुणवत्ता

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

यहाँ एक उदाहरण कार्यान्वयन है:

<!DOCTYPE html> <html> <head> <title></title> <meta http-equiv= "Content-Type" content= "text/html; charset=UTF-8" > <style type= "text/css" > body { margin: 0; } #cnvs { outline: #000000 1px solid; } </style> <script type= "text/javascript" > var action = "up" ; //: , , , , var canvas,ctx,offset,points,bufer; // function initcnvs(){ canvas = document .getElementById( 'cnvs' ); ctx = canvas.getContext( '2d' ); ctx.lineWidth = 10; // ( ) offset = 1000; // ctx.shadowBlur = 10; ctx.shadowColor = "#000000" ; ctx.shadowOffsetX = -offset; points = new Array(); // bufer = ctx.getImageData(0,0,canvas.width,canvas.height); }; // function mDown(e){ action = "down" ; points.push([e.pageX,e.pageY]); }; // - function mUp(e){ action = "up" ; points = new Array(); bufer = ctx.getImageData(0,0,canvas.width,canvas.height); }; // - function mMove(e){ if (action == "down" ) { ctx.putImageData(bufer,0,0); points.push([e.pageX,e.pageY]); ctx.beginPath(); ctx.moveTo(points[0][0]+offset, points[0][1]); for (i = 1; i < points.length; i++){ ctx.lineTo(points[i][0]+offset,points[i][1]); } ctx.stroke(); } }; </script> </head> <body onload= "initcnvs()" onmousedown= "mDown(event)" onmousemove= "mMove(event)" onmouseup= "mUp(event)" > <canvas id= "cnvs" width= "800" height= "500" ></canvas> </body> </html> * This source code was highlighted with Source Code Highlighter .

ctx.shadowBlur - छाया को धुंधला करने के लिए जिम्मेदार, ctx.shadowColor - रंग, ctx.shadowOffsetX - X अक्ष पर ऑफसेट।
ऑफसेट चर एक सुरक्षित ऑफसेट संग्रहीत करता है ताकि स्रोत रेखा कैनवास पर न गिर सके। कैनवास रेखापुंज को बफ़र चर में सहेजा गया है। क्यों? यहाँ एल्गोरिथ्म का मुख्य माइनस पाया जाता है। प्रत्येक नए बिंदु को पंक्ति में (और क्रमशः छाया में) जोड़ने के बाद, हमें पूरी रेखा को फिर से फिर से बनाना होगा। यदि आप ऐसा नहीं करते हैं, लेकिन दो आसन्न बिंदुओं को जोड़ने वाले खंडों की एक पंक्ति बनाते हैं, तो इसकी असंगतता ध्यान देने योग्य होगी। (एक अपारदर्शी ब्रश के मामले में, यह विधि काम करेगी)।

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

बेशक, अभी भी विकल्प हैं। तो, चलिए बताते हैं, सबसे आसान नहीं।

इस आंकड़े में, मैंने नोट किया कि रेखा के किन टुकड़ों को व्यक्तिगत रूप से खींचना होगा। अर्धवृत्त को अपारदर्शी से पारदर्शी तक एक रेडियल ढाल के साथ भरना होगा। अन्य टुकड़े - रैखिक ढाल।

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

जब आप बटन दबाए रखते हैं, तो आपको स्टार्ट पॉइंट याद रखना चाहिए
एक रेडियल ढाल के साथ अर्धवृत्त खींचना आवश्यक है जब दूसरा बिंदु ज्ञात हो (इस बिंदु की ओर इसे घुमाने के लिए)
तब ट्रेपेज़ोइड्स को रेखाखंडों के बीच के कोणों को ध्यान में रखते हुए तैयार किया जाता है
ट्रेपेज़ोइड एक ढाल से भरे हुए हैं: पारदर्शी - अपारदर्शी - एक आधार से दूसरे में पारदर्शी
जब रिलीज हो रही है - आपको अंतिम अर्धवृत्त खींचना होगा

अभी भी इसे लागू करने के लिए एक काफी सरल तरीका है - स्प्राइट्स ।

यही सब मैं आज के बारे में बात करना चाहता था। टिप्पणियों में मैं आपके सभी सवालों का जवाब दूंगा।

पुनश्च: सीमा के बजाय रूपरेखा का उपयोग करने के सुझाव के लिए धारावाहिक के लिए धन्यवाद। इससे निर्देशांक में त्रुटि समाप्त हो गई।
उपयोगी टिप्पणियों के एक जोड़े के लिए धन्यवाद।

श्रृंखला के पिछले लेख:
स्केच ब्रश

[कैनवास पर ग्राफिक संपादक] सॉफ्ट ब्रश

More articles: