大家好!我叫戴向天。
QQ群:602504799
QQ:809002582
实现vantUI-colorPicker颜色选择器组件
样式代码我就不贴出来了:加群(602504799)可获取样式代码包
效果图
代码如下
<template>
<div class="p-20 bg-f width-350 height-240 border-s-e">
<div class="flex flex-bt">
<div class="posi-r over-h">
<div ref="canvasBox" class="width-300 height-200">
<canvas ref="canvas" :width="width" :height="height"></canvas>
</div>
<span ref="point" class="width-10 height-10 border-s-e border-r_50 posi-a t0 l0"></span>
</div>
<div class="posi-r">
<div ref="canvasBar" class="width-30 height-200">
<canvas ref="bar" :width="barWidth" :height="height"></canvas>
</div>
<span ref="barPoint" class="height-5 bg-f posi-a t0 l0 r0 op-8 cursor-pointer"></span>
</div>
</div>
<div class="flex flex-bt m-t-10">
<div class="flex flex-y-center">
<em class="width-30 height-30 bg-edit m-r-10" :style="{'background':color}"></em>
<input v-model="color" class="width-150 border-s-e fs-14 height-30 p-lr-10" />
</div>
<div class="flex flex-y-center flex-s-0">
<span class="color-edit fs-12 m-r-20 cursor-pointer">清空</span>
<span class="cursor-pointer color-f p-lr-10 p-tb-5 fs-12 bg-edit">确定</span>
</div>
</div>
</div>
</template>
<script>
export default {
data() {
return {
canvas: null,
ctx: null,
width: 0,
barWidth: 0,
height: 0,
curColor: 'red',
color: '',
};
},
methods: {
async init() {
const canvasBox = this.$refs.canvasBox;
this.width = canvasBox.clientWidth;
this.height = canvasBox.clientHeight;
const canvasBarBox = this.$refs.canvasBar;
const width = canvasBarBox.clientWidth;
this.barWidth = width;
await 10;
this.canvas = this.$refs.canvas;
this.ctx = this.canvas.getContext('2d');
this.colorBox(this.curColor);
this.colorBar();
this.bind();
},
colorBar() {
const canvasBar = this.$refs.bar;
const ctx = canvasBar.getContext('2d');
const gradientBar = ctx.createLinearGradient(0, 0, 0, this.height);
gradientBar.addColorStop(0, '#f00');
gradientBar.addColorStop(1 / 6, '#f0f');
gradientBar.addColorStop(2 / 6, '#00f');
gradientBar.addColorStop(3 / 6, '#0ff');
gradientBar.addColorStop(4 / 6, '#0f0');
gradientBar.addColorStop(5 / 6, '#ff0');
gradientBar.addColorStop(1, '#f00');
ctx.fillStyle = gradientBar;
ctx.fillRect(0, 0, this.barWidth, this.height);
},
colorBox(color) {
// 底色填充,也就是(举例红色)到白色
var gradientBase = this.ctx.createLinearGradient(
0,
0,
this.canvas.width,
this.canvas.height,
);
gradientBase.addColorStop(1, color);
gradientBase.addColorStop(0, 'rgba(255,255,255,1)');
this.ctx.fillStyle = gradientBase;
this.ctx.fillRect(0, 0, this.canvas.width, this.canvas.height);
// 第二次填充,黑色到透明
var my_gradient1 = this.ctx.createLinearGradient(
0,
0,
0,
this.canvas.width,
);
my_gradient1.addColorStop(0, 'rgba(0,0,0,0)');
my_gradient1.addColorStop(1, 'rgba(0,0,0,1)');
this.ctx.fillStyle = my_gradient1;
this.ctx.fillRect(0, 0, this.canvas.width, this.canvas.height);
},
bind() {
const self = this;
const canvasBox = this.$refs.canvasBox;
const canvasBarBox = this.$refs.canvasBar;
const barPoint = this.$refs.barPoint;
const point = self.$refs.point;
const canvasBar = this.$refs.bar;
const ctx = canvasBar.getContext('2d');
const handler = (e) => {
var ePos = {
x: e.layerX || e.offsetX,
y: e.layerY || e.offsetY,
};
point.style.left = ePos.x - point.clientWidth / 2 + 'px';
point.style.top = ePos.y - point.clientHeight / 2 + 'px';
let rgbaStr = '#000';
rgbaStr = self.getRgbaAtPoint(ePos, this.ctx);
this.outColor(rgbaStr.slice(0, 3).join());
};
const barHandler = (e) => {
var ePos = {
x: e.layerX || e.offsetX,
y: e.layerY || e.offsetY,
};
// barPoint.style.left = ePos.x - barPoint.clientWidth / 2 + 'px';
barPoint.style.top = ePos.y - barPoint.clientHeight / 2 + 'px';
let rgbaStr = '#000';
rgbaStr = self.getRgbaAtPoint(ePos, ctx);
this.colorBox('rgb(' + rgbaStr.slice(0, 3).join() + ')');
};
canvasBox.onmousedown = (e) => {
handler(e);
canvasBox.onmousemove = (e) => handler(e);
canvasBox.onmouseup = (e) => {
handler(e);
canvasBox.onmouseup = canvasBox.onmousemove = null;
};
point.onmouseup = (e) => {
canvasBox.onmouseup = canvasBox.onmousemove = null;
};
};
canvasBarBox.onmousedown = (e) => {
barHandler(e);
canvasBarBox.onmousemove = (e) => barHandler(e);
canvasBarBox.onmouseup = (e) => {
barHandler(e);
canvasBarBox.onmouseup = canvasBarBox.onmousemove = null;
};
barPoint.onmouseup = (e) => {
canvasBarBox.onmouseup = canvasBarBox.onmousemove = null;
};
};
},
getRgbaAtPoint(pos, ctx) {
let imgData = ctx.getImageData(pos.x, pos.y, 1, 1);
let data = imgData.data;
return [data[0], data[1], data[2], 1];
},
outColor(rgb) {
this.color = 'rgb(' + rgb + ')';
},
},
mounted() {
this.init();
// this.resize(this.init);
},
};
</script>