uni-app中 径向 圆环颜色选择器

在uni-app中实现一个径向圆环颜色选择器，可以通过Canvas来绘制圆环，并监听用户的触摸事件来获取颜色值。以下是一个简单的实现示例，展示如何使用Canvas绘制一个圆环颜色选择器，并处理用户的触摸事件来更新选中的颜色。

首先，在你的页面模板中添加一个Canvas组件：

<template>
  <view class="container">
    <canvas canvas-id="colorPicker" style="width: 300px; height: 300px;"></canvas>
    <view class="selected-color" :style="{ backgroundColor: selectedColor }">
      <text>{{ selectedColor }}</text>
    </view>
  </view>
</template>

然后，在页面的JavaScript部分，初始化Canvas并处理触摸事件：

<script>
export default {
  data() {
    return {
      selectedColor: '#FF0000', // 默认选中的颜色
      context: null,
      radius: 150, // 圆环半径
      centerX: 150, // 圆心X坐标
      centerY: 150, // 圆心Y坐标
      width: 300, // Canvas宽度
      height: 300, // Canvas高度
    };
  },
  mounted() {
    this.context = uni.createCanvasContext('colorPicker');
    this.drawColorPicker();
    this.addTouchEventListeners();
  },
  methods: {
    drawColorPicker() {
      // 绘制一个圆环
      this.context.setStrokeStyle('#000');
      this.context.setLineWidth(10);
      this.context.beginPath();
      this.context.arc(this.centerX, this.centerY, this.radius, 0, 2 * Math.PI);
      this.context.stroke();
      this.context.draw();
    },
    addTouchEventListeners() {
      uni.onTouchStart(this.handleTouchStart);
      uni.onTouchMove(this.handleTouchMove);
    },
    handleTouchStart(e) {
      this.startX = e.touches[0].x;
      this.startY = e.touches[0].y;
    },
    handleTouchMove(e) {
      const endX = e.touches[0].x;
      const endY = e.touches[0].y;
      const angle = Math.atan2(endY - this.centerY, endX - this.centerX);
      const hue = (angle / (2 * Math.PI) * 360) % 360;
      this.selectedColor = `hsl(${hue}, 100%, 50%)`;
      // 更新视图中的颜色显示
      this.$forceUpdate(); // 强制更新视图
    },
  },
};
</script>

在上面的代码中，我们首先创建了一个Canvas上下文，并在mounted生命周期钩子中绘制了一个圆环。然后，我们添加了触摸事件监听器来处理用户的触摸输入，并根据触摸位置计算选中的颜色。hsl函数用于生成基于色调（hue）的颜色值。

请注意，这个示例仅实现了基本的颜色选择功能，并未包括颜色饱和度和亮度的调节。如果你需要更复杂的颜色选择器，可以进一步扩展此示例，添加额外的Canvas绘制逻辑和触摸事件处理。