HTML5 画布问题 |点击跟踪

Question

最近，我开始涉足 HTML5 和强大的画布。但是，我正在尝试完成某件事，但我不确定处理它的最佳方法是什么。

我正在尝试制作一组​​随机生成的带有窗户的建筑物，如以下使用 div 的示例所示：

Example Using 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
}

总结：我正在尝试生成带有窗户的随机建筑物，但是我不确定如何构建它们、显示它们并使用画布跟踪窗户位置。

更新：

我终于能够按照我的要求生成建筑物，但现在我需要做的就是在建筑物内生成窗户并跟踪它们的位置。

Building Generation Demo

Answer 1

使用fillRect 绘制正方形，将它们的西北点坐标存储到数组中。您还需要这些矩形的尺寸，但由于它们都是相等的正方形 - 无需将它们存储在数组中。

然后给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 */
}

Demo.

Answer 2

实际上，您必须检查鼠标单击的位置，如果它在窗口中，则调用一些函数。是的，你需要有一个位置数组。

看看here

Answer 3

我猜如果您正在绘制窗口，您已经拥有创建画布路径的功能。
因此您可以在所有窗口上应用isPointInPath 函数，以确定用户是否单击了窗口。

 canvasContext.beginPath()
 {
    (functions corresponding to your window path)
 }
canvasContext.closePath()
var isInWindow = canvasContext.isInPath(clicPosX,clicPosY);