Javascript check Mouse clicked inside the Circle or Polygon

Question

Any one know how to check that wheter a mouse is clicked inside the circle or polygon. My problem is I want to check that if mouse has been clciked inside the circle or polygon. circle or polygon coordinates has been stored inside an array. Any help is really appreciated

Answer 1

As suggested by some other answers, I followed some links and found the c code here. Here is the JavaScript translation for finding whether a point is in a polygon

Copyright (c) 1970-2003, Wm. Randolph Franklin

Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:

1. Redistributions of source code must retain the above copyright notice, this list of conditions and the following disclaimers.
2. Redistributions in binary form must reproduce the above copyright notice in the documentation and/or other materials provided with the distribution.
3. The name of W. Randolph Franklin may not be used to endorse or promote products derived from this Software without specific prior written permission.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

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 - Number of vertices in the polygon. Whether to repeat the first vertex at the end is discussed below.
vertx, verty - Arrays containing the x- and y-coordinates of the polygon's vertices.
testx, testy - X- and y-coordinate of the test point.

Answer 2

For the circle case it is very easy, just just check if the distance from the point to the center is less than the radius:

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

---

For the polygon, the easiest way is to imagine a line going straight up form the point. If this line crosses an odd number of polygon borders, your point is inside the polygon. (It would just cross one polygon border for a simple convex polygon)

You might also be able to find a third party geometry library, but it will likely take you more time than, than coding it yourself.

Answer 3

I'd have a look at the isPointInPath method.

It will require you to plot the path onto a 'canvas' element, but there's a good chance that you want to be doing that anyway to render it. If you don't need to render your polygon on a canvas you can create an invisible canvas element (create it but never add it to the DOM).

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);

Assuming you have an array of coordinate objects with x and y properties on them the above code should tell you if the point (50, 50) lies within the bounds of your shape.

Answer 4

Circles are easy, just check that the distance from the point to the center of the circle is less than the radius of the circle using the Pythagorean theorem (see also this question).

Polygons are more challenging. That article links to C code to do it, which should be translate-able to JavaScript.

Answer 5

I assembled an example with the above function: 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 );
});