uni-app 色环选取器插件需求

发布于 1周前 作者 bupafengyu 来自 Uni-App

uni-app 色环选取器插件需求

这边app 需要一个灯控色环 选取器

附件上传了需求图片和视频

能做的请联系我: 121609369@qq.com

需求图片

1 回复

在uni-app中实现一个色环选取器插件,可以使用Canvas绘制色环,并结合触摸事件来实现颜色的选择。以下是一个简单的示例代码,展示了如何实现这一功能。

首先,创建一个新的uni-app项目或在现有项目中添加一个新的页面用于色环选取器。

1. 在页面的.vue文件中

<template>
  <view class="container">
    <canvas canvas-id="colorWheel" style="width: 300px; height: 300px; border: 1px solid #000;"></canvas>
    <view class="selected-color" :style="{ backgroundColor: selectedColor }"></view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      selectedColor: '#FF0000' // 默认颜色
    };
  },
  mounted() {
    this.drawColorWheel();
    this.addTouchEvent();
  },
  methods: {
    drawColorWheel() {
      const ctx = uni.createCanvasContext('colorWheel');
      const width = 300;
      const height = 300;
      const centerX = width / 2;
      const centerY = height / 2;
      const radius = Math.min(centerX, centerY) - 10;

      for (let angle = 0; angle < 360; angle++) {
        const radian = angle * Math.PI / 180;
        const x = centerX + radius * Math.cos(radian);
        const y = centerY - radius * Math.sin(radian);
        const color = `hsl(${angle}, 100%, 50%)`;
        ctx.fillStyle = color;
        ctx.beginPath();
        ctx.arc(x, y, 2, 0, Math.PI * 2);
        ctx.fill();
      }
      ctx.draw();
    },
    addTouchEvent() {
      uni.onTouchStart((e) => {
        const touch = e.touches[0];
        const rect = uni.createSelectorQuery().select('#colorWheel').boundingClientRect();
        rect.exec((res) => {
          const { x, y, width, height } = res[0];
          const centerX = x + width / 2;
          const centerY = y + height / 2;
          const radius = Math.min(width, height) / 2 - 10;
          const dx = touch.x - centerX;
          const dy = touch.y - centerY;
          const angle = Math.atan2(dy, dx) * 180 / Math.PI;
          this.selectedColor = `hsl(${angle}, 100%, 50%)`;
        });
      });
    }
  }
};
</script>

<style>
.container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.selected-color {
  width: 100px;
  height: 100px;
  margin-top: 20px;
}
</style>

2. 解释

  • Canvas绘制色环:使用Canvas的arc方法绘制小圆形点来构成色环,每个点的颜色通过hsl颜色空间计算得出,保证色环的颜色连续性。
  • 触摸事件:通过uni.onTouchStart监听触摸开始事件,计算触摸点相对于色环圆心的角度,然后根据该角度设置选中的颜色。
  • 样式:使用简单的样式来展示选中的颜色。

以上代码提供了一个基本的色环选取器功能,可以根据需求进一步扩展和优化,比如添加颜色值显示、增加亮度调节等。

回到顶部