👴🏼 🐕 🤚🏻 IPhone HTML5 कैनवास के लिए एक "स्केच" लिखना 💅🏼 🤽🏻 🖐🏼

हैलो, हॉकर्स!

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

टच-डिवाइस घटनाओं की सुविधाओं के बारे में;
मोबाइल उपकरणों के लिए लेआउट सुविधाओं के बारे में;
एक सामान्य "ड्राइंग रूम" बनाने के लिए आपको कई कैनवस का उपयोग करने की आवश्यकता है;
क्या क्लिकजैकिंग है और मैंने अपने ड्राइंग में इस हैक का उपयोग क्यों किया;
सभी कठिनाइयों और कुछ छोटी चीजों के बारे में जो मुझे विकास प्रक्रिया में सामना करना पड़ा;

अधिक - कटौती के तहत

प्रविष्टि

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

सीएसएस शैलियों

पहले तो मैंने html कोड के साथ शुरू करने के बारे में सोचा, लेकिन मुझे एहसास हुआ कि जो हो रहा है उसे पूरी तरह से समझने के लिए, आपको पहले स्टाइल प्रदान करने की आवश्यकता है।

body {
margin: 0;
padding: 0;
background: #fff;
}
/* , */
.tb {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 40px;
overflow: hidden;
border-bottom: 1px solid #CCC;
background-color: orange;
}
canvas {
position: absolute;
top: 40px;
left: 0;
}
/* */
.bt {
overflow: hidden;
float: left;
font-weight: bold;
color: white;
font: 16px Arial;
width: 33%;
padding-top: 10px;
height: 30px;
text-align: center;
}
/* select */
select {
float: left;
width: 33%;
margin-top: 10px;
height: 20px;
}

Html फ़ाइल

पर्याप्त विषय आकार बनाए रखने के लिए, मैंने संपूर्ण फ़ाइल को प्रकाशित नहीं करने का निर्णय लिया, लेकिन केवल इसके दिलचस्प हिस्से।

मेटा व्यूपोर्ट

 ... <head> <meta name="viewport" content="width=device-width,user-scalable=no" /> </head> ...

व्यूपोर्ट विशेषता के साथ मेटा टैग मोबाइल ब्राउज़र को बताता है कि पृष्ठ की चौड़ाई (चौड़ाई), ऊंचाई (ऊंचाई) क्या होगी, क्या उपयोगकर्ता को इस पृष्ठ पर ज़ूम बदलने की अनुमति है (उपयोगकर्ता-स्केलेबल मान), जिसके साथ प्रारंभिक ज़ूम पेज लोड करने के लिए (प्रारंभिक-स्केल), न्यूनतम (न्यूनतम-स्केल) और अधिकतम (अधिकतम-स्केल) ज़ूम क्या हो सकता है। वर्तमान डिवाइस की चौड़ाई और ऊंचाई मान डिवाइस-चौड़ाई / डिवाइस-ऊंचाई में संग्रहीत की जाती है।

ब्रश का रंग / आकार चुनें

मैं लंबे समय से एक रंग पसंद करने के तरीके के बारे में सोच रहा था, और मेरे लिए सबसे सरल बात यह थी कि विकल्प टैग में वांछित रंग और आकार के मूल्यों के साथ और "रंग" या "आकार" बटन पर क्लिक करके , केवल चयनित तत्व बनाने के लिए फ़ोकस भेजें। । यह ज्ञात है कि iPhone पर फोकस वाला चुनिंदा टैग कुछ इस तरह से काम करता है।

फोकस (विधि। फ़ोकस () ), दुर्भाग्य से, में नहीं भेजना चाहता। लेकिन मैंने हार नहीं मानी! और यहाँ मैंने क्या सोचा है: क्या होगा यदि मैं एक पारदर्शी div बनाता हूं जिसमें उन चुनिंदा तत्वों की आवश्यकता होती है जिनकी मुझे आवश्यकता है और यह तलाक, बदले में, मेरे बटन पर लगाओ! और आपको क्या लगता है? सब कुछ काम करता है! स्पष्टता के लिए, मैं दिखाता हूं कि:

मैं हैक कोड लाता हूं:

 <!-- ,    --> <div id="tb" style="z-index: 2"> <div class="bt"></div> <div class="bt"></div> <a class="bt"></a> </div> <!-- ,    --> <div id="htb" style="opacity: 0; z-index: 3"> <select id="hcs"> <option>blue</option> <option>red</option> <option>green</option> <!--      --> </select> <select id="hss"> <option>10</option> <option>11</option> <option>12</option> <!--      --> </select> <a class="bt" id="savebutton" style="z-index: 20;"></a> </div>

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

सबसे दिलचस्प

पाठक को कोड की सौ लाइनों के साथ लोड करने से पहले, मैं इस बारे में बात करना चाहता हूं कि सब कुछ कैसे काम करना चाहिए और क्यों।

डिवाइस इवेंट स्पर्श करें

ontouchstart - ट्रिगर तब हुआ जब उपयोगकर्ता ने अपनी उंगली को स्क्रीन के पार ले जाना शुरू कर दिया (कंप्यूटर पर ऑनमाउडाउन के साथ तुलना की जा सकती है)।

ontouchmove - ट्रिगर तब होता है जब उपयोगकर्ता स्क्रीन को स्वाइप करता है (इसकी तुलना onmousemove से की जा सकती है)।

ontouchend - जब उपयोगकर्ता अपनी उंगली को स्क्रीन से जारी करता है तो ट्रिगर हो जाता है (इसकी तुलना ऑनमाउस से की जा सकती है)।

जेनेचर एपीआई से ऑनेस्टेयुरचेंज , ऑनेस्टीओरेन्ड भी है , लेकिन उन्हें इस लेख में नहीं माना जाएगा।

प्रत्येक ईवेंट स्पर्श की एक सरणी देता है, जिनमें से प्रत्येक तत्व में गुण होते हैं जैसे:
pageX , pageY , clientX , clientY । स्पर्श सरणी में तत्वों की संख्या स्क्रीन को छूने वाली उंगलियों की संख्या पर निर्भर करती है।

इसलिए, स्क्रीन के स्पर्श को ट्रैक करना और निर्देशांक प्राप्त करना बहुत सरल हो सकता है:

 someElement.ontouchstart = function(e) { console.log("X: " + e.touches[0].pageX + ", Y:" + e.touches[0].pageY); }

एल्गोरिथ्म

सब कुछ कैसे चलेगा? अंकों पर

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

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

क्यों दूसरे कैनवास के लिए सब कुछ redraw

जैसा कि मैंने कहा, प्रत्येक "स्ट्रोक" के बाद मुख्य कैनवास से छवि सहायक कैनवास पर क्लोन की जाती है। यह मुख्य कैनवास के लिए निर्देशांक के सरणी को रोकना नहीं करने के लिए किया जाता है। सरणी में अधिक नियंत्रण बिंदुओं के बाद से, हमारी ड्राइंग धीमी हो जाएगी। इन कारणों के लिए, मैंने रेड्रा बफर को 1 स्ट्रोक तक सीमित कर दिया (यदि आप एक बड़ा स्ट्रोक खींचते हैं, तो गति भी कम हो सकती है)।

कोड

कैनवस बनाने और संदर्भ प्राप्त करने के लिए कोड

 var width = window.innerWidth; //  var height = window.innerHeight; //  var hcanv = document.createElement("canvas"); //    var mcanv = document.createElement("canvas"); //    //   mcanv.width = width; mcanv.height = height; hcanv.width = width; hcanv.height = height; //   DOM document.body.appendChild(mcanv); document.body.appendChild(hcanv); hcanv.style.zIndex = 10; //     //  var mctx = mcanv.getContext("2d"); var hctx = hcanv.getContext("2d");

रंग और ब्रश के आकार का चयन

 var selects = document.getElementsByTagName("select"); //   select for(var i=0; i<selects.length; i++) { //  selects[i].onchange = handleSelects; //       } function handleSelects() { //    var val = this.options[this.selectedIndex].value; switch(this.id) { //  ,     case "hcs": brush.color = val; //   break; case "hss": brush.size = val; //   break; } }

ड्राइंग कोड

 var touches = {x:[], y:[]}; //   var brush = {color: "blue", size: 10}; //   var snapshot = ""; //    hcanv.ontouchstart = function(e) { //   //    touches.x.push(e.touches[0].pageX); touches.y.push(e.touches[0].pageY-40); //40  -    hctx.clearRect(0, 0, width, height); //  redraw(hctx); //  () return false; //    - } hcanv.ontouchmove = function(e) { //   //    touches.x.push(e.touches[0].pageX); touches.y.push(e.touches[0].pageY-40); hctx.clearRect(0, 0, width, height); //  redraw(hctx); // () return false; //    - ( etc) } hcanv.ontouchend = function(e) { //     snapshot = hcanv.toDataURL(); //  URL    png var img = new Image(); //    img.src = snapshot; //   url img.onload = function() { //   (     ) mctx.drawImage(img, 0, 0); //     hctx.clearRect(0, 0, width, height); //   } //  touches.x = []; touches.y = []; } //  function redraw(ctx) { ctx.lineCap = "round"; //   ctx.lineJoin = "round"; //  ctx.strokeStyle = brush.color; //  ctx.lineWidth = brush.size; //   ctx.beginPath(); if(touches.x.length < 2) { //,      ctx.moveTo(touches.x[0], touches.y[0]); ctx.lineTo(touches.x[0] + 0.51, touches.y[0]); ctx.stroke(); ctx.closePath(); return; } ctx.moveTo(touches.x[0], touches.y[0]); ctx.lineTo((touches.x[0] + touches.x[1]) * 0.5, (touches.y[0] + touches.y[1]) * 0.5); var i = 0; while(++i < (touches.x.length -1)) { var abs1 = Math.abs(touches.x[i-1] - touches.x[i]) + Math.abs(touches.y[i-1] - touches.y[i]) + Math.abs(touches.x[i] - touches.x[i+1]) + Math.abs(touches.y[i] - touches.y[i+1]); var abs2 = Math.abs(touches.x[i-1] - touches.x[i+1]) + Math.abs(touches.y[i-1] - touches.y[i+1]); if(abs1 > 10 && abs2 > abs1 * 0.8) { //,      ctx.quadraticCurveTo(touches.x[i], touches.y[i], (touches.x[i] + touches.x[i+1]) * 0.5, (touches.y[i] + touches.y[i+1]) * 0.5); continue; } ctx.lineTo(touches.x[i], touches.y[i]); ctx.lineTo((touches.x[i] + touches.x[i+1]) * 0.5, (touches.y[i] + touches.y[i+1]) * 0.5); } ctx.lineTo(touches.x[touches.x.length-1], touches.y[touches.y.length-1]); ctx.moveTo(touches.x[touches.x.length-1], touches.y[touches.y.length-1]); ctx.stroke(); ctx.closePath(); }

डेमो
स्रोत कोड

पुनश्च यदि आपके कोई प्रश्न हैं - पूछें! मैं जवाब देने की कोशिश करूंगा।

IPhone HTML5 कैनवास के लिए एक "स्केच" लिखना