获取线周围框的坐标

Question

我一直在使用JavaScript来编写一个绘图系统。我希望绘制的线条是可选择的，所以我一直在尝试实现线条突出显示。正如您在下图所示，我有一条已知坐标的线（黑色）和斜率截距方程（y = mx + b）。如何知道盒子的半径？（/ p>），如何计算角落（以绿色圈出）坐标？

Answer 1

从矢量方面来看，这是最容易想到的。

首先将该行末尾的点定义为A，将另一端定义为B

var A = new Vector(1, 1)
var B = new Vector(5, 3)

现在找到直线的单位方向向量（长度为1的向量从A指向B）及其垂直方向：

var dir = B.minus(A).normalize();
var dir_perp = new Vector(dir.y, -dir.x)

并将它们扩展为thickness的长度：

dir = dir.times(thickness);
dir_perp = dir_perp.times(thickness)

然后是四个角落：

[
    A.minus(dir).plus(dir_perp),
    A.minus(dir).minus(dir_perp),
    B.plus(dir).minus(dir_perp),
    B.plus(dir).plus(dir_perp)
]

这显然假设你有某种矢量数学库。 Here's one I made earlier