css 色盘、饼图、色轮

1.应要求要实现一个色盘取色器。

2.四处寻找无果，只能用图片实现了。
3.看书《揭秘css》时，发现了css的新属性，分享出来。

background: conic-gradient(red,yellow,lime,aqua,blue,fuchsia,red);

4.就这样实现了这个色盘，但是因为是新属性，有兼容性问题，使用的话要多调试。
5.当然要取色就要使用监听鼠标位置的属性，通过位置计算出角度和距离圆心的距离，就可以通过公式计算出颜色。用到了三角函数，后面优化后会贴出来。

<template>
  <div id="rgba">
    <div id="color-pan"></div>
    <div class="this-color" :style="`background:${bg}`"></div>
  </div>
</template>

<script>
import { HsvToRgb } from '@/filters/filter'
export default {
  data() {
    return {
      bg: 'white'
    }
  },
  mounted() {
    var bindEvent = function(dom, eventName, listener) {
      if (dom.attachEvent) {
        dom.attachEvent('on' + eventName, listener)
      } else {
        dom.addEventListener(eventName, listener)
      }
    }
    var mydiv = document.getElementById('color-pan')
    const _this = this
    bindEvent(mydiv, 'click', function(e) {
      console.log(e)
      var { width } = mydiv.getBoundingClientRect()
      var offsetX = (e.offsetX / width) * 100
      var offsetY = (e.offsetY / width) * 100
      console.log(offsetX, offsetY)

      const return_location = _this.return_location(offsetX, offsetY)
      _this.bg = HsvToRgb(return_location)

      return
    })
  },
  methods: {
    // 核心代码
    return_location(left, top) {
      const datax = left - 50
      const datay = 50 - top
      const x = Math.abs(datax)
      const y = Math.abs(datay)
      // 斜边
      const hypotenuse = Math.sqrt(x * x + y * y)
      // cos值
      const ttt = hypotenuse * hypotenuse + x * x - y * y
      const bbb = 2 * hypotenuse * x
      const cos = ttt / bbb
      const dataAcos = Number(new Number((Math.acos(cos) * 180) / Math.PI).toFixed(2))
      console.log(dataAcos)

      let angle = 0
      const hypotenuseReturn = (255 / 50) * hypotenuse
      if (datax > 0 && datay > 0) {
        angle = 90 - dataAcos
      } else if (datax > 0 && datay < 0) {
        angle = 90 + dataAcos
      } else if (datax < 0 && datay < 0) {
        angle = 90 - dataAcos + 180
      } else if (datax < 0 && datay > 0) {
        angle = dataAcos + 270
      }
      return [angle, hypotenuseReturn, 100]
      //   console.log([angle, hypotenuseReturn, 255])
    }
  }
}
</script>

<style lang="scss">
#rgba {
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;

  #color-pan {
    width: 250px;
    height: 250px;
    border-radius: 50%;
    background: conic-gradient(red, yellow, lime, aqua, blue, fuchsia, red);
  }
  .this-color {
    width: 100px;
    height: 30px;
    background: #000;
  }
}
</style>

export function HsvToRgb(data) {
  var h = data[0], s = data[1], v = data[2];
  s = s / 100;
  v = v / 100;
  var r = 0, g = 0, b = 0;
  var i = parseInt((h / 60) % 6);
  var f = h / 60 - i;
  var p = v * (1 - s);
  var q = v * (1 - f * s);
  var t = v * (1 - (1 - f) * s);
  switch (i) {
      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;
      default:
          break;
  }
  r = parseInt(r * 255.0)
  g = parseInt(g * 255.0)
  b = parseInt(b * 255.0)
  const rgb = 'rgb('+r+',' +g+',' +b+')'
  return rgb
}

不支持新css属性生成色盘时，可以使用图片。