क्लिक किए गए बिंदु के निकट तत्व ढूंढना

Question

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

मैं jQuery का उपयोग कर रहा हूं। मुझे बस इस छोटे से अहंकार के साथ मदद की ज़रूरत है। एक बार जब मैं अपने प्रयोग के साथ करूँगा तो मैं आपको दिखाऊंगा कि मैं क्या कर रहा हूं।

अद्यतन

मैं यह कैसे काम कर सकते हैं के बारे में सोचा। इस चित्र को देखो:

प्रत्येक आयत 8 अंक (या बल्कि 4 अंक और 4 लाइनों) जो महत्वपूर्ण हैं। क्षैतिज बिंदुओं (लाल बिंदु) के लिए केवल एक्स मान महत्वपूर्ण है और केवल y मान लंबवत बिंदुओं (हरा बिंदु) के लिए महत्वपूर्ण है। दोनों एक्स और वाई कोनों के लिए महत्वपूर्ण हैं।

ऑरेंज क्रॉस मेरे उपयोग के मामले में माउस क्लिक के खिलाफ मापा जा सकता है। प्रकाश बैंगनी रेखाएं नारंगी पार के बीच की दूरी हैं और यह संभव निकटतम बिंदु है।

तो ... किसी दिए गए नारंगी क्रॉस के लिए, नारंगी क्रॉस पर प्रत्येक आयताकार के निकटतम किनारे या कोने को खोजने के लिए प्रत्येक आयताकार के 8 बिंदुओं में से प्रत्येक के माध्यम से लूप करें। सबसे कम मूल्य वाला आयत निकटतम है।

मैं इसे संकल्पना और कल्पना कर सकता हूं लेकिन इसे कोड में नहीं डाल सकता। मदद!

Answer 1

आपका एल्गोरिदम सही है। चूंकि आपको कोड में मदद की ज़रूरत है, न कि एल्गोरिदम में, यहां कोड है:

यह सबसे कुशल नहीं हो सकता है। लेकिन यह काम करता है।

// Define the click 
var click = Array(-1, -2); // coodinates in x,y 

// Define the buttons 
// Assuming buttons do not overlap 
var button0 = Array(
    Array(0, 0), // bottom-left point (assuming x is horizontal and y is vertical) 
    Array(6, 6) // upper-right point 
); 

var button1 = Array(
    Array(10, 11), 
    Array(17, 15) 
); 

var button2 = Array(
    Array(-8, -5), 
    Array(-3, -1) 
); 

// Which button to trigger for a click 
i = which(click, Array(button0, button1, button2)); 
alert(i); 


function which(click, buttons){ 
    // Check if click is inside any of the buttons 
    for (i in buttons){ 
     var button = buttons[i]; 
     var bl = button[0]; 
     var tr = button[1]; 

     if ((click[0] >= bl[0] && click[0] <= tr[0]) && 
      (click[1] >= bl[1] && click[1] <= tr[1])){ 
      return i; 
     } 
    } 

    // Now calculate distances 
    var distances = Array(); 

    for (i in buttons){ 
     var button = buttons[i]; 
     var bl = button[0]; 
     var tr = button[1]; 

     if ((click[0] >= bl[0] && click[0] <= tr[0])) { 
      distances[i] = Math.min(Math.abs(click[1]-bl[1]), Math.abs(click[1]-tr[1])); 
     } 
     else if ((click[1] >= bl[1] && click[1] <= tr[1])) { 
      distances[i] = Math.min(Math.abs(click[0]-bl[0]), Math.abs(click[0]-tr[0])); 
     } 
     else{ 
      distances[i] = Math.sqrt(
           (Math.pow(Math.min(Math.abs(click[0]-bl[0]), Math.abs(click[0]-tr[0])), 2)) + 
           (Math.pow(Math.min(Math.abs(click[1]-bl[1]), Math.abs(click[1]-tr[1])), 2)) 
          ); 
     } 
    } 

    var min_id = 0; 
    for (j in distances){ 
     if (distances[j] < distances[min_id]){ 
      min_id = j; 
     } 
    } 

    return min_id; 
} 

Answer 2

आप सभी आयतों के निकटतम कोने बिंदु की तलाश कर सकते हैं। यह ज्यादातर मामलों में काम करता है, तेजी से और कार्यान्वित करने में आसान है। जब तक आपके आयतों को नियमित ग्रिड पर गठबंधन किया जाता है, यह विधि आपको निकटतम आयताकार प्रदान करती है।

Answer 3

जिस तरह से मैं इसे करता हूं वह संख्याओं के साथ नहीं है, बल्कि तर्क के साथ है।

मुझे लगता है कि आप कुछ है कि का कहना है के साथ खत्म करना चाहते हैं यह सोचते हैं रहा हूँ,

आप इस में से प्रत्येक अगर कर सकता है "अगर एक्स जब मैं कहीं और क्लिक करने के बाद कुछ करना एक्स के सबसे नजदीक तत्व तो कुछ करना है" जिन तत्वों के साथ आप कुछ करना चाहते हैं वे सरल <div> कंटेनर थे जो उस तत्व से बड़े थे जो आप इलाज करना चाहते हैं, लेकिन उस ऑब्जेक्ट के बीच आधा रास्ते से बड़ा नहीं है और यह अगला निकटतम ऑब्जेक्ट है। वास्तव में एक ग्रिड।

सभी कंटेनरों को एक ही कक्षा दें।

फिर आप कह सकते हैं, "यदि वाई क्लिक किया गया है तो x पर कुछ करें", तो आप पहले ही जानते होंगे कि प्रत्येक कंटेनर में कौन सा तत्व है।

मैं कोड लिखने हैं, लेकिन मैं काम जा रहा हूँ ...

Answer 4

आप एक 2 डी ग्रिड पर दो अंक के बीच की दूरी को खोजने के लिए चाहते हैं, आप निम्न सूत्र का उपयोग कर सकते हैं:

(Bx

distanceY = एय - - बी 2 डी अंक एक & बी)

distanceX = कुल्हाड़ी के लिएy

totalDistance = वर्गमूल ((distX * distX) + (Disty * Disty))

एक बार जब आप दो अंक के बीच की दूरी की जाँच कर सकते हैं बहुत आसानी से पता लगा सकते हैं जो आयत कोने अपने माउस क्लिक भी सबसे करीब है। आपके इच्छित एल्गोरिदम को अनुकूलित करने के लिए आप कई चीजें कर सकते हैं, लेकिन इससे आपको अच्छी शुरुआत मिलनी चाहिए।

Answer 5

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

तो एक ही एक्स, उपयोग y अंतर

ही y, उपयोग एक्स अंतर

अन्यथा hypotheneuse

का उपयोग करते हैं एक बार जब आप निकटतम बिंदु आप माता-पिता आकार सही प्राप्त कर सकते हैं लगता है? यह काम करेगा क्योंकि आप निकटतम बिंदु पर स्नैप करने का प्रयास कर रहे हैं। तो यह सितारों की तरह फैंसी आकार के साथ भी काम करेगा।

Answer 6

अपेक्षाकृत नई elementFromPoint() एपीआई के अलावा हमें एक वैकल्पिक संभावित हल्का तरीका अपनाते हैं, कर सकते हैं: हम माउस कर्सर के आसपास परीक्षण हिट कर सकते हैं, बड़ा हलकों में जा रहा जब तक हम निकटतम तत्व हैं।

मैंने एक त्वरित, गैर-उत्पादन उदाहरण यहां एक साथ रखा: http://jsfiddle.net/yRhhs/ (क्रोम/सफारी केवल वेबकिटमैचर्स चयनकर्ता के उपयोग के कारण)। एल्गोरिदम को देखने में उपयोग किए जाने वाले बिंदुओं के कारण प्रदर्शन कम हो सकता है।

function hitTest(x, y){ 
    var element, i = 0; 
    while (!element){ 
     i = i + 7; // Or some other threshold. 

     if (i > 250){ // We do want some safety belts on our while loop. 
      break; 
     } 

     var increment = i/Math.sqrt(2); 
     var points = [ 
      [x-increment, y-increment], [x+increment, y-increment], 
      [x+increment, y+increment], [x-increment, y+increment] 
     ]; 

     // Pop additional points onto the stack as the value of i gets larger. 
     // ... 

     // Perhaps prematurely optimized: we're using Array.prototype.some to bail-out 
     // early once we've found a valid hit target. 
     points.some(function(coordinates){ 
      var hit = document.elementFromPoint.apply(document, coordinates); 
      // isValidHit() could simply be a method that sees whether the current 
      // element matches the kinds of elements we'd like to see. 
      if (isValidHit(hit)){ 
       element = hit; 
       return true; 
      } 
     }); 
}