【问题标题】:How Chrome DevTools' color picker calculates cursors positions from input RGB color?Chrome DevTools 的颜色选择器如何根据输入的 RGB 颜色计算光标位置?
【发布时间】:2019-01-11 00:01:22
【问题描述】:

我正在使用 HTML5 画布实现颜色选择器。它与 Chrome DevTools 是同一种。

当用户通过输入插入值时,如何恢复两个画布上的光标?

【问题讨论】:

    标签: javascript html5-canvas color-picker


    【解决方案1】:
    1. 需要 HSL(色相、饱和度、亮度)
    2. 将输入值 RGB 转换为 HSL (RGB to HSL conversion)
    3. 图片中的滑块,代表Hue
    4. 而调色板,从上到下,分别代表Lightness 0%~100%;从左到右,代表Saturation 0%~100%

    【讨论】:

    • 这几乎可以工作。问题是Lightness 没有作为光标的X 坐标放置在画布上。因为它的值是:左上:100%,右上50%,左下:0 右下:0。
    • 好的,我设法通过将 HSL 替换为 HSV 来解决问题。
    猜你喜欢
    • 2016-05-08
    • 2021-08-27
    • 2011-02-14
    • 1970-01-01
    • 2013-07-03
    • 2013-10-19
    • 1970-01-01
    • 1970-01-01
    • 2010-11-07
    相关资源
    最近更新 更多