Нахождение координат x / y, которые попадают в заполненные дуги холста - PullRequest
Новая
       35

Нахождение координат x / y, которые попадают в заполненные дуги холста

3 голосов
/ 22 сентября 2011

Вот скрипка

Дуги, которые я нарисовал за пределами круга - я хотел бы знать, как найти все координаты x / y, которые они охватывают, чтобы мне не приходилось каждый раз перерисовывать их, используя isPointInPath (), чтобы определить, находится ли курсор мыши над ними или нет. Я думал о том, чтобы записать все координаты x / y в массив, который я мог бы сравнить с координатами x / y положения мыши, и если я найду совпадение, я изменю курсор. Проблема в том, что я не знаю код для получения всех значений x / y.

Ответы [ 4 ]

3 голосов
/ 23 сентября 2011

На самом деле вам не нужно перерисовывать ваши дуги, чтобы использовать .isPointInPath() - просто пропустите все вызовы .fill() или .stroke(), и у вас будет путь, который вы можете использовать, чтобы проверить, содержит ли он точку .

Я бы предложил иметь одну функцию, которая очерчивает путь дуги (.beginPath(), команды пути, .closePath()), а затем две функции, которые ее вызывают - одна, которая вызывает функцию пути дуги, затем устанавливает стиль заливки и заливки. путь для его прорисовки, и другой, который вызывает функцию пути дуги, а затем просто проверяет, находится ли точка в пути.

3 голосов
/ 22 сентября 2011

Это метод, который вы должны использовать: http://en.wikipedia.org/wiki/Point_in_polygon

enter image description here

Как это работает, на самом деле чрезвычайно просто: если количество раз, когда луч, который заканчивается в любой точке, проходит через периметр многоугольника, является четным, соответствующая точка ДОЛЖНА быть вне многоугольника. Если это странно, это внутри многоугольника.

Вот функция, найденная Pimvdb: 

function isPointInPoly(poly, pt){
    for(var c = false, i = -1, l = poly.length, j = l - 1; ++i < l; j = i)
        ((poly[i].y <= pt.y && pt.y < poly[j].y) || (poly[j].y <= pt.y && pt.y < poly[i].y))
        && (pt.x < (poly[j].x - poly[i].x) * (pt.y - poly[i].y) / (poly[j].y - poly[i].y) + poly[i].x)
        && (c = !c);
    return c;
}
0 голосов
/ 22 сентября 2011

Вот более простой способ:

Я изменил функцию drawtabs, чтобы также проверить, находится ли мышь во вкладке: http://jsfiddle.net/kkDqz/4/

ПРЕДУПРЕЖДЕНИЕ

Этот метод прост, но требует перерисовки EVERYTHING при перемещении мыши.

0 голосов
/ 22 сентября 2011

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

  1. Рассчитать центр круга из конечных точек и радиуса.
    1. Если точка ближе к центру, чем близкая дуга (расстояние до центра в квадрате больше, чем квадрат ближнего радиуса), тогда вернуть false.
    2. Если точка находится дальше от центра, чем дальняя дуга, вернуть false.
  2. Рассчитайте начальный и конечный углы для конечных точек ваших прямоугольников относительно центра круга. (Подсказка: Math.atan2)
    1. Рассчитать угол для точки относительно центра круга. Если это не между углами для конечных точек, верните false.
      • Остерегайтесь конечных точек, которые пересекают значения переноса для Math.atan2.
  3. Вернуть true, если другие тесты пройдены.

Вы не можете рассчитать «все» точки в этом регионе, так как их бесконечное количество. Создание таблицы поиска со всеми целочисленными пиксельными координатами в вашем изображении возможно, но расточительно.

Что бы I сделал бы вместо того, что вы предлагаете, это использовать графическую систему с сохранением режима (подсказка: SVG) и позволил ей отслеживать события мыши для меня, используя гораздо более эффективный код.

...