两点之间的线性梯度

Question

我正在尝试在我的像素栅格上生成线性渐变。我在处理 2.0 时这样做——这主要是 Java，但有一些额外的类和变量。我已经有了做径向渐变的功能：

/* For every pixel */
  distance = dist(centerX,centerY, x,y); //calculate distance between position and center of gradient
  lerpValue = norm(distance, 0, maxRadius) //normalize this value between 0 and the give maximum radius
  color = lerpColor(startColor, endColor, lerpValue ); //calculate Color
/*end for*/

这比我想象的要容易。然后我试图做一个从一个点到另一个点的渐变，我不知道如何计算这个。当然，水平或垂直渐变是没有问题的，但在两点内，线可以是任何角度。 我已经找到了类似问题的答案，但实际上我不明白。有人会向我解释这种计算是如何可能的 - 用简单的语言描述吗？请解释你在做什么，因为我想理解它，而不仅仅是复制它。如果您编写代码，请给变量起个好名字。我知道编写单个字符名称会更快，但我并不总是知道它们到底是什么。 哦，计算应该是每个像素的像素，因为我认为每 x 步旋转线条并绘制它们非常慢，并且可能导致丑陋的结果（使用抗锯齿的错误颜色，没有楼梯的楼梯）。 我希望我不要问太多，但正如我所说，我真的很想了解它是如何工作的，如果我不得不猜测，那就很难了。变量名是什么意思..

Answer 1

这实际上很简单，和你对水平和垂直渐变所做的类似。

确切的数学计算会根据您希望渐变显示的确切方式而有所不同 - 但基本上您对垂直和水平渐变执行相同的操作，但将 X 和 Y 组合到其中。

你计算出垂直距离和水平距离。我们称它们为 v 和 h。

然后您将它们组合起来以给出总距离并将其用作您的 lerpValue。

例如让宽度和高度具有相同的贡献

lerpValue = 0.5*v + 0.5*h;

让高度的贡献是宽度的两倍：

lerpValue = 0.33*v + 0.67*h;

即使您填充的是矩形而不是正方形，也要制作渐变：

double ratio = width/height;

lerpValue = ratio*v + (1-ratio)*h;

等等