javascript - 将一个矩形分成四个可点击（或悬停）三角形

Question

在继续阅读之前，我的问题是知道找到对象高度/宽度/位置的最佳方法是什么，因为这似乎存在一些冲突。之后，我将需要有关如何使用先前获得的数据来执行以下列表中的第 4 项的帮助。在那之后，我需要5号的帮助。我希望逐步做到这一点，所以请多多包涵。

我找到了如何将一个正方形分成两个相等的三角形可点击区域的代码（一个正方形内的两个三角形可点击区域）。老实说，我并不太了解代码在做什么。我的问题是将代表可见屏幕区域的矩形细分为四个可点击区域，想象它的对角线被绘制。我确实发现这非常有用（伪）-伪代码：

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

2. 在 javascript 中创建一个变量 square 来保存 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 > Math.abs(y)，那么你在左三角形
4. 如果 -y > Math.abs(x)，那么你在底部三角形

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