जावास्क्रिप्ट चेक माउस सर्किल या पॉलीगॉन

Question

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

Answer 1

मंडलियां, आसान है बस जाँच लें कि चक्र के केंद्र के लिए बिंदु से दूरी चक्र का उपयोग कर Pythagorean theorem (भी this question देखें) की त्रिज्या से कम है।

बहुभुज more challenging हैं। यह आलेख सी कोड को करने के लिए लिंक करता है, जिसे जावास्क्रिप्ट में अनुवाद करने में सक्षम होना चाहिए।

Answer 2

चक्र मामले यह बहुत आसान है, बस सिर्फ अगर केंद्र के लिए बिंदु से दूरी से भी (OET) के दायरे में कम है की जाँच कर रहा है के लिए:

function intersects(x, y, cx, cy, r) { 
    var dx = x-cx 
    var dy = y-cy 
    return dx*dx+dy*dy <= r*r 
} 

---

बहुभुज के लिए, सबसे आसान जिस तरह से एक रेखा सीधे सीधे बिंदु बनाते हैं कल्पना करना है। यदि यह रेखा पॉलीगॉन सीमाओं की एक विषम संख्या को पार करती है, तो आपका बिंदु बहुभुज के अंदर है। (यह एक साधारण उत्तल बहुभुज के लिए सिर्फ एक बहुभुज सीमा पार करेगा)

आप किसी तृतीय पक्ष ज्यामिति लाइब्रेरी को भी ढूंढ पाएंगे, लेकिन यह आपको स्वयं को कोड करने की तुलना में अधिक समय लेगा।

Answer 3

जैसा कि some other answers द्वारा सुझाया गया है, मैंने कुछ लिंक और found the c code here का पालन किया। यहाँ खोजने के लिए कि क्या एक बिंदु

कॉपीराइट (c) 1970-2003, Wm एक बहुभुज में है के लिए जावास्क्रिप्ट अनुवाद है। रैंडोल्फ फ्रैंकलिन

इस सॉफ़्टवेयर की एक प्रति प्राप्त करने वाले किसी भी व्यक्ति को संबंधित सॉफ़्टवेयर और संबंधित दस्तावेज फ़ाइलों ("सॉफ़्टवेयर") प्राप्त करने के लिए नि: शुल्क अनुमति दी जाती है, बिना किसी सीमा के सॉफ़्टवेयर में सौदा करने के लिए, बिना सीमा के उपयोग के अधिकार , कॉपी, संशोधित करने, मर्ज,, प्रकाशित वितरित, उप-लाइसेंस, और/या सॉफ़्टवेयर की प्रतियां बेचना, तथा जिन लोगों को सॉफ्टवेयर उपलब्ध कराया है, विषय निम्नलिखित शर्तों के अनुमति देने के लिए:

1. का पुनर्वितरण स्रोत कोड को उपरोक्त कॉपीराइट नोटिस, शर्तों की यह सूची और निम्नलिखित अस्वीकरण को बनाए रखना चाहिए।
2. द्विआधारी रूप में पुनर्वितरणों को दस्तावेज़ीकरण और/या वितरण के साथ प्रदान की गई अन्य सामग्रियों में उपरोक्त कॉपीराइट नोटिस को पुन: पेश करना होगा।
3. डब्ल्यू। रैंडोल्फ़ फ्रैंकलिन का नाम इस सॉफ्टवेयर से प्राप्त उत्पादों को पूर्व निर्धारित लिखित अनुमति के बिना समर्थन या प्रचारित करने के लिए उपयोग नहीं किया जा सकता है।

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

function pnpoly(nvert, vertx, verty, testx, testy) { 
    var i, j, c = false; 
    for(i = 0, j = nvert-1; i < nvert; j = i++) { 
     if(((verty[i] > testy) != (verty[j] > testy)) && 
      (testx < (vertx[j] - vertx[i]) * (testy - verty[i])/(verty[j] - verty[i]) + vertx[i])) { 
       c = !c; 
     } 
    } 
    return c; 
} 

nvert - बहुभुज में कोने की संख्या। अंत में पहले चरम को दोहराना है या नहीं, नीचे चर्चा की गई है।
वर्टक्स, गरीबी - बहुभुज के लंबवत के x- और y-coordinates युक्त Arrays।
testx, testy - परीक्षण बिंदु के एक्स- और वाई-समन्वय।

Answer 4

मैं ऊपर समारोह के साथ एक उदाहरण इकट्ठे: http://jsfiddle.net/jcspader/Vz6ka/

var gDrawingContext = $("canvas")[0].getContext("2d"); 


gDrawingContext.beginPath(); 
gDrawingContext.arc(50, 50, 10, 0, Math.PI*2, false); 
gDrawingContext.closePath(); 
gDrawingContext.strokeStyle = "red"; 
gDrawingContext.stroke(); 

gDrawingContext.beginPath(); 
gDrawingContext.arc(55, 55, 10, 0, Math.PI*2, false); 
gDrawingContext.closePath(); 
gDrawingContext.strokeStyle = "blue"; 
gDrawingContext.stroke(); 

function intersects(x, y, cx, cy, r) { 
    var dx = x-cx 
    var dy = y-cy 
    return dx*dx+dy*dy <= r*r 
} 
console.clear(); 
$("canvas").on("click", function (e){ 
    if (intersects(e.pageX, e.pageY, 55, 55, 10)) 
    console.info(e.pageX + ", " + e.pageY); 
}); 

Answer 5

मैं isPointInPath विधि पर एक नज़र होगा।

आपको पथ को 'कैनवास' तत्व पर प्लॉट करने की आवश्यकता होगी, लेकिन एक अच्छा मौका है कि आप इसे प्रस्तुत करने के लिए वैसे भी करना चाहते हैं। यदि आपको कैनवास पर अपने बहुभुज को प्रस्तुत करने की आवश्यकता नहीं है तो आप एक अदृश्य कैनवास तत्व बना सकते हैं (इसे बनाएं लेकिन इसे कभी भी डीओएम में न जोड़ें)।

var canvas = document.getElementById('canvas'); // Or document.createElement('canvas'); 
var ctx = canvas.getContext('2d'); 
ctx.beginPath(); 
for (var i = 0; i < coords.length; i++) { 
    ctx.lineTo(coords[i].x, coords[i].y); 
} 
ctx.isPointInPath(50,50); 

आप यह मानते हुए एक्स और उन पर y गुणों के साथ वस्तुओं समन्वय की एक सरणी है ऊपर कोड आप को बताना चाहिए अगर बिंदु (50, 50) अपने आकार की सीमा के भीतर निहित है।