画一个像Fresh Paint一样的颜色选择器

Question

我喜欢Fresh Paint的色环外观，并希望在我的传入项目中克隆它。但是，我找不到圆形的HSV或RGB分布的模式。这是一个例子：

我猜右边的滑块是H值从0到360.但是我不知道如何用这个H值制作圆圈。请告诉我它的公式/模式。

Answer 1

我还没有看到它在行动，但看起来他们正在使用色度而不是饱和度，并且已经将亮度和色度映射到（排序）极坐标。因此，色度随着距中心的距离而变化，值/亮度随y坐标而变化。

基本上结果是圆圈的中间是明亮的，完全饱和的颜色，边缘是灰度。颜色从中心到边缘进行线性插值。

我原本以为这可能是直极坐标，但我怀疑它被简化为只使用y代替角度。

基本上，边缘处的去饱和灰度是从上到下的线性白色到黑色渐变（不随角度变化，如极坐标那样）。中心的颜色是饱和颜色，侧面是色调选择器，然后是两者之间的线性插值。

所以在伪代码中：

let x, y be points in the circle, range -1 to 1.
let red, grn, blu be the center colour value.
let lerp(a, b, t) = (a * (1 - t) + b * t)

r = sqrt(x * x + y *y)               // calculate radial co-ordinate
                                     // reject points r > 1 (outside circle)
grey_value = (y + 1) / 2             // calculate de-saturated value, 0 to 1.
final_red = lerp(red, grey_value, r) // lerp the RGB from the center to the edge.
final_grn = lerp(grn, grey_value, r)
final_blu = lerp(blu, grey_value, r)

显然，这不是特别优化，并且不会绘制出良好的抗锯齿边缘。预先计算具有灰度梯度的纹理和基于'r'的alpha蒙版可能会快得多，它可以在平坦的圆圈上进行alpha混合。

Answer 2

在我看来，Y轴很轻，底部为黑色，顶部为白色，X轴为饱和，中心完全饱和，每个边缘完全去饱和。当然这会给你一个正方形，所以你需要将它映射到一个圆圈。在数学中输入优秀的人：https://math.stackexchange.com/questions/103660/homeomorphism-from-square-to-unit-circle