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

Question

Любой знает, как проверить, щелкает ли мышь внутри круга или многоугольника. Моя проблема в том, что я хочу проверить, была ли мышь нажата внутри круга или многоугольника. координаты окружности или многоугольника были сохранены внутри массива. Любая помощь очень ценится

Answer 1

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

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

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

1. При повторном распространении исходного кода должно сохраняться указанное выше уведомление об авторском праве, этот список условий и следующие отказы от ответственности.
2. При повторном распространении в двоичной форме должно быть воспроизведено указанное выше уведомление об авторских правах в документации и / или других материалах, поставляемых при распространении.
3. Имя 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-координата контрольной точки.

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

Я бы взглянул на метод isPointInPath .

Это потребует от вас наложить путь на элемент '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) в пределах вашей фигуры.

Answer 4

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

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

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