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;

等

两点之间的线性渐变

1 个答案: