uni-app 色环选取器插件需求
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
监听触摸开始事件,计算触摸点相对于色环圆心的角度,然后根据该角度设置选中的颜色。 - 样式:使用简单的样式来展示选中的颜色。
以上代码提供了一个基本的色环选取器功能,可以根据需求进一步扩展和优化,比如添加颜色值显示、增加亮度调节等。