在给定RGB值数组的情况下，如何计算颜色滑块上的Y位置

Question

我目前使用以下代码将颜色滑块渐变渲染到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;

这会创建一个渐变，从渐变的色轮一直从红色回到红色并生成图像，如下所示：

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

现在我根据用户输入进行了颜色提取工作，我还需要能够获取十六进制颜色值并计算控件的top值。所以从本质上讲，逆转技术。但我似乎无法理解正确使用的算法。

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

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

总而言之，在了解上面图像的像素高度时，如果提供RGB值数组，如何计算此图像中给定颜色的 y 位置？

提前致谢。

Answer 1

您可以将rgb颜色转换为HSV，这将为您提供从0°（滑块顶部）到360°（滑块底部）的颜色值（H）。
您可以根据滑块(height / 360 * H)

的大小计算y位置