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

【问题标题】：Defining clickable regions by (x,y) coords in javascript Phaser canvas在javascript Phaser画布中通过（x，y）坐标定义可点击区域
【发布时间】：2015-12-29 22:02:39
【问题描述】：

==关键==
如何根据 (x,y) 坐标优雅地定义五边形的五个等面积可点击区域？

==上下文==
我有一个使用 Phaser 的 javascript 游戏的可点击精灵。精灵的形状像一个五边形，每个顶点都定义了一个五边形面积五分之一的区域。当用户在区域内单击时，事件处理程序调用该区域的适当函数并返回在该区域内单击的 (x,y) 位置。

我是一名 JavaScript 程序员新手，如果可能的话，我想了解如何（以及为什么）编写 elegant code。我可以做一点数学。通常，可点击区域被定义为矩形，但这是一种特殊情况。图形的五重对称是游戏主题（五行功夫）的组成部分。

根据坐标定义这些可点击区域的好方法是什么？我觉得好像有一些计算机数学公式向导（可以认为它会依赖对称性以某种优雅的方式定义坐标，但我无法确定一个。

此外，图形在一个矩形的 png 文件中居中。我需要以某种方式将五边形邻域的坐标转换为画布的坐标，以便用户能够感觉到他们正在单击适当的区域。

编辑
==Crappy Graphic==
理想情况下，五边形会对称绘制，但我只是粗略地画了。像这样：

如何定义邻域 A 的 (x,y) 坐标，以便用户可以单击区域 A 并调用 Function_for_region_A(handler)？

【问题讨论】：

你能帮忙提供一些图形/图像吗？
这是我设置的一个演示，可能会对您有所帮助：JSFiddle Demo。这个想法是使用barycentric coordinate system 来查找一个点是否在三角形内。我的演示使用 Canvas API 绘制所有形状，并在五边形顶部嵌入图像。我认为这是您想要完成的工作的良好开端。
@KostasX 您不仅发现了一种优雅的方法（将五边形划分为五个三角形很明显），而且您基本上在 jsfiddle 中编写了所有相关部分。如果我有一家软件公司，我会雇用你。谢谢。

标签： javascript math canvas event-handling polygons

【解决方案1】：

我对phaser一无所知，所以这里只有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
}

【讨论】：