Проверка Javascript Мышь щелкнула внутри круга или многоугольника

Ответ 1

Как было предложено некоторые другие ответы, я следил за некоторыми ссылками и нашел здесь код c. Вот перевод JavaScript для определения того, находится ли точка в многоугольнике

Copyright (c) 1970-2003, Wm. Рэндольф Франклин

Настоящим предоставляется бесплатно любому лицу, получающему копию этого программного обеспечения и связанным с ним файлам документации ( "Программное обеспечение" ), для работы в Программном обеспечении без ограничений, включая, без ограничений, права на использование, копирование, изменять, объединять, публиковать, распространять, сублицензировать и/или продавать копии Программного обеспечения и разрешать лицам, которым предоставляется Программное обеспечение, при соблюдении следующих условий:

• Распространение исходного кода должно содержать вышеуказанное уведомление об авторских правах, этот список условий и следующие отказы.
• Распространения в двоичной форме должны воспроизводить вышеупомянутое уведомление об авторских правах в документации и/или других материалах, предоставляемых с распространением.
• Название W. Randolph Franklin не может использоваться для одобрения или продвижения продуктов, полученных на этом Программном обеспечении, без специального предварительного письменного разрешения.

ПРОГРАММНОЕ ОБЕСПЕЧЕНИЕ ПРЕДОСТАВЛЯЕТСЯ "КАК ЕСТЬ", БЕЗ КАКИХ-ЛИБО ГАРАНТИЙ, ЯВНЫХ ИЛИ ПОДРАЗУМЕВАЕМЫХ, ВКЛЮЧАЯ, НО НЕ ОГРАНИЧИВАЯСЬ ​​ГАРАНТИЯМИ КОММЕРЧЕСКОЙ ЦЕННОСТИ, ПРИГОДНОСТИ ДЛЯ ОПРЕДЕЛЕННОЙ ЦЕЛИ И НЕНАРУШЕНИЯ. НИ ПРИ КАКИХ ОБСТОЯТЕЛЬСТВАХ АВТОРЫ ИЛИ АВТОРСКИЕ ДЕРЖАТЕЛИ НЕ НЕСУТ ОТВЕТСТВЕННОСТИ ЗА ЛЮБЫЕ ПРЕТЕНЗИИ, УБЫТКИ ИЛИ ДРУГИЕ ОТВЕТСТВЕННОСТИ, КАКИЕ-ЛИБО ДЕЙСТВИЯ КОНТРАКТА, ДЕЙСТВИЯ ИЛИ ДРУГИХ, ВОЗНИКАЮЩИХ ИЗ НЕСОВЕРШЕННОЛЕТНИХ ИЛИ В СВЯЗИ С ПРОГРАММНЫМ ОБЕСПЕЧЕНИЕМ ИЛИ ИСПОЛЬЗОВАНИЕМ ИЛИ ДРУГИМИ ДЕЛАМИ В ПРОГРАММНОГО ОБЕСПЕЧЕНИЯ.

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 - количество вершин в многоугольнике. Будет ли повторение первой вершины в конце обсуждается ниже.
vertx, verty - Массивы, содержащие x- и y-координаты вершин многоугольника. testx, testy - X- и y-координаты контрольной точки.

Ответ 2

Для случая круга это очень просто, просто проверьте, не превышает ли расстояние от точки до центра радиус:

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

Для многоугольника самый простой способ - представить линию, идущую прямо вверх из точки. Если эта линия пересекает нечетное число границ полигона, ваша точка находится внутри полигона. (Он просто пересечет одну границу полигона для простого выпуклого многоугольника)

Вы также можете найти библиотеку геометрии третьей стороны, но она, скорее всего, займет у вас больше времени, чем сама кодировка.

Ответ 3

Я бы посмотрел на метод isPointInPath.

Это потребует, чтобы вы построили путь на элемент "canvas", но есть хороший шанс, что вы хотите сделать это так или иначе, чтобы его отобразить. Если вам не нужно отображать многоугольник на холсте, вы можете создать невидимый элемент canvas (создать его, но никогда не добавлять в 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);

Предполагая, что у вас есть массив объектов координат с x и y свойствами на них, приведенный выше код должен сказать вам, находится ли точка (50, 50) в пределах вашей фигуры.

Ответ 4

Круги просты, просто проверьте, что расстояние от точки до центра круга меньше радиуса круга с помощью Теорема Пифагора (см. также этот вопрос).

Полигоны более сложные. Эта статья ссылается на C-код, чтобы сделать это, что должно быть переведено в JavaScript.

Ответ 5

Я собрал пример с указанной выше функцией: 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 );
});