javascript - 获取线框坐标

Question

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

Answer 1

就向量而言，这是最容易想到的。

首先将线末端的点定义为A，将另一端定义为B

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

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

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)
]

这显然假设您有某种矢量数学库。这是我之前做的一个