Обнаружение координат формы в Canvas

Question

Я пишу функцию перетаскивания в моем приложении HTML5 Canvas и задаюсь вопросом, как определить, нажимаю ли я на фигуру, отличную от прямоугольника или квадрата, и в этом случае я бы сделал что-то подобное внутри моего »Обработчик события mousedown:

if (evt._x> 13 && evt._x <202 ....) {} </p>

Я не понимаю, как легко сделать что-то подобное сдуга, подобная этой:

ctx.arc (25, 25, 20, 0, (Math.PI / 180) * 360);

Я надеюсь, что все ясно, заранее спасибо.

Answer 1

Просто используйте isPointInPath , который проверяет, находится ли заданная точка в текущем пути рисования.Если вы рисуете несколько фигур на холсте, то лучше всего связать каждую из ваших фигур со «скрытым» холстом, нарисовать каждый путь к соответствующему холсту, а затем проверить isPointInPath для каждого из них, сместив назначение / мышькоординаты по мере необходимости.Для этого нет причин прибегать к собственным расчетам.

Answer 2

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

Answer 3

Вы получите нужную формулу здесь , а также в Polygon статье Википедии.

Answer 4

Это может звучать глупо, но вы можете использовать <area> теги внутри <map> над <img> для создания интерактивных многоугольных форм.У них есть свои собственные клики / указатели мыши / и т.д.уже реализовано всеми браузерами.