Question

我完全不熟悉计算机图形学，我需要创建一个颜色选择器作为嵌入HTML页面的JavaScript工具。

首先，看一下Photoshop的一个，我认为RGB调色板是一个三维矩阵。我的第一次尝试涉及：

<script type="text/javascript">
        var rgCanvas = document.createElement('canvas');
        rgCanvas.width = 256;
        rgCanvas.height = 256;
        rgCanvas.style.border = '3px solid black';
        for (g = 0; g < 256; g++){
            for (r = 0; r < 256; r++){
                var context = rgCanvas.getContext('2d');
                context.beginPath();
                context.moveTo(r,g);
                context.strokeStyle = 'rgb(' + r + ', ' + g + ', 0)';
                context.lineTo(r+1,g+1);
                context.stroke();
                context.closePath();
            }
        }

        var bCanvas = document.createElement('canvas');
        bCanvas.width = 20;
        bCanvas.height = 256;
        bCanvas.style.border = '3px solid black';       
        for (b = 0; b < 256; b++){
            var context = bCanvas.getContext('2d');
            context.beginPath();
            context.moveTo(0,b);
            context.strokeStyle = 'rgb(' + 0 + ', ' + 0 + ', ' + b + ')';
            context.lineTo(20, b);
            context.stroke();
            context.closePath();
        }

        document.body.appendChild(rgCanvas);
        document.body.appendChild(bCanvas);
    </script>

这导致了类似的事情 3D RGB color map

我的想法是，这与我在Photoshop和网络上看到的相比，过于线性。我想知道这样的选择器中颜色映射背后的逻辑： photoshop color picker

我真的不需要algorythms本身，我主要是试图理解逻辑。

由于

Answer 1

我实现了一次基于画布的颜色选择器。我这样做是因为我在网上找到的大多数颜色选择器都使用了太多的静态图像，我不想引起额外的请求。

颜色生成基于我找到的10K javascript entry。我只修复了一些错误并对代码进行了一些重构。

您只需在代码中加入<input type="color-picker" />，然后在加载DOM后调用PICKER.bind_inputs()。

这是一个带有我的代码的jsFiddle：

http://jsfiddle.net/mShET/1/

请记住，HTML5规范already supports是一个颜色选择器表单输入。但目前只有Opera实现了它。

Answer 2

回答有关Photoshop选取器背后逻辑的问题：颜色选择器看起来像是基于HSB颜色空间。色调（H）由右侧的垂直滑块拾取，饱和度（S）由颜色选择器区域的水平轴拾取，亮度（B）由颜色选择器区域的垂直轴拾取。

引用Wikipedia：

HSL和HSV以及类似模型的最初目的，以及它们最常见的当前应用，都在颜色选择工具中。最简单的是，一些这样的颜色选择器提供三个滑块，每个属性一个。但是，大多数都会在模型中显示二维切片，并显示控制显示哪个特定切片的滑块。

Answer 3

见这里：http://jsfiddle.net/maniator/GXuqb/2/

使用ColorPicker

请在此处查看代码：http://www.eyecon.ro/colorpicker/

Answer 4

我创建了一个JavaScript项目“MasterColorPicker”，它有4种不同的基于画布的颜色选择器。我花了几个月的时间阅读维基百科关于“色轮”以及“HSB”和“HSL”和“RGB”的文章，并且直接使用这些算法，因为我从头开始构建每个颜色选择器。我在这个项目中关注的一件事是将这些颜色空间的LOGIC变成易于理解和使用的格式。我希望只需使用该项目就可以帮助您理解每个色彩空间。至于从一个空间到另一个空间的映射，例如RGB和HSL之间的关系，你必须真正扩展你的3D想象力才能开始。这是我希望这个项目可以提供帮助的地方。但实际上，多年来不要试图弄清楚这些算法。除了维基百科，请参阅：

http://www.easyrgb.com/index.php?X=MATH

您可以消化的所有公式。除了：维基百科在其中一篇文章中谈到“色度”，并表示不要将其与“饱和度”混为一谈。我的MasterColorPicker项目增加了另一个色彩空间，色调 - 色度 - 灰色（HCG），该项目的源代码记录了HCG和RGB之间转换的公式。使用HCG，您可以找到“Web-Safe”颜色的组织，项目中的“RainbowMeistro Color-Picker”将为您提供该颜色空间的清晰可视化。您可以尝试项目并下载JavaScript / HTML文件，以便在您自己的系统上使用它（开源和免费）：

http://softmoon-webware.com/MasterColorPicker_instructions.php

和平！

使用Javascript和HTML Canvas创建一个类似于Photoshop的拾色器

4 个答案: