Recientemente, comencé a incursionar en HTML5 y el poderoso lienzo. Sin embargo, estoy tratando de lograr algo y no estoy seguro de cuál sería la mejor manera de manejarlo.

Estoy tratando de hacer un conjunto de edificios generados aleatoriamente con ventanas, como puede ver en el siguiente ejemplo que usa divs:

Ejemplo usando Divs

El problema que se me ocurre es que quiero poder generar aleatoriamente imágenes / contenido en las ventanas de estos edificios y poder capturar fácilmente cuando se hace clic en una ventana, pero no estoy seguro de cómo manejarlo. usando el lienzo.

Ejemplo de construcción:

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?
}

Ventana de ejemplo:

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
}

Resumen: Estoy tratando de generar edificios aleatorios con ventanas, sin embargo, no estoy seguro de cómo construirlos, mostrarlos y rastrear ubicaciones de ventanas usando el lienzo.

Actualizar:

Finalmente pude lograr que los edificios se generaran como estaba buscando, sin embargo, ahora todo lo que necesito hacer es generar las ventanas dentro de los edificios y realizar un seguimiento de sus ubicaciones.

Demostración de generación de edificios

1
Rion Williams 16 ago. 2011 a las 17:33

3 respuestas

La mejor respuesta

Supongo que si está dibujando la ventana, ya tiene la función de crear su ruta de lienzo.
Para que pueda aplicar el isPointInPath en todas las ventanas debe determinar si el usuario hizo clic en una ventana. < br />

 canvasContext.beginPath()
 {
    (functions corresponding to your window path)
 }
canvasContext.closePath()
var isInWindow = canvasContext.isInPath(clicPosX,clicPosY);
2
F-A 16 ago. 2011 a las 15:45

En realidad, debe verificar dónde se hace clic con el mouse y, si está en la ventana, llamar a alguna función. Y sí, necesitará tener una matriz de ubicaciones.

Eche un vistazo aquí

1
Ernestas Stankevičius 16 ago. 2011 a las 14:13

Dibuje sus cuadrados usando fillRect, almacene sus coordenadas del punto noroeste en una matriz. También necesitará las dimensiones de estos rectángulos, pero dado que todos son cuadrados iguales, no es necesario almacenarlos en la matriz.

Luego, agregue un escucha de clics al elemento del lienzo, en el que se detecta la posición del puntero a través de {{X0} } / pageY menos la posición del lienzo elemento.

Luego, en cada clic, recorra la matriz de rectángulos y vea si contienen las coordenadas del puntero:

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 */
}

Demo.

1
katspaugh 16 ago. 2011 a las 14:39