Question

== Crux ==
如何根据五边形的（x，y）坐标优雅地定义五个等面积可点击区域？

==上下文==
我有一个可点击的精灵用于使用Phaser的javascript游戏。精灵的形状像五边形，每个顶点定义的领土是五角大楼区域的五分之一。当用户在区域内单击时，事件处理程序为该区域调用适当的函数并返回在区域内单击的（x，y）位置。

我是一名新手javascript程序员，如果可能的话，他想学习如何（以及为什么）编写elegant code。我可以做一点数学。通常，可点击区域被定义为矩形，但这是一种特殊情况。图形的五重对称是游戏主题（Five Elements Gong Fu）不可或缺的一部分。

根据坐标定义这些可点击区域的好方法是什么？我觉得好像有一些计算机数学公式 - 魔法（可以想到这将依赖于对称性以某种方式以优雅的方式定义坐标，但我还没有能够确定一个。< / p>

此外，图形居中于矩形的png文件中。我需要以某种方式将五角大楼邻域的坐标转换为画布的坐标，以便用户可以感觉到他们正在点击相应的区域。

修改
== Crappy Graphic ==
理想情况下，五边形将对称绘制，但我只是粗暴对待。像这样：

如何定义邻域A的（x，y）坐标，以便用户可以单击区域A并调用Function_for_region_A（处理程序）？

Answer 1

我对移相器一无所知，所以这里只有javascrip。您可以旋转整个画布，并在完成后将其重新设置为正常角度。因此，当旋转时，区域变为正方形，这使得代码和编程更简单。我认为你必须将画布旋转60°以获得正方形，但我不确定。我不确定这是不是正确的，所以请不要嘲笑我或者从我身上带走点数xD，这对我来说真的真的很复杂。这是代码：`

var ctx = document.getElementById("canvasId").getContext("2d");
//code to draw the the pentagon here
var regionA = { //Because the canvas rotates, the x and y points change, so it must have other destination points.
   x : pointToTheLeftInRegionA.x,
   y : pointToTheLeftInRegionA.y - pointAtTopInRegionA.y / 2
}
function canvasWhenClicked(event) { //Function called when : "<canvas onclick="canvasWhenClicked(event)" ...></canvas>"
    var X = event.clientX;  //Finds x coordinates of where you clicked
    var Y = event.clientY;  //Finds x coordinates of where you clicked
    ctx.rotate(60 * Math.PI / 180);
    if (X > regionA.x && X < regionA.width + regioA.x) { //Sees if the X where clicked is bigger than regionA's X and smaller than regionA X + width
       if (Y > regionA.y && Y < regionA.height + regionA.y) { //Sees if the Y where clicked is bigger than regionA's Y and smaller than regionA X + height
          Function_for_region_A(handler); //If clicked in box, call function
       }
    }
    ctx.rotate((360 - 60) * Math.PI / 180); //rotate the canvas back
}

在javascript Phaser画布中通过（x，y）坐标定义可点击区域

1 个答案: