思路
画板中要实现颜色选择功能,几经周折,效果还可以,整个思路就是:
1、利用线性过渡实现slider背景渲染
2、获取slider滑块value值
3、计算该value值所代表的颜色值并赋值给颜色需求方
效果图
体验
体验路径:自定义系列>拾色器
代码
js部分
// pages/colorPicker/colorPicker.js
Page({
/**
* 页面的初始数据
*/
data: {
blockColor: "#000000",
colorGamut:"-webkit-linear-gradient(left, #ffffff 0%, #ff0000 100%)",
colorGray:"-webkit-linear-gradient(left, #000000 0%, #ffffff 100%)",
colorGamutTip:"#ff0000",
colorGrayTip:"#ffffff",
colorValue:0,
colorGamutValue:0,
colorGrayValue:0,
},
/**
* 生命周期函数--监听页面加载
*/
onLoad: function (options) {
},
changeCorlor(e) {
var value = e.detail.value
var colors = []
if (value >= 0 && value < 17) {
colors = this.gradientColors("#ff0000", "#ffff00", 17, 2.2)
value = value
} else if (value >= 17 && value < 33) {
colors = this.gradientColors("#ffff00", "#00ff00", 17, 2.2)
value = value - 17
} else if (value >= 33 && value < 50) {
colors = this.gradientColors("#00ff00", "#00ffff", 17, 2.2)
value = value - 33
} else if (value >= 50 && value < 67) {
colors = this.gradientColors("#00ffff", "#0000ff", 17, 2.2)
value = value - 50
} else if (value >= 67 && value < 83) {
colors = this.gradientColors("#0000ff", "#ff00ff", 17, 2.2)
value = value - 67
} else {
colors = this.gradientColors("#ff00ff", "#ff0000", 17, 2.2)
value = value - 83
}
if (value >= colors.length) {
value = value - 1
}
this.setData({
colorValue:value,
colorGamutTip: colors[value],
colorGamut: "-webkit-linear-gradient(left, #ffffff 0%," + colors[value] + " 100%)"
})
var colorGamuts=[]
colorGamuts = this.gradientColors("#ffffff", this.data.colorGamutTip, 100, 2.2)
this.setData({
colorGrayTip: colorGamuts[this.data.colorGamutValue],
colorGray: "-webkit-linear-gradient(left, #000000 0%," + colorGamuts[this.data.colorGamutValue] + " 100%)"
})
var colorGrays=[]
colorGrays = this.gradientColors("#000000",this.data.colorGrayTip,100,2.2)
this.setData({
blockColor:colorGrays[this.data.colorGrayValue]
})
},
changeCorlorGamut(e){
var value = e.detail.value
var colorGamuts = []
colorGamuts = this.gradientColors("#ffffff", this.data.colorGamutTip, 100, 2.2)
if (value >= colorGamuts.length) {
value = value - 1
}
this.setData({
colorGamutValue:value,
colorGrayTip: colorGamuts[value],
colorGray: "-webkit-linear-gradient(left, #000000 0%," + colorGamuts[value] + " 100%)"
})
var colorGrays = []
colorGrays = this.gradientColors("#000000", this.data.colorGrayTip, 100, 2.2)
this.setData({
blockColor: colorGrays[this.data.colorGrayValue]
})
},
changeCorlorGray(e){
var value = e.detail.value
var colorGrays = []
colorGrays = this.gradientColors("#000000", this.data.colorGrayTip, 100, 2.2)
if (value >= colorGrays.length) {
value = value - 1
}
this.setData({
colorGrayValue:value,
blockColor: colorGrays[value],
})
},
parseColor: function (hexStr) {
return hexStr.length === 4 ? hexStr.substr(1).split('').map(function (s) {
return 0x11 * parseInt(s, 16);
}) : [hexStr.substr(1, 2), hexStr.substr(3, 2), hexStr.substr(5, 2)].map(function (s) {
return parseInt(s, 16);
})
},
// zero-pad 1 digit to 2
pad: function (s) {
return (s.length === 1) ? '0' + s : s;
},
gradientColors: function (start, end, steps, gamma) {
var i, j, ms, me, output = [],
so = [];
gamma = gamma || 1;
var normalize = function (channel) {
return Math.pow(channel / 255, gamma);
};
start = this.parseColor(start).map(normalize);
end = this.parseColor(end).map(normalize);
for (i = 0; i < steps; i++) {
ms = i / (steps - 1);
me = 1 - ms;
for (j = 0; j < 3; j++) {
so[j] = this.pad(Math.round(Math.pow(start[j] * me + end[j] * ms, 1 / gamma) * 255).toString(16));
}
output.push('#' + so.join(''));
}
return output;
}
})
wxml部分
<view class="view-color-slider">
<view style="width:160rpx;height:160rpx;border-radius:80rpx;background:{{blockColor}}"></view>
<slider class="slider-color-picker" style="width:500rpx;height:30rpx;border-radius:10rpx;margin-left:30rpx" activeColor="transparent" backgroundColor="transparent" bindchange="changeCorlor" block-size="24" value="{{sliderValue}}"></slider>
<slider class="slider-color-picker-gamut" style="width:500rpx;height:30rpx;border-radius:10rpx;margin-left:30rpx;background:{{colorGamut}}" activeColor="transparent" backgroundColor="transparent" bindchange="changeCorlorGamut" block-size="24" value="{{sliderValue}}"></slider>
<slider class="slider-color-picker-gray" style="width:500rpx;height:30rpx;border-radius:10rpx;margin-left:30rpx;background:{{colorGray}}" activeColor="transparent" backgroundColor="transparent" bindchange="changeCorlorGray" block-size="24" value="{{sliderValue}}"></slider>
</view>
css部分
.view-color-slider{
width: 100%;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
.slider-color-picker{
background: -webkit-linear-gradient(left, #ff0000 0%, #ffff00 17%, #00ff00 33%, #00ffff 50%, #0000ff 67%, #ff00ff 83%, #ff0000 100%);
border: 1px solid gainsboro;
}
.slider-color-picker-gamut{
border: 1px solid gainsboro;
}
.slider-color-picker-gray{
border: 1px solid gainsboro;
}