点对点线性渐变？

Question

我想制作一个可以生成点对点渐变的应用程序（就像 Photoshop 那样）。我熟悉如何生成从上到下的渐变，但不熟悉如何生成点到点的渐变。这在概念上是如何完成的。

谢谢

Answer 1

我不能说这是否正是 Photoshop 的做法，或者说这是最佳的做法，但这应该是基本原则。

将这两个点视为定义一个向量。您可以为此找到一个法向量，它将垂直于原始向量（因为这是法向量的定义）。

对于线上的每个离散点（像素），计算渐变颜色，就像计算与向量长度相同的上下（或左右）渐变一样。然后绘制一条所选颜色的线，使其穿过当前所选点并与法线向量平行。

它实际上与用于上下渐变的方法非常相似，只是它是旋转的。

Answer 2

基于迈克尔·马德森的答案 -

对于您要填充的区域中的每个点，计算线段上最近的点。 （你必须用 google 搜索一下，但有很多例子。）在计算最近点的某个时刻，计算出的值范围从起点处的 0 到终点处的 1。将其插入到您的梯度函数中。

该算法的概述基本上是...

pc = # the point you are coloring now
p0 = # start point
p1 = # end point
v = p1 - p0
d = Length(v)
v = Normalize(v) # or Scale(v, 1/d)

v0 = pc - p0

t = Dot(v0, v)
t = Clamp(t/d, 0, 1)

color = (start_color * t) + (end_color * (1 - t))

如果将 v 按 1/d^2 而​​不是 1/d 缩放，实际上您可能会丢失 make t/d 只是 t。但无论如何...我想这会让你到达那里。也许显然，前半部分是“静态的”，因此您只需要循环最后四行。

Answer 3

此例程使用适当的值调用图像中每个点的函子。使用该值作为颜色查找表的索引，您将获得混合效果。 Functor 有这样的原型：void(int x, int y, int value)。

/** Produce a linear gradient.

    This implementation uses float values.
*/
struct Linearf
{
  template <class Functor>
  void operator() (
    int rows,
    int cols,
    int x0, int y0,
    int x1, int y1,
    int const scale,
    Functor f)
  {
    if (x0 != x1)
    {
      // 1/m'
      float const m = float (y1 - y0) / (x0 - x1);

      for (int y = 0; y < rows; ++y)
      {
        float const p0 = m * (y - y0) + x0;
        float const p1 = m * (y - y1) + x1;
        float const d = (scale + 0.9999f) / (p1 - p0);

        for (int x = 0; x < cols; ++x)
        {
          if (x < p0)
          {
            f (x, y, 0);
          }
          else if (x >= p1)
          {
            f (x, y, scale);
          }
          else
          {
            f (x, y, d * (x - p0));
          }
        }
      }
    }
    else
    {
      // Special case for horizontal lines.
    }
  }