线性渐变带角度和力量

我想实现在C++/REALbasic的一个函数来创建由参数颜色梯度：线性渐变带角度和力量

宽度和高度的图像的梯度的
2色
梯度的角度（方向）
梯度

以下链接显示所期望的输出I的一些实例中的强度法师： http://www.artima.com/articles/linear_gradients_in_flex_4.html,http://i.stack.imgur.com/4ssfj.png

我发现了多个例子，但他们只给我垂直和水平渐变，而我也想指定角度和强度。

有人可以帮我吗？

P.S .:我只知道几何关于几何！ :(

来源

2016-09-29 Joseph86

请[编辑]你的问题，以显示[你有什么到目前为止已经试过（HTTP：// whathaveyoutried .COM）。您应该包含您遇到问题的代码[mcve]，然后我们可以尝试帮助解决特定问题。你还应该阅读[问]。 –

我不确定你的意思是“强度”。整个渐变的不透明度，即alpha？ – plasmacel

你的问题是非常广泛的，因为这是一个非常复杂的练习，包含很多代码，包括图像渲染，图像格式处理，将文件写入磁盘等。这些不是单一的问题功能。由于这一点，我致力于使2个色的任意的线性颜色渐变。

线性颜色梯度

可以通过颜色linear interpolation 2之间建立一个线性颜色“梯度”。然而简单的线性内插使得真正看起来非常苛刻的过渡。对于视觉上更具吸引力的结果，我建议使用某种S-shaped插值曲线，如基于Hermite插值的smoothstep。

关于角度，则可以通过开始（p0）和结束（p1）的颜色梯度的点限定的线段。我们称它们之间的距离为d01，所以d01 = distance(p0, p1)。然后，对于图像的每个像素点p，您必须计算该段上的最近点p2。 Here is an example该怎么做。然后计算t = distance(p0, p2)/d01。这将是[0，1]范围内的杠杆参数t。通过此t在2渐变颜色之间进行插值，并获得了给定点p的颜色。

这可以通过多种方式实现。您可以使用OpenGL渲染图像，然后将像素缓冲区读回RAM。如果您不熟悉OpenGL或渲染过程，您可以编写一个函数，该函数需要一个点（像素的二维坐标）并返回RGB颜色 - 因此您可以计算图像的所有像素。最后，您可以使用图像格式将图像写入磁盘，但这是另一回事。

以下是上述某些函数的示例C++ 14实现。

简单的线性插值：

template <typename T, typename U> 
T lerp(const T &a, const T &b, const U &t) 
{ 
    return (U(1) - t)*a + t*b; 
}

，想要之间进行内插，其中a和b是（在此情况下颜色）的两个值，并且t是在范围[0插值参数， 1]表示a和b之间的转换。

当然，上述功能需要支持乘以标量的类型T。您可以简单地为此使用任何3D矢量类型，因为颜色实际上是在色彩空间中的坐标。

两个2D点之间的距离：

#include <cmath> 

auto length(const Point2 &p) 
{ 
    return std::sqrt(p.x*p.x + p.y*p.y); 
} 

auto distance(const Point2 &a, const Point2 &b) 
{ 
    Point delta = b - a; 
    return length(delta); 
}

图片来自https://developer.mozilla.org/en-US/docs/Web/CSS/linear-gradient

来源

2016-09-29 21:37:41 plasmacel

非常感谢您的完整和详尽的解释！ :) – Joseph86

线性渐变带角度和力量

回答

相关问题