HTML5 Canvas Вопрос | Отслеживание кликов - PullRequest
Новая
       7

HTML5 Canvas Вопрос | Отслеживание кликов

1 голос
/ 16 августа 2011

Недавно я начал баловаться с HTML5 и могучим холстом.Тем не менее, я пытаюсь что-то сделать, и я не уверен, как лучше всего справиться с этим.

Я пытаюсь создать случайно сгенерированный набор зданий с окнами, как вы можете видеть в следующемпример, который использует divs:

Пример использования Divs

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

Пример здания: 

function Building()
{
     this.floors  = Math.floor((Math.random()+1)*7); //Number of Floors
     this.windows = Math.floor((Math.random()+1)*3); //Windows per Floor
     this.height  = (this.floors*12);                //1px window padding 
     this.width   = (this.windows*12);               //1px window padding

     //Do I need to build an array with all of my windows and their locations
     //to determine if a click occurs?
}

Пример окна: 

function Window(x,y)
{
     this.x = x;    //X Coordinate 
     this.y = y;    //Y Coordinate
     this.color =   //Random color from a range
     this.hasPerson //Determines if a person in is the window
     this.hasObject //Determines if an object is in the window
}

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

ОБНОВЛЕНИЕ:

Я наконец-то смог заставить здания генерировать, как я искал, однако сейчасвсе, что мне нужно сделать, этосоздавать окна внутри зданий и отслеживать их местоположение.

Демонстрация создания зданий

Ответы [ 3 ]

2 голосов
/ 16 августа 2011

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

 canvasContext.beginPath()
 {
    (functions corresponding to your window path)
 }
canvasContext.closePath()
var isInWindow = canvasContext.isInPath(clicPosX,clicPosY);
1 голос
/ 16 августа 2011

На самом деле вы должны проверить, где нажата мышь, и если она находится в окне, то вызвать какую-то функцию. И да, вам нужно иметь массив местоположений.

Взгляните здесь

1 голос
/ 16 августа 2011

Нарисуйте свои квадраты, используя fillRect, сохраните их координаты северо-западной точки в массиве.Вам также понадобятся размеры этих прямоугольников, но так как они все равны квадратам - нет необходимости сохранять их в массиве.

Затем добавьте прослушиватель click к элементу canvas, в котором можно определить положение указателя с помощьюpageX / pageY минус положение элемента canvas.

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

if (((pageX > rectX && pageX < rectX + rectWidth) || (pageX < rectX && pageX > rectX + rectWidth))) &&
    ((pageY > rectY && pageY < rectY + rectHeight) || (pageY < rectY && pageY > rectY + rectHeight))) { 
    /* clicked on a window */
}

Демо .

...