Question

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

我正在尝试使用窗口制作一组随机生成的建筑物，您可以在下面的示例中看到使用div：

我想出的问题是，我希望能够在这些建筑物的窗户中随机生成图像/内容，并且能够在单击窗口时轻松捕获，但我不知道如何用画布来处理它。

示例构建：

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
}

摘要：我正在尝试使用Windows生成随机建筑物，但我不确定如何构建它们，使用画布显示它们并跟踪窗口位置。

UPDATE：

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

Building Generation Demo

Answer 1

我想如果你正在绘制窗口，你已经有了创建画布路径的功能。
所以你可以在所有窗口上应用isPointInPath函数来确定用户是否点击了一个窗口。

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

Answer 2

使用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 3

Actualy你必须检查点击鼠标的位置，如果它在窗口中，那么调用一些功能。是的，你需要有阵列阵列。

看看here

HTML5画布问题|点击跟踪

UPDATE：

3 个答案: