如何创建一个颜色选择器插件_JavaScript颜色选择插件开发与交互教程

<div id="color-picker">
  <div class="picker-panel">
    <div class="saturation-area" id="saturation">
      <div class="selector"></div>
    </div>
    <div class="brightness-slider">
      <input type="range" min="0" max="100" value="100" id="brightness">
    </div>
  </div>
  <div class="preview" id="preview"></div>
</div>

.saturation-area {
  width: 300px;
  height: 200px;
  background: linear-gradient(to right, white, rgba(255,255,255,0)), 
              linear-gradient(to top, black, rgba(0,0,0,0));
  background-color: hsl(0, 100%, 50%);
  position: relative;
  border-radius: 4px;
}
.selector {
  width: 12px;
  height: 12px;
  border: 2px solid white;
  border-radius: 50%;
  position: absolute;
  transform: translate(-50%, -50%);
  box-shadow: 0 0 3px rgba(0,0,0,0.3);
}
.brightness-slider input {
  width: 300px;
}
.preview {
  width: 100%;
  height: 40px;
  margin-top: 10px;
  border-radius: 4px;
}

class ColorPicker {
  constructor(containerId, onChange) {
    this.container = document.getElementById(containerId);
    this.onChange = onChange;
    this.hue = 0;
    this.saturation = 100;
    this.value = 100;
<pre class='brush:php;toolbar:false;'>this.init();

const selector = this.container.querySelector('.selector');
selector.style.left = `${this.saturation}%`;
selector.style.top = `${100 - this.value}%`;

const preview = this.container.querySelector('#preview');
preview.style.backgroundColor = this.toHex();

// 拖拽或点击调色板
saturation.addEventListener('mousedown', (e) => {
  const rect = saturation.getBoundingClientRect();
  const x = e.clientX - rect.left;
  const y = e.clientY - rect.top;

  this.saturation = (x / rect.width) * 100;
  this.value = 100 - (y / rect.height) * 100;

  this.render();
  this.emitChange();
});

// 监听明度滑动
brightness.addEventListener('input', (e) => {
  this.value = e.target.value;
  this.render();
  this.emitChange();
});

// 色相变化可通过外部控制（例如加个色相环）
// 这里简化为固定色相，实际可扩展

switch (i % 6) {
  case 0: r = v; g = t; b = p; break;
  case 1: r = q; g = v; b = p; break;
  case 2: r = p; g = v; b = t; break;
  case 3: r = p; g = q; b = v; break;
  case 4: r = t; g = p; b = v; break;
  case 5: r = v; g = p; b = q; break;
}

return {
  r: Math.round(r * 255),
  g: Math.round(g * 255),
  b: Math.round(b * 255)
};

new ColorPicker('color-picker', (color) => {
  console.log('Selected color:', color.hex);
  // 可用于更新表单、样式或其他 UI 元素
});