javascript - 给定 RGB 值数组，如何计算颜色 slider 上的 Y 位置

Question

我目前使用以下代码将颜色 slider 渐变渲染到 Canvas 元素上:

 var colorgrad = self.cache.colorctx.createLinearGradient(0, 0, 0, self.cache.colorpicker.height);
        colorgrad.addColorStop(0, 'red'); //red
        colorgrad.addColorStop(1 / 6, 'yellow'); //yellow
        colorgrad.addColorStop(2 / 6, 'lime') // green
        colorgrad.addColorStop(3 / 6, 'aqua'); // aqua
        colorgrad.addColorStop(4 / 6, 'blue'); //blue
        colorgrad.addColorStop(5 / 6, 'magenta'); // pink
        colorgrad.addColorStop(1, 'red'); //red
        self.cache.colorctx.fillStyle = colorgrad;
        self.cache.colorctx.fillRect(0, 0, 60, self.cache.colorpicker.height);

        self.cache.colourdata = self.cache.colorctx.getImageData(0, 0, 1, self.cache.colorpicker.height).data;

这将创建一个渐变，该渐变从色轮中一直绘制到红色，并生成如下图像:

当用户移动图像顶部的圆形 Controller 时，我会根据缓存的图像像素数据检查 Controller 的 Y 位置，生成一个返回十六进制/RGB 值的简单颜色选择器。

现在我可以根据用户输入进行颜色提取，我还需要能够获取十六进制颜色值并计算出控件的 top 值。因此，从本质上讲，反转技术。但我似乎无法弄清楚要使用的正确算法。

我有一个有效的hex to RGB函数，因此颜色输入可以被视为rgb值的数组:

colour : {
        r : 255,
        g : 255,
        b : 255
}

总而言之，当知道上面图像的像素高度时，在提供 RGB 值数组的情况下，如何计算该图像中给定颜色的 y 位置？

提前致谢。

Answer 1

您可以将 RGB 颜色转换为 HSV这将为您提供从 0°( slider 顶部)到 360°( slider 底部)的颜色值 (H)。
这样您就可以根据 slider 的大小计算 y 位置(height/360 * H)