梯度平行四边形

Question

我正在使用画布上的JavaScript绘图，并且有四个坐标来绘制平行四边形，从左上角，右上角，左下角和右下角开始称为A，B，C和D.分别。

某些坐标的示例可能是：

答：（3,3）

B：（4,3）

C：（1,0）

D：（2,0）

我可以很好地绘制平行四边形，但我想用渐变填充它。我希望渐变从左到右填充，但匹配形状的角度。我使用的库（CAKE）需要渐变的开始和停止坐标。我的停止和开始将在A和C之间的某个位置，并在B和D之间的某个位置结束。当然，它不是简单的一半，因为A，B，C和D处的角度不是直角。所以给定这个信息（坐标），我如何找到A - ＆gt;线上的点。 C开始，并且B线上的点 - > D停下来？

请记住，我是用JavaScript做的，所以我有一些很好的数学工具供我计算。

Answer 1

您在评论中指定的内容可用于更多信息（例如，您需要指定垂直线的开始位置，因为这会影响您的渐变），但我认为它不会让您得到您想要的东西。< / p>

相反，请以下面的例子为例，我认为这更接近你所追求的目标：

如您所见，要为上述平行四边形制作渐变，我们忽略 AC 和 BD 边，并使渐变相对于 AB 和 CD 。您可以决定使用哪一对边，但我可能会按照长度进行调整以使显示在所有平行四边形中保持一致（要么您想要相对于一对较长边的渐变，要么想要较短的一边，您的选择，但是我会选择较长的一面）。

假设您选择 AB 。垂直于 AB 的直线的斜率是 AB 斜率的倒数倒数，即(ax-bx)/(by-ay)（注意这里除以零的情况！） 。

接下来，您必须找到2个渐变点，这将是具有该斜率的任何线上的两个适当点。一种选择是选择通过 A 的行，使用 A 作为起点，并使用与 CD 相交的点作为结束点（您可以使用this page作为确定交叉点的指南）。否则，保持斜率，但根据自己的喜好调整点数，以获得所需的渐变。

获得渐变后的积分，将它们插入并且它是一块蛋糕！