एक डिजिटल ईच एक स्केच बनाएं

Feb 8, 2026
कैसे करना है

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

01. संपत्ति प्राप्त करें

यह ट्यूटोरियल नोड.जे.एस. का उपयोग करेगा शुरू करने से पहले, जाओ फाइल्सिलो , ट्यूटोरियल के बगल में नि: शुल्क सामग्री और मुफ्त सामग्री का चयन करें - यहां आप ट्यूटोरियल के लिए आवश्यक संपत्तियों को डाउनलोड कर सकते हैं। फिर नीचे दिए गए आदेश चलाएं, जो निर्भरता स्थापित करेगा और सर्वर लॉन्च करेगा। हम एक बनाने के लिए नोड का उपयोग कर रहे हैं [2 9] स्थानीय होस्ट

, और यह हमें बाद में वेबॉकेट के लिए भी सेवा देगा। 
 एनपीएम इंस्टॉल करें
नोड सर्वर / index.js

02. ड्रा () फ़ंक्शन का उपयोग करें

में [2 9] Main.js

, [2 9] () समारोह हमारे आवेदन का केंद्र बिंदु होगा। हम दो बिंदुओं के बीच एक रेखा खींचने के लिए कैनवास का उपयोग करते हैं; मूल (x1, y1), जहां हमने आखिरी बार अपनी ड्राइंग छोड़ दी, और गंतव्य (x2, y2), नया बिंदु जिसे हम पहुंचना चाहते हैं। अब हमें किसी भी प्रकार के ड्राइंग का निरीक्षण करने के लिए इस फ़ंक्शन को ट्रिगर करने की आवश्यकता है। 
 फंक्शन ड्रा (एक्स 1, वाई 1, एक्स 2, वाई 2) {
  // संदर्भ Init () में विश्व स्तर पर सेट है
  context.beginpath ();
  context.moveto (x1, y1);
  context.lineto (x2, y2);
  context.stroke ();
}

03. कीबोर्ड घटनाओं को लागू करें

डायल लागू करने से पहले, आइए एक कीबोर्ड श्रोता जोड़ें जो हमारे ड्रा फ़ंक्शन को ट्रिगर कर सकता है। आप पहले से ही अलग के साथ प्रदान किया गया है [2 9] कीकोड

उदाहरण में, लेकिन आपको ट्रिगर करने के लिए श्रोता को थोड़ा संशोधित करने की आवश्यकता होगी [2 9] () समारोह हमने पहले परिभाषित किया था। अब अपने ब्राउज़र को रीफ्रेश करें और देखें कि आप तीर कुंजियों के साथ क्या आकर्षित कर सकते हैं। 
 Document.AddEventListener ('कीडाउन', फ़ंक्शन (ई) {
  / * कीकोड स्विच यहां जाता है * /
  ड्रा (math.floor (prev_horizontal), math.floor (prev_vertical), math.floor (क्षैतिज), math.floor (लंबवत));
  prev_vertical = लंबवत;
  prev_horizontal = क्षैतिज;
});

04. कैनवास का आकार बदलें

आपने देखा होगा कि हमारे कैनवास तत्व के पास अभी तक आकार नहीं दिया गया है। हमारे ड्राइंग बोर्ड के लिए, हम एक बड़ी जगह चाहते हैं, शायद पूरी खिड़की भी। नीचे दिया गया कोड आकार बदलने की घटना का ख्याल रखता है, लेकिन कॉल करना न भूलें [2 9] समायोजन ()

में [2 9] इस में() भी। 
 समारोह समायोजन () {
  // कैनवास विश्व स्तर पर init () में परिभाषित किया गया है
  canvas.width = window.innerwidth;
  canvas.hight = window.innerhehight;
}
window.addeventlistener ('आकार बदलें', समायोजन);

05. एक फ्रेम जोड़ें

हम चाहते हैं कि एप्लिकेशन को जितना संभव हो सके मूल खिलौने की तरह दिखना चाहिए, इसलिए हम ड्राइंग क्षेत्र के चारों ओर एक फ्रेम जोड़ना चाहते हैं। ऐसा करने के लिए, हम एक मार्जिन मूल्य को परिभाषित कर सकते हैं और सीएसएस को संशोधित कर सकते हैं [2 9] #sketch

मार्जिन: 20px ऑटो; क्षैतिज रूप से कैनवास को केंद्रित करने के लिए और डायल के लिए नीचे एक बड़ी जगह रखें। 
 var framemarinvertical = 122;
var framemarginhorizontal = 62;
समारोह समायोजन () {
  canvas.width = window.innerwidth - framemarginhorizontal;
  canvas.height = window.innerheheight - framemarginetical;
}

06. डायल बनाएं

हमने पहले ही आपको डायल के लिए सीएसएस दिया है [2 9] सार्वजनिक / सीएसएस / styles.css

, तो एक नज़र रखने के लिए स्वतंत्र महसूस करें। इसके बाद, दो जोड़ें [2 9] & lt; div & gt; के तहत टैग [2 9] & lt; कैनवास और जीटी; HTML फ़ाइल में, जैसा कि नीचे वर्णित है। एक सम्मेलन के रूप में, हम क्षैतिज ड्राइंग के लिए बाएं डायल का उपयोग करेंगे, और लंबवत के लिए सही। हम नए चर भी जोड़ रहे हैं [2 9] इस में() स्पर्श घटनाओं के लिए तैयार करने के लिए समारोह। 
 & lt; div id = "divorizontal" वर्ग = "डायल" & gt; & lt; / div & gt;
& lt; div id = "divvertical" वर्ग = "डायल" & gt; & lt; / div & gt;
[9 0] var targetleft = document.getElementByID ('डायलहोरिज़ोंटल'); var reagleft = new zingtouch.region (लक्ष्य चयन); var tixtright = document.getElementByID ('डायलविटिकल'); var क्षेत्रराइट = नया Zingtouch.region (TARGETRIGHT);

07. ज़िंगटच का उपयोग करें

The canvas with added dials, tied to the draw() function

जोड़ा गया डायल के साथ कैनवास, ड्रॉ () फ़ंक्शन से बंधे

ज़िंगटच एक जावास्क्रिप्ट लाइब्रेरी है जो विभिन्न स्पर्श संकेतों का पता लगाने में सक्षम है, और माउस घटनाओं को भी संभालेगा। यह आपके लिए प्रदान किया जाता है [2 9] / सार्वजनिक / lib /

फ़ोल्डर, जैसा कि हम इसे हमारे डायल को नियंत्रित करने के लिए उपयोग करते हैं। नीचे बाएं नियंत्रण के लिए कार्यान्वयन है; आपको इसे दूसरी तरफ दोहराने और संशोधित करने की आवश्यकता होगी। 
 reagleft.bind (लक्ष्य चयन, 'घुमाएं', समारोह (ई) {
  यदि (e.detail.distancefromlast & lt; 0) {
  - Orizontal;
  } अन्य {
  ++ क्षैतिज;
  }
  anglehorizontal + = e.detail.distancefromlast;
  togetleft.style.transform = 'घुमाएं (' + anglehorizontal + 'deg)';
  ड्रा (math.floor (prev_horizontal), math.floor (prev_vertical), math.floor (क्षैतिज), math.floor (prev_vertical));
  prev_horizontal = क्षैतिज;
});

08. डायल सीमा लागू करें

बंद स्क्रीन जाने से लाइनों को अवरुद्ध करने के लिए, हम उपयोग करते हैं [2 9] खींच सकते हैं()

समारोह, जो एक बूलियन देता है। हम इसे दिशा, या तो 'क्षैतिज' या 'लंबवत', और क्षैतिज या ऊर्ध्वाधर चर के मूल्य को पारित करते हैं। हम इस फ़ंक्शन को दोनों डायल के 'घुमाने' श्रोता में कहते हैं, और केवल अगर 'सत्य' हम कोण को बढ़ाते हैं और कॉल करते हैं [2 9] () समारोह। [9 0] फ़ंक्शन कैंड्रा (दिशा, मूल्य) { var अधिकतम = (दिशा === 'क्षैतिज')? (कैनवास.विड्थ) :( कैनवास .hight); यदि (मान & lt; 2 || मान & gt; अधिकतम - 2) { विवरण झूठा है; } सच हो; }

09. डायल समस्याओं से बचें

सीमाओं के साथ हमने अभी लागू किया है, एक मौका है कि डायल एक छोर पर अटक सकता है यदि मूल्य सीमा से अधिक हो जाता है, यहां तक ​​कि दशमलव बिंदु से भी। इस स्थिति से बचने के लिए, हमें उस मामले को संभालना चाहिए जहां [2 9] खींच सकते हैं()

झूठी है और मूल्य को पहले वैध के लिए रीसेट करें, जैसा कि क्षैतिज नियंत्रक के लिए यहां दिखाया गया है: [9 0] अगर (कैंड्रा ('क्षैतिज', क्षैतिज)) { anglehorizontal + = e.detail.distancefromlast; togetleft.style.transform = 'घुमाएं (' + anglehorizontal + 'deg)'; ड्रा (math.floor (prev_horizontal), math.floor (prev_vertical), math.floor (क्षैतिज), math.floor (prev_vertical)); prev_horizontal = क्षैतिज; } अन्य { क्षैतिज = prev_horizontal; }

10. अपने टैबलेट पर ड्राइंग बोर्ड प्राप्त करें

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

इसके बाद, हम आईपैड पर एप्लिकेशन का निरीक्षण करने के लिए सफारी और विकास मेनू का उपयोग करेंगे। एंड्रॉइड डिवाइस के लिए, उपयोग करें [2 9] क्रोम: // निरीक्षण

।

11. एक्सेलेरोमीटर का परीक्षण करें

Testing the accelerometer in Safari [click the icon to enlarge]

सफारी में एक्सेलेरोमीटर का परीक्षण [विस्तार करने के लिए आइकन पर क्लिक करें]

यूएसबी के माध्यम से अपने टैबलेट को अपने कंप्यूटर से कनेक्ट करें और डेवलपर टूल्स का उपयोग करके एप्लिकेशन का निरीक्षण करें।

नीचे दिए गए कोड के साथ, आप अपने डिवाइस को चारों ओर ले जाने के रूप में विभिन्न त्वरण मानों को देखने में सक्षम होना चाहिए। कैनवास को रीसेट करने के लिए, हमने 5 से अधिक एक्स अक्ष पर एक त्वरण पर विचार करने का फैसला किया है, और धीरे-धीरे अस्पष्टता को कम करता है ( [2 9] मिटा देना

)। [9 0] var eraserate = 1; / * एक वैश्विक चर के रूप में परिभाषित करें * / window.addeventlistener ('devicemotion', समारोह (घटना) { Console.log ('त्वरण ::', घटना .acceleration); if (event.acceleration.x & gt; 5) { मिटाएं - = math.abs (event.acceleration.x / 100); Console.log ('मिटाएं ::', मिटाएं); } });

12. हटाने के लिए हिलाओ

हमने पिछले चरण में देखा है कि गति और त्वरण की जांच कैसे करें। अब हमें कॉल करने की आवश्यकता है [2 9] fadedrawing ()

जब हमारी हालत मिल जाती है। इस उदाहरण में, हम एक अलग अस्पष्टता पर कैनवास की एक सटीक प्रति को फिर से तैयार करते हैं।

ग्लोबलल्फा को 1 में रीसेट करें [2 9] ()

और सेट [2 9] ग्लोबल कॉम्पोसाइटोपरेशन वापस स्रोत-ओवर। [9 0] समारोह fadedrawing () { अगर (मिटा & lt; 0) { संदर्भ। ClearRect (0, 0, canvas.width, canvas.height); eraserate = 1; वापसी; } context.globallapha = मिटाएं; context.globalcompositoperation = 'प्रतिलिपि'; context.drawimage (कैनवास, 0, 0); }

13. इसे वास्तविक सौदे की तरह बनाओ

[1 9 5] [1 9 6] [1 9 7]

शेक-टू-डिलीवरी कार्यक्षमता के साथ हमारा आवेदन

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

यहां सुझाए गए तत्वों के लिए सीएसएस को पूरा करें: 

 & lt; div id = "difadowhorizontal" वर्ग = "छाया" & gt; & lt; / div & gt;
& lt; div id = "divshadowvertical" वर्ग = "छाया" & gt; & lt; / div & gt; 
 शरीर {
  पृष्ठभूमि: # 09CBF7;
}
#sketch {
  बॉक्स-छाया: 2 पीएक्स 2 पीएक्स 10 पीएक्स आरजीबीए (0, 0, 0, .25) इन्सेट;
}

14. वेबस्केट का उपयोग करें

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

15. डिवाइस के आकार का पता लगाएं

मुख्य HTML फ़ाइल में, बदलें [2 9] Main.js

साथ से [2 9] Extra.js । उत्तरार्द्ध में हमने अब तक किया है, उपकरणों और सॉकेट को संभालने के लिए संशोधन के साथ, जो हम निम्नलिखित चरणों में निरीक्षण करेंगे। क नज़र तो डालो [2 9] डिटेक्टेडिस () - इस विधि को अब के बजाय लोड पर बुलाया जाता है [2 9] इस में() और यह तय करेगा कि आवेदन के लिए कौन सा 'मोड' संभालना है।

नीचे एक फोन का विशेष मामला पता चला है:

[9 0] यदि (window.innerwidth & lt; 768) { सॉकेट = io.connect (); दस्तावेज़। प्रश्नोत्तरीक्टर ('# स्केच')। निकालें (); var difs = document.queryellecterall ('डायल, .shadow'); [] .foreach.call (डायल, फ़ंक्शन (आइटम) { item.classlist.add ('बड़ा'); }); iscontrols = सत्य; framemarinvertical = 62; सॉकेट.मिट ('तैयार', {'तैयार': 'नियंत्रण'}); }

16. फोन से कंप्यूटर तक

From phone to computer, remotely drawing through sockets

फोन से कंप्यूटर तक, दूरस्थ रूप से सॉकेट के माध्यम से ड्राइंग

के दौरान [2 9] Extra.js

आप कोड के बिट्स देखेंगे जैसे [2 9] सॉकेट.मिट () या [2 9] Socket.on () । ये हमारे नियंत्रण (फोन) और स्क्रीन (कंप्यूटर) उदाहरणों के लिए उत्सर्जक और श्रोता हैं। प्रत्येक उत्सर्जित घटना को सर्वर के माध्यम से सभी जुड़े सॉकेट में पुनः वितरित करने की आवश्यकता होती है। में [2 9] सर्वर \ index.js 'कनेक्शन' फ़ंक्शन में कुछ और श्रोताओं को जोड़ें और नोड सर्वर को पुनरारंभ करें। [9 0] सॉकेट। ('ड्रा', फ़ंक्शन (डेटा) { io.sockets.emit ('ड्रा', डेटा); }); सॉकेट। ('मिटा', फ़ंक्शन (डेटा) { io.sockets.emit ('मिटा', डेटा); }); Socket.on ('समायोजन', फ़ंक्शन (डेटा) { स्क्रीनविड्थ = डेटा .स्क्रीनविड्थ; स्क्रीनहाइट = data.creenhehight; io.sockets.emit ('समायोजन', डेटा); });

17. फोन अभिविन्यास को ठीक करें

अपने कंप्यूटर पर स्थानीयहोस्ट पर जाएं, जबकि इसे अपने फोन के साथ दूरस्थ रूप से एक्सेस करते समय (जैसे आपने पहले अपने टैबलेट से पहले किया था)। आपको अपने फोन पर डायल चालू करते समय आपको अपनी स्क्रीन पर खींची जा रही रेखा को देखना चाहिए। हालांकि, आपको पता चलेगा कि फोन पोर्ट्रेट मोड में होने पर डायल ठीक से फिट नहीं होता है।

हम इसे कुछ सीएसएस के साथ ठीक कर सकते हैं: 

 @ मेडिया स्क्रीन और (अभिविन्यास: पोर्ट्रेट) {
  .dial.big # dialvertical, .shadow.big # dialshadowvertical {
  दाएं: कैल्क (50% - 75 पीएक्स);
  नीचे: 20px;
  शीर्ष: ऑटो;
  }
  .dial.big # dialhorizontal, .shadow.big # dialshadowhorizontal {
  बाएं: कैल्क (50% - 75 पीएक्स);
  शीर्ष: 20px;
  }
}

18. खिलौना को और यथार्थवादी बनाएं

Touching your tablet leaves some temporary fingerprints

अपने टैबलेट को छूना कुछ अस्थायी फिंगरप्रिंट छोड़ देता है

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

इन श्रोताओं को सेट करें [2 9] इस में()

और उन कार्यों का पता लगाएं जिन्हें वे कॉल करते हैं: [9 0] यदि (प्रकार === 'सब') { canvas.addeventlistener ('टचस्टार्ट', समारोह (ई) { E.PreventDefault (); DrawfingerPrint (e.layerx, e.layery, सत्य); }); canvas.addeventlistener ('टचेंड', समारोह (ई) { HidefingerPrint (e.layerx, e.layery); }); }

19. कैनवास की एक प्रति सहेजें

में [2 9] DraffingerPrint ()

विधि, हम कुछ और करने से पहले, हम कैनवास की वर्तमान स्थिति को एक छिपे हुए तत्व में सहेजते हैं जिसे हम प्रिंट को साफ़ करते समय हमारे ड्राइंग को पुनर्स्थापित करने के लिए उपयोग करते हैं। यह केवल पहले स्पर्श पर होता है, न कि बाद में कॉल पर जो प्रत्येक 100ms प्रिंट के आकार को बढ़ाता है। [9 0] फ़ंक्शन DrawFingerPrint (XPOS, YPOS, SAVECANVAS) { / * आंशिक कार्य, EXTER.JS * / का संदर्भ लें यदि (Savecanvas) { hiddencanvas = दस्तावेज़। Createlement ('कैनवास'); var hiddencontext = hiddencanvas.getcontext ('2 डी'); hiddencanvas.width = canvas.width; hiddencanvas.height = canvas.height; hiddencontext.drawimage (कैनवास, 0, 0); } }

20. आवेदन ऑफ़लाइन चलाएं

अब आप होम स्क्रीन ऐप के रूप में अपने टैबलेट पर इसे सहेजकर एप्लिकेशन को वास्तव में स्टैंडअलोन बना सकते हैं। हम फोन के लिए ऐसा करने में सक्षम नहीं होंगे, क्योंकि इसे सर्वर से कनेक्शन की आवश्यकता है। में [2 9] /जनता

, नामित फ़ाइल का पता लगाएं [2 9] sketch.appcache और अपने आईपी पते से 'लोकहोस्ट' के सभी उदाहरणों को प्रतिस्थापित करें।

अब, निम्नानुसार पढ़ने के लिए एचटीएमएल में संशोधन करें:

[9 0] & lt; html lang = "en" manifest = "sketch.appcache" & gt;

21. आवेदन सहेजें

अब अपने टैबलेट पर फिर से एप्लिकेशन पर जाएं और होम स्क्रीन विकल्प में जोड़ें का चयन करें। आपके डेस्कटॉप पर एक नया आइकन दिखाई देना चाहिए। इसे अभी भी अपने स्थानीयहोस्ट से दूरस्थ रूप से कनेक्ट होने के बावजूद इसे खोलें। कैश मैनिफेस्ट हमने पहले सेट अप किया था पृष्ठभूमि में ऑफ़लाइन उपयोग के लिए सभी आवश्यक फ़ाइलों को डाउनलोड करेगा। वाई-फाई बंद करें और ऐप को फिर से खोलें। Voilà!

यह लेख मूल रूप से दिखाई दिया वेब डिजाइनर पत्रिका अंक 263. इसे खरीदें यहां ।

[2 9] अधिक पढ़ें:

  • [2 9] 15 वेब एपिस आपने कभी नहीं सुना है
  • [2 9] इंटरफ़ेस एनिमेशन डिजाइन करने के लिए एक शुरुआती गाइड
  • [2 9] बेहतर सीएसएस लिखने के लिए एक गाइड

    • कैसे करना है - सर्वाधिक लोकप्रिय लेख

    एक सिर कैसे आकर्षित करें: एक पूर्ण गाइड

    कैसे करना है Feb 8, 2026

    (छवि क्रेडिट: ओलिवर पाप) [1 9] 2 का पृष्ठ 1: ..

    The essential guide to foreshortening in art

    कैसे करना है Feb 8, 2026

    (छवि क्रेडिट: रोब लुन) [1 9] यदि आप सोच रहे हैं कि..

    Use brain.js to build a neural network

    कैसे करना है Feb 8, 2026

    (छवि क्रेडिट: गेट्टी छवियां) [1 9] Brain.js एक तंत्रि�..

    How to draw a character in pen and ink

    कैसे करना है Feb 8, 2026

    एक गेम स्टूडियो में एक कलाकार के रूप में मैं सबसे �..

    Step-by-step: How to mimic oil paint in Corel Painter

    कैसे करना है Feb 8, 2026

    यह कल की तरह ही लगता है जब मैं नाइट्स, जादूगरों, बर्बर और अंधेरे में छिपे ह�..

    How to remove a background in Photoshop

    कैसे करना है Feb 8, 2026

    4 का पृष्ठ 1: जादू की छड़ी उपकरण [1 1] जादू की छड़ी उपकरण ..

    एक 3 डी मुद्रित गोब्लिन को कैसे मूर्तिकला

    कैसे करना है Feb 8, 2026

    इस परियोजना के लिए अवधारणा, मशरूम गोब्लिन, मेरे द�..

    How to combine sculpted and painted displacement maps

    कैसे करना है Feb 8, 2026

    कभी-कभी उन सभी को मूर्तिकला करने के बजाय, विभिन्न �..

    श्रेणियाँ