Javascript 基于相对于矩形的两点创建CSS线性渐变

我正在尝试在草图中重新创建渐变工具。草图中的工具使用两个具有不同颜色的点来定义渐变：

我希望输出是CSS线性渐变值的形式。CSS线性渐变的构造方式是定义颜色和百分比的角度和x个颜色停止点：

因此，我想将两个相对于矩形的点转换为CSS格式（两个具有正确百分比的参数）

---

关于如何解决这个问题有什么想法吗？

没有通用公式，但您必须进行一些操作/计算，以找到渐变的程度以及渐变的背景大小

让我们从一个简单的例子开始：

这里我们有一个梯度，

180deg

（或

0deg

）。起点是顶部的

50px

，终点是底部的

100px

。考虑到这一点，我们将有以下梯度：

.box{
宽度：200px；
高度：100px；
边框：1px实心；
利润率：20px；
背景图像：线性梯度（180度，白色，黑色）；
背景尺寸：100%计算（100%+50px+100px）；
背景位置：0-50px；
背景重复：无重复；
}

---

这就是我解决问题的方法

如果你看我附上的GIF，它说明了我在计算中使用的点。红线是矩形中心的渐变线，黑点是渐变线的起点和终点。另外两个点（黑色和白色）是用户控制的点，用户可以随意拖动。两个红点是线上相对于每个用户控制点（垂直线点p1和p2）最近的位置

我得到垂直线点和梯度线起点和终点之间的距离。然后，为了计算CSS线性渐变值所需的百分比值，我将两个距离相加，除以渐变线长度，再乘以100

ax = ((p1.x - gradientLine.point1.x) * (gradientLine.length / 2)) / (gradientLine.point2.x - gradientLine.point1.x);
ay = ((p1.y - gradientLine.point1.y) * (gradientLine.length / 2)) / (gradientLine.point2.y - gradientLine.point1.y);

percentValue = (((ax + ay) / line.length) * 100);

为了得到线性梯度值中第二个参数的值，我做了类似的事情，除了用计算值减去100

ax = ((p2.x - gradientLine.point2.x) * (gradientLine.length / 2)) / (gradientLine.point1.x - gradientLine.point2.x);
ay = ((p2.y - gradientLine.point2.y) * (gradientLine.length / 2)) / (gradientLine.point1.y - gradientLine.point2.y);
percentValue = 100 - ((((ax + ay) / gradientLine.length) * 100));

通过这种方式，我可以得到2%的值，并且可以轻松构建CSS线性渐变值，该值由两个用户控制点的角度加上我计算的2%值组成：

background: linear-gradient([angle]deg, black [percentValue1]%, white [percentValue2]%)

---

请参阅。角度是一样的，你可以沿着这个角度移动线而不改变梯度，所以把它移动到梯度线，看看点之间是如何比较的。非常感谢你的深入回复！我没有想过改变背景的大小。这是唯一的办法吗？仅使用线性渐变定义是无法实现的？@user3449608如您所见，这取决于具体情况。如果你的点在渐变区域内，你可以，如果不是，你必须调整大小，或者有另一个棘手的方法是找到内部最近的点来使用，但为此你必须找到颜色[我希望你得到我的点，如果不是，我可以将其添加到anwser]@user3449608，我添加了另一种方法来避免使用背景大小；）是的，除了我不计算颜色值。