如何快速實現一個顏色選擇器

jimojianghu發表於2022-01-21

在做前端介面開發的時候，遇到需要改變顏色的需求，就需要使用顏色選擇器。
針對這個問題，第一想法，自然是H5提供了input color，可以實現。但不出意外的，IE並不支援。而且，chrome的實現方式和firefox也不太一樣，見下圖：
image
左圖是chrome的，瀏覽器自身實現的一個顏色選擇器控制元件；右圖是firefox的，引入的是作業系統自帶的顏色選擇器控制元件。
鑑於這些差異性，就很有必要實現一個統一的顏色選擇器元件，譬如我們來實現一個類似chrome瀏覽器自帶的這種選擇器。
要做這個元件，首先需要了解的一個知識點，就是顏色模型。

顏色模型

我們前端開發，最常見的顏色模型就是RGB，即紅綠藍三基色模型，而前端瀏覽器能支援顏色顯示的顏色模型只有兩種：RGB和HSL。
其中，RGB模型是以三色的值在0-255以內的範圍內，混合成一種顏色，對機器較友好，但並不太適合人直觀的進行顏色選擇。所以，通常的顏色選擇器一般會使用另外兩種更面向視覺感知的模型：HSV 和 HSL。關於顏色模型的詳細知識，可見 顏色模型的基礎知識。
而chrome瀏覽器自帶的顏色選擇器，就是基於HSV的。

HSV 與 HSL 的區別

HSV是基於色相H(hue)、飽和度S(saturation)、明度V(Value)；HSL基於色相H(hue)、飽和度S(saturation)、亮度L(lightness)。
其中色相是一樣的，本質都是一種顏色值。
在這兩個模型中，色相是以六大主色為基礎，分別按60度的間隔排列在圓環上。
這六大主色分別是：0°紅、60°黃、120°綠、180°青、240°藍、300°洋紅、360°紅。
而在前端進行佈局設計時，常常把圓環處理成長方形的色塊，通過顏色的線性漸變方式進行分段處理，角度換算成一定的比例，如下所示：
image
而飽和度和明亮度都是有區別的，為方便理解顏色選擇器，本文概括簡單的描述，如下：

  • HSV中的S飽和度，反映色相顏色中混入白色的值，呈現白色到色相顏色的變化；
  • HSL中的S飽和度，反映色相顏色中混入灰色的值，呈現的是一種從灰色到色相顏色的變化。
  • HSV中的V明度，體現的是從黑色到色相(H)顏色的過渡。
  • HSL中的L亮度，體現的是從黑色到色相(H)顏色再到白色的過渡。

另外需要明確的是，各個部分的取值範圍：Hue色相：0 - 360；飽和度和明亮度都是：0 ~ 100%。
具體的實現上的差別，我們可以接著往下看。

實現選擇器

色相

色相的原理上面已經介紹了，HSV和HSL一樣。落實到程式碼層面的話，也是很好實現的，以css和div的方式，只需要進行顏色的線性漸變即可：

<div class="div-bar">
  <!-- 色相柱 -->
  <div id="colorBar" class="color-bar"></div>
  <!-- 滑動塊 -->
  <div id="divSlider" class="div-slider"></div>
</div>

.div-bar {
  position: relative;
  width: 10px;
  height: 200px;
  margin-left:15px;
  cursor: pointer;
}
.color-bar {
  background: linear-gradient(180deg, #f00, #ff0 17%, #0f0 33%, #0ff 50%, #00f 67%, #f0f 83%, #f00);
  width: 10px;
  height: 200px;
  margin-left: 20px;
}
.div-slider {
  ...
  width: 8px;
  height: 8px;
}

這裡是豎向的色相柱，寬高10 * 200，如果需要橫向的改動寬高佈局即可。

計算色相柱的滑塊位置

要想移動滑塊獲取位置資訊，首先需要監聽色相柱上的滑鼠事件，具體如下：

  colorBar.addEventListener('mousedown', function(e) {
    setHueSlider(e)
    document.addEventListener('mousemove', setHueSlider)
  })
  document.addEventListener('mouseup', function() {
    document.removeEventListener('mousemove', setHueSlider)
  })

在setHueSlider函式中需要處理的，就是滑塊點在色相柱上的位置，然後通過計算比例得到一個hue值：

  const clientRect = colorBar.getBoundingClientRect()
  // 獲取位置資訊，色柱高度-colorBarHEIGHT
  let yDiff = event.clientY - clientRect.top
  yDiff = yDiff > colorBarHEIGHT ? colorBarHEIGHT : (yDiff < 0 ? 0 : yDiff)
  // 設定滑塊的位置，防止滑塊脫離色柱
  const yTop = yDiff < 9 ? 0 : (yDiff - 9)
  divSlider.style.top = yTop + 'px'

  // 色相在360度以內，計算對應的比例值， 0 - 360
  color.hue = Math.round((yDiff / colorBarHEIGHT) * 360 * 100) / 100 | 0

通過色相柱的滑塊位置比例的計算，我們就能得到對應的色相值了。

飽和度和明亮度

除了色相柱以外，我們還需要設定一個基於飽和度和明亮度的顏色皮膚，這時候，上面對於這兩塊的區別介紹，就有了用武之地。
顏色皮膚一般是一個長方形的區域，以HSV為例，上面提到，HSV的飽和度可以簡化為白色到色相顏色的變化，如果當前的色相顏色是紅色，則飽和度就是白色到紅色的變化；而明亮度則體現的是黑色到紅色的變化。我們在設計皮膚的時候，以一個長方形的皮膚區域：

  • 如果把皮膚的背景色設定為色相顏色-紅色；
  • 從左到右設定飽和度，可在白色上設定從左至右的透明度變化，即最左邊白色，到最右邊的完全透明，線性漸變；
  • 從下到上設定明亮度，就可在最下面黑色，到最上面的完全透明，線性漸變。

如此則可簡化HSV模型裡的顏色皮膚，在具體的實現上，可以通過下面的這個圖來理解：
image
當然，飽和度和明亮度在水平或者垂直方向上是可以調換的。

要設定顏色皮膚，使用div+css即可，在程式碼實現上有多種方式，下面介紹的只使用一個div的方式，實現一個寬高300 * 200的顏色皮膚，(其他的方式還有使用兩個div或者使用偽類等等)：

<div class="div-panel">
  <!-- 顏色皮膚 -->
  <div id ="colorPanel" class="color-panel" style="background-color: #f00;"></div>
  <!-- 滑塊 -->
  <div id="divPicker" class="div-picker"></div>
</div>

.div-panel {
  position: relative;
  width: 300px;
  height: 200px;
  cursor: pointer;
  overflow: hidden;
}
.color-panel {
  position: relative;
  height: 200px;
  width: 300px;
  background: linear-gradient(to top, #000, transparent), linear-gradient(to right, #FFF, transparent);
}
.div-picker {
  ...
  width: 12px;
  height: 12px;
}

計算這兩個值

仍然是需要監聽滑鼠事件，獲取滑鼠位置資訊，事件監聽與色相的基本一樣，都是監聽滑鼠的三個事件，這裡略過。
直接看如何計算飽和度和明亮度，根據前面的介紹與佈局實現，我們定義的皮膚橫向X軸是飽和度，皮膚縱向Y軸是明亮度，於是可以如下計算：

  // 計算滑鼠移動位置，皮膚寬度panelWIDTH，高度panelHEIGHT
  const clientRect = colorPanel.getBoundingClientRect()
  let yDiff = event.clientY - clientRect.top
  let xDiff = event.clientX - clientRect.left
  xDiff = xDiff > panelWIDTH ? panelWIDTH : (xDiff < 0 ? 0 : xDiff)
  yDiff = yDiff > panelHEIGHT ? panelHEIGHT : (yDiff < 0 ? 0 : yDiff)

  // 設定滑塊位置，保證滑塊至少一半在皮膚內
  const yTop = yDiff - 6
  const xLeft = xDiff - 6
  divPicker.style.top = yTop + 'px'
  divPicker.style.left = xLeft + 'px'

  // 飽和度和明度，這裡沒有取百分比的值，後續轉換時需要注意
  color.saturation = Math.round(xDiff / panelWIDTH * 100)
  color.value = Math.round((1 - yDiff / panelHEIGHT) * 100)

hsv轉rgb

通過這樣的計算，就能獲取HSV對應的三個值了，後面就可以進行轉換成對應RGB顏色值。

  const hsvToRgb = function (hue, saturation, value) {
    saturation = saturation * 255 / 100 | 0
    value = value * 255 / 100 | 0

    if (saturation === 0) {
      return [value, value, value]
    } else {
      satVal = (255 - saturation) * value / 255 | 0
      ligVal = (value - satVal) * (hue % 60) / 60 | 0
      if (hue === 360) {
        return [value, 0, 0]
      } else if (hue < 60) {
        return [value, satVal + ligVal, satVal]
      } else if (hue < 120) {
        return [value - ligVal, value, satVal]
      } else if (hue < 180) {
        return [satVal, value, satVal + ligVal]
      } else if (hue < 240) {
        return [satVal, value - ligVal, value]
      } else if (hue < 300) {
        return [satVal + ligVal, satVal, value]
      } else if (hue < 360) {
        return [value, satVal, value - ligVal]
      } else {
        return [0, 0, 0]
      }
    }
  }

透明度

在RGB\HSV\HSL三種顏色模型裡，透明度都是獨立的一個屬性，不會影響到具體顏色的實現，可以單獨處理這個值。
所以，如果我們需要透明度，在佈局上可以和色相柱一樣，使用長條狀的div，通過計算位置比例來計算當前選中的透明度值，佈局如下：

  <div class="div-alpha">
    <!-- 透明柱狀 -->
    <div id="alphaBar" class="alpha-bar" style="linear-gradient(180deg, #f00, transparent)"></div>
    <!-- 滑塊 -->
    <div id="divAlphaSlider" class="div-slider"></div>
  </div>

  .div-alpha {
    background-image: linear-gradient(
      45deg,#c5c5c5 25%,transparent 0,transparent 75%,#c5c5c5 0,#c5c5c5),linear-gradient(
      45deg,#c5c5c5 25%,transparent 0,transparent 75%,#c5c5c5 0,#c5c5c5);
  }

在計算上，也基本和色相柱一樣，只是透明度取值在0-100：

color.alpha = Math.round(100 - yDiff / alphaBarHEIGHT * 100) / 100

有了透明度的值，獲取顏色值時，在RGBA或這HSLA中加入透明度即可。

基於HSL的顏色選擇器

上面講解過HSV和HSL的區別，根據各自的特點，要實現HSL的選擇器，只需要進行少許的改動。
首先，Hue色相和透明度，兩者沒有區別，一模一樣，不需要做任何改動。
其次，需要改動飽和度和明亮度的顏色皮膚，HSL在佈局時只需要改動一點，即皮膚的css樣式：

  .color-panel {
    position: relative;
    height: 200px;
    width: 300px;
    /*橫向X軸飽和度設定為灰的漸變，縱向Y軸設定為白到透明到黑*/
    background: linear-gradient(to bottom, #fff 0%, transparent 50%, transparent 50%, #000 100%), 
      linear-gradient(to right, #808080 0%, transparent 100%);
  }

改變顏色皮膚以後，獲取HSL的色相、飽和度、亮度、透明度的值的方式，都與在HSV模式下一樣。
注意，這時候獲取的HSLA的顏色，如果要使用到RGBA，就需要進行HSL到RGB的轉換，轉換函式詳見顏色模型的基礎知識。
綜上，則完成了一個顏色選擇器的。

使用canvas設定皮膚

除了基於div+css佈局顏色選擇器以外，我們還可以使用canvas來處理顏色選擇器。
在佈局上，色相、皮膚、透明度，都使用canvas來替換，由於canvas也可以使用線性漸變，所以在設定色彩的UI佈局上是沒有任何問題的。
在滑塊的設計上也大致相同，只需要微小的改動，因為使用canvas以後，獲取顏色的方式就不一樣了。
在canvas的色相和皮膚中，可以直接獲取到canvas對應位置的畫素點，而該畫素點本身就是一個rgba的顏色值。
所以這個帶來的好處就是，我們可以省略轉換過程，而直接獲取到可用的顏色值。
當然，不管是div還是canvas，因為佈局方式和獲取顏色值的方式不一樣，在所能得到的顏色值的數量上會有差別，特別是canvas方式，和畫布本身的畫素點有關。
但是，兩種方式都可以在幾百萬以上的顏色值，完全滿足我們的需求。

相關文章