Холст HTML5: узнайте, ли координаты щелчка в данном прямоугольнике

Question

Холст HTML5: узнайте, ли координаты щелчка в данном прямоугольнике

Может быть кто-то, имел подобные события в этой дилемме и может помочь мне здесь...

В основном у меня есть элемент холста, на котором я тяну несколько прямоугольников в использовании цикла

context.fillRect (x, y, width, height)

Теперь, я хочу, чтобы некоторые прямоугольники были горячими точками и ответили на события щелчка. Я могу узнать точное (x, y) использования события щелчка event.layerX и event.layerY.

Учитывая, что я знаю следующее:

точный x, y щелчка
x, y, ширина и высота каждого прямоугольника

как я узнаю, имело ли событие щелчка место в периметре определенный прямоугольник или нет?
и,
какой прямоугольник событие щелчка имело место 0n?

Там похож на математическую формулу для этого?

Любая справка очень ценилась бы, и если я не достаточно ясен, сообщить мне...

Спасибо

Править
Нет ли никакой лучший путь, чем циклично выполниться через все прямоугольники и проверить их положение и размеры?

5

javascript events canvas

задан ekhaled 7 July 2010 в 13:34

2 ответа

Другие вопросы по тегам:

javascript events canvas

Похожие вопросы:

score 1 · Answer 1

Это может быть излишним, но Cake JS выполнит работу с прямоугольниками и другими формами. Посмотрите демонстрацию .

score 1 · Answer 2

Грубо говоря, можно сделать так:

var click_x = event.layerX;
var click_y = event.layerY;

for ( var i = 0; i < rects.length; i++ ) {
    var rect = rects[i];
    if ( click_x >= rect.x && click_x <= rect.x + rect.width
    &&   click_y >= rect.y && click_y <= rect.y + rect.height ) {
        // The click was inside the rectange
    }
}

Предполагая, что мы имеем дело с неотрицательными шириной и высотой :)