javascript - 如何根据 X 和 Y 坐标从色轮获取颜色值？

Question

所以我有这个色轮，它将用于颜色选择器。
我正在通过 NativeScript 为移动应用程序制作此内容。我想知道如何仅使用 X/Y 坐标来获取 RGB 或 HEX(因为我可以使用其中一个)？

{x:0,y:0} 位于正中心，因此负数将位于左侧和上方，而正数将位于右侧和下方。
我一直在试图弄清楚如何获得颜色。我没有代码可以显示，因为我不知道从哪里开始。

色轮是预先制作的图像，而不是我在使用应用程序时使用 Canvas 自动生成的图像。

Answer 1

以下所有 Angular 测量均基于通常的数学意义:0° 向右水平， Angular 逆时针增加，因此 90° 向上，180° 向左，270° 向下。

使用 MS PowerPoint 中的色轮(因为它可用)，通过将圆分成 3 120° 宽的部分来计算值，这些部分分别以 0°、120° 和 240° 为中心，代表红色、绿色和蓝色。

在段边界上，颜色为 100% 的相邻颜色，因此 60° 为 100% 红色和 100% 绿色。相邻颜色逐渐淡入段的中心，因此在 90°(从红/绿边界到绿色中心的一半)处，颜色为 100% 绿色和 50% 红色。

这给出了相邻颜色的混合，相反颜色的混合基于距中心的距离。

此映射方案不适用于 RGB，因为它是 3 维空间，但如果坐标用于色调和饱和度 和相邻的 值 slider 。为简单起见，以下仅使用值设置为 1 的光盘。

完整的解释位于Hand-coding a color wheel with canvas .

/* Convert radians to degrees.
 *
 * @param {number} rad - radians to convert, expects
 *                       rad in range +/- PI per Math.atan2
 * @returns {number} degrees equivalent of rad
 */
function rad2deg(rad) {
  return (360 + 180 * rad / Math.PI) % 360;
}

/* Convert h,s,v values to r,g,b
 * See: https://en.wikipedia.org/wiki/HSL_and_HSV#From_HSV
 *
 * @param {number} hue - in range [0, 360]
 * @param {number} saturation - in range 0 to 1
 * @param {number} value - in range 0 to 1
 * @returns {Array|number} [r, g,b] in range 0 to 255
 */
function hsv2rgb(hue, saturation, value) {
  hue /= 60;
  let chroma = value * saturation;
  let x = chroma * (1 - Math.abs((hue % 2) - 1));
  let rgb = hue <= 1? [chroma, x, 0]:
            hue <= 2? [x, chroma, 0]:
            hue <= 3? [0, chroma, x]:
            hue <= 4? [0, x, chroma]:
            hue <= 5? [x, 0, chroma]:
                      [chroma, 0, x];

  return rgb.map(v => (v + value - chroma) * 255);
}

/* Convert cartesian coordinates to RGB
 * Converts: x, y to polar (radial_distance, angle), then
 *           polar to HSV, then
 *           HSV to RGB
 *
 * @param {number} x - x coordinate in range -1 to 1
 * @param {number} y - y coordinate in range -1 to 1
 * @returns {Array|number} [red, green, blue] values in range 0 to 255
 */
function rectToRGB(x, y) {
  // Hue is from angle, saturation from distance from centre, value set to 1
  var r = Math.sqrt(x*x + y*y);
  // Limit extent to disc
  var sat = r > 1? 0 : r;
  var hsv = [rad2deg(Math.atan2(y, x)), sat, 1];
  var rgb = hsv2rgb(...hsv).map(Math.round);
  return rgb;
}

function posToColour(evt) {
  var node = this;
  var originOffset = node.width / 2;
  var offsetLeft = offsetTop = 0;
  
  do {
    offsetLeft += node.offsetLeft;
    offsetTop  += node.offsetTop;
    node = node.offsetParent;
  } while (node.offsetParent)
    
  // Adjust coordinates then scale to range -1 to 1
  var x = ((evt.x - offsetLeft - originOffset) / originOffset).toFixed(2);
  var y = ((originOffset - evt.y + offsetTop) / originOffset).toFixed(2);

  var rgb = rectToRGB(x, y);
  
  var patch = document.getElementById('colorPatch');
  patch.style.backgroundColor = `rgb(${rgb.join()})`;
  document.getElementById('data').innerHTML = 
    `x, y : ${(x<0?'':' ')+x}, ${(y<0?'':' ')+y}<br>r,g,b: ${rgb.map(x=>('  '+x).slice(-3)).join(', ')}`;
}

document.addEventListener('DOMContentLoaded', function() {
  document.getElementById('colourDisc').addEventListener('mousemove', posToColour, false);
}, false);

img {width:200px;height:200px;}
div {width: 90px; height: 90px}

<table>
 <tr>
   <td><img src="/image/lPPOO.png" id="colourDisc"></td>
   <td><div id="colorPatch"></div>
       <div><pre id="data"></pre></div></td>
</table>

如果您将色轮生成为每个链接文章的 Canvas ，那么您可能只能获取光标下的颜色。

hsv2rgb 与原始版本相比有所缩小，但我认为它更短，因此更清晰，但存在过度使用 :? 的风险。运算符。