将矩形划分为四个可点击（或悬停）三角形

Question

在阅读之前，我的问题是要知道找到对象高度/宽度/位置的最佳方法是什么，因为似乎存在一些冲突。 之后，我将需要帮助，如何使用以前获得的数据在下面的列表中做4号。在那之后，我需要第5号的帮助。我希望逐渐这样做，所以请耐心等待。

我找到了如何将一个正方形划分为两个相等的三角形可点击区域（Two triangular clickable area within a square）的代码。说实话，我对代码的作用并不是很了解。我的问题是将表示可见屏幕区域的矩形细分为四个可点击区域，想象它的对角线是否被绘制。 我确实发现这非常有用（伪）-pseudocode：

1. 创建一个div并将其设计为方形。使用背景图像来说明三角形

2. 在javascript中创建一个变量square，以保存方形元素

3. 在js中获取正方形的位置，高度和宽度

4. 做一些数学运算来确定每个三角形顶点的坐标

5. 编写一个函数getQuadrant()，用于确定正方形内任何给定点所在的三角形

6. 添加事件侦听器以点击广场上的事件。事件监听器应该调用getQuadrant函数

7. 使用开关/案例执行您需要调用的任何代码条件点击点击的哪个象限

我不会马上要求完整的代码，我想在这个过程中学习。有人可以帮助我指出哪些方法用于数字3和4？而且我很可能也需要第5号的帮助。

感谢您的帮助！ =）

ķ

Answer 1

如果翻译所有内容以使正方形的中心为原点，则三角形的边框由线x == y和x == -y定义。您可以根据该关系建立象限分类：

1. 如果x> Math.abs（y），那么你就是右三角形
2. 如果y> Math.abs（x），然后你在顶部三角形
3. 如果-x＆gt; Math.abs（y），然后你在左三角形
4. 如果-y＆gt; Math.abs（x），然后你在底部三角形

可以在两个（或四个，如果x == y == 0）最近三角形之间任意解决关系。