0

我目前使用以下代码将颜色滑块渐变渲染到画布元素上：

 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根据缓存的图像像素数据检查控制器的位置，从而生成一个返回 hex/RGB 值的简单颜色选择器。

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

我有一个工作hex to RGB函数，因此可以将颜色输入视为一个 rgb 值数组：

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

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

提前致谢。

4

1 回答 1

3

您可以将 rgb 颜色转换为HSV，这将为您提供H从 0°（滑块顶部）到 360°（滑块底部）的颜色值 ( )。
有了它，您可以根据滑块的大小计算 y 位置(height / 360 * H)

于 2013-04-04T12:36:40.470 回答