माउस के साथ छवि का एक नक्शा खींचें

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

सिद्धांत

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

• coord - चयन क्षेत्र के निर्देशांक
• href - वह लिंक जिससे ज़ोन पर क्लिक करने पर संक्रमण हो जाएगा
• nohref - इंगित करता है कि इस क्षेत्र में लिंक नहीं है
• आकार - चयन आकार
  
  • सर्कल - सर्कल चयन क्षेत्र
  • डिफ़ॉल्ट - संपूर्ण छवि क्षेत्र का चयन करता है
  • पाली - बहुभुज चयन क्षेत्र
  • आयत - आयत चयन क्षेत्र
• लक्ष्य - निर्धारित करता है कि लिंक कहां खुलेगा

कार्ड को छवि से जोड़ने के लिए, मानचित्र टैग के लिए एक मनमाना नाम के साथ नाम विशेषता निर्दिष्ट करें, और छवि पर usemap टैग लटकाएं , जिसका मूल्य प्रारूप "# नाम" में इंगित किया गया है।

चूंकि चयन क्षेत्र बहुभुज होना चाहिए था, आकृति विशेषता का मान, क्षेत्र टैग, हम पाली - बहुभुज क्षेत्र के रूप में इंगित करते हैं। इस मोड में, अल्पविराम ऊपरी बाएँ कोने के सापेक्ष बिंदु के निर्देशांक को इंगित करता है - x, y। डॉट्स को कॉमा से भी अलग किया जाता है, जो पहली बार में इस तरह के कोड को पढ़ रहा है।

<img src="sample.png" width="200" height="200" alt="Sample" usemap="#sample"> <map name="sample"> <area shape="poly" coords="30,100,100,30,100,170,170,100"> </map> 

लेखन पेंट

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

शुरू करने के लिए, लेआउट तैयार करें:

 <div class="canvas" id="container"> <div class="inner" id="canvas"> <img src="img/sample.jpg" width="934" height="407" alt="Sample"> </div> </div> <div class="bar" id="bar"></div> <div class="info" id="info"></div> 

"पिंट" को नियंत्रित करने के लिए बटन # बार में डाले जाएंगे।
#Info जेनरेट किए गए html कोड को जनरेट करेगा।

सीएसएस:

 body { margin: 0; padding: 20px; font-family: Arial, Helvetica, sans-serif; } img { border: none; outline: none; display: block; -moz-user-select: none; -webkit-user-select: none; user-select: none; } .canvas { border: 2px solid #333; padding: 2px; margin-bottom: 16px; display: inline-block; //display: inline; //zoom:1; } .canvas.draw { border-color: #3C0; } .canvas .inner { position: relative; } .canvas .point { width: 1px; height: 1px; background-color: #fff; border: 1px solid #000; overflow: hidden; position: absolute; } .bar { margin-bottom: 16px; } .info { background-color: #FCFCFC; border: 1px dotted #CCC; font-size: 12px; font-style: italic; padding: 8px; word-wrap: break-word; } 

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

 var addPoint = function(e){ var e = _.getEvent(e), offset = _.getOffset(nodes['canvas']), x = e.clientX + _.getDocScrollLeft() - offset[0], y = e.clientY + _.getDocScrollTop() - offset[1], node = nodes['canvas'].appendChild(_.node('div', {'class':'point'})); node.style.top = y-1+'px'; node.style.left = x-1+'px'; points.push({'x' : x, 'y' : y, 'node' : node}); e.preventDefault && e.preventDefault(); return false; }; 

फिर हम एक फ़ंक्शन लिखते हैं जो हमारे मानचित्र का HTML कोड उत्पन्न करेगा।

 var renderInfo = function(){ var text; _.clearNode(nodes['info']); nodes['info'].appendChild(_.node('span', '<map>')); nodes['info'].appendChild(_.node('br')); for(var i = 0, l = areas.length; i < l; i++){ if(areas[i].length > 0){ text = '<area shape="poly" coords="'; for(var i2 = 0, l2 = areas[i].length; i2 < l2; i2++){ if(i2 > 0){ text += ','; } text += areas[i][i2]['x'] + ',' + areas[i][i2]['y']; } text += '">'; nodes['info'].appendChild(_.node('span', text)); nodes['info'].appendChild(_.node('br')); } } nodes['info'].appendChild(_.node('span', '</map>')); }; 

चलो एक कक्षा में सब कुछ फ्रेम करते हैं, कुछ सहायक कार्य करते हैं, बस। मुझे उम्मीद है कि कोई तुलजा बोने के लिए उपयोगी होगा।

संदर्भ

डेमो ।
खट्टे (~ 60 केबी)।
GitHub

पुनश्च। जीथुब के लिए एक लिंक जोड़ा गया।
पीएस 2। अब "पेंट" कैनवास पर काम करता है।