VUE 自定义取色器组件

效果：

功能：

1。点击色块中任何一点，色块中的正方形显示该点的颜色。

2。点击色块上方的颜色圆点，色块选中该颜色所在的位置，并在正方形中显示相应颜色。

3。上方圆点如果不是rgb格式，需要转换。

4。组件的大小从调用它的页面中传过去。

组件代码(CanvasColor2.vue)：

<template>
<!--    <div>--><div id='outDiv' style="position: relative">
<!--        <canvas class="box" id="show" :style="{width:canvasWidth+'px',height:canvasHeight+'px'}"></canvas>--><canvas class="box" id="show" width="300px" height="150px"></canvas><div class="cover" id='cover'></div><em id="cur"></em></div>
</template><script>export default {name: "CanvasColor2",data() {return {canvas:null,context:null,paramColor:'',viewWidth:0,viewHeight:0}},props:{data:String,canvasWidth:Number,canvasHeight:Number,},created() {this.viewWidth = this.canvasWidth;this.viewHeight = this.canvasHeight;},mounted() {this.getParamColor('rgb(0,3,243)');this.initData();this.getDotList();},methods:{async getDotList(){this.canvas = document.getElementById("show");this.context = this.canvas.getContext("2d");console.log('getDotList',this.canvas.offsetLeft);// 获取整个 canvas 的像素信息var imgData = this.context.getImageData(0, 0,this.canvas.width+this.canvas.offsetLeft, this.canvas.height+this.canvas.offsetTop);// 清空数组var dotList = [];// 最后实现的效果每个点之间有一定的距离，gap 就是控制这个距离的var gap = 1;// 通过 width 和 height 遍历 imgData 对象，每隔 gap 个点取一次像素，找到红色的像素，// 每找到一个红色点，就创建一个 Dot 对象，并添加到 dotList 数组中for (var x = 0; x < imgData.width; x += gap) {for (var y = 0; y < imgData.height; y += gap) {var i = (y * imgData.width + x) * 4;// console.log('getDotList',i);// 判断像素点是不是红色if (imgData.data[i] == this.paramColor[0] && imgData.data[i + 1] == this.paramColor[1] && imgData.data[i + 2] == this.paramColor[2]) {var dot = {x,y} ;dotList.push(dot);}}}if (dotList && dotList.length != 0) {var cur = document.getElementById('cur');cur.style.left = (dotList[0].x+this.canvas.offsetLeft)+'px';cur.style.top = (dotList[0].y+this.canvas.offsetTop)+'px';}console.log('dot',dotList);return dotList;},initData() {var show = document.getElementById("show");show.setAttribute("width",this.canvasWidth);show.setAttribute("height",this.canvasHeight);// var cover = document.getElementById("cover");var cur = document.getElementById("cur");if (show.getContext) {//首先判断getcontext方法是否存在，这是一个良好的习惯var context = show.getContext('2d');var gradientBar = context.createLinearGradient(0, show.height, show.width, show.height);//创建渐变，前两个参数是渐变开始的横纵坐标，后两个参数是渐变结束的横纵坐标gradientBar.addColorStop(0, '#ff0000');gradientBar.addColorStop(1 / 6, '#ff00ff');gradientBar.addColorStop(2 / 6, '#0000ff');gradientBar.addColorStop(3 / 6, '#00ffff');gradientBar.addColorStop(4 / 6, '#00ff00');gradientBar.addColorStop(5 / 6, '#ffff00');gradientBar.addColorStop(1, '#ff0000');context.fillStyle = gradientBar;context.fillRect(0, 0, show.width, show.width);//白色透明黑色，明暗度实现var lightToDark = context.createLinearGradient(0, 0, 0, show.width);lightToDark.addColorStop(0, "#fff");lightToDark.addColorStop(1 / 2, 'rgba(255,255,255,0)');lightToDark.addColorStop(1, '#000');context.fillStyle = lightToDark;context.fillRect(0, 0, show.width, show.width);show.addEventListener('click', function (e) {var ePos = {x: e.layerX || e.offsetX,y: e.layerY || e.offsetY}//前两个参数为鼠标的位置，后娘个参数为canvas的宽高var imgData = context.getImageData(ePos.x, ePos.y, show.width, show.height).data;//可以通过下面的方法获得当前的rgb值var red = imgData[0];var green = imgData[1];var blue = imgData[2];var rgbStr = "rgb(" + red + "," + green + ',' + blue + ")";console.log(rgbStr);var cover = document.getElementById("cover");cover.style.backgroundColor = rgbStr;// var cur = document.getElementById("cur");var outDiv = document.getElementById('outDiv');console.log('outDiv',outDiv.offsetTop+','+outDiv.offsetHeight);var pos = {x: e.clientX,y: e.clientY-outDiv.offsetTop//当该组件整体为相对位置时，y轴的坐标是当前点的位置-最外层距离顶点的高度}cur.style.left = pos.x + 'px';cur.style.top = pos.y + 'px';console.log('onmousemove',cur.style.left);});}},getParamColor(color) {let param = color;console.log('getParamColor',param.length)param = param.substring(4,param.length-1);console.log('getParamColor',param)this.paramColor = param.split(',');this.getDotList();var cover = document.getElementById("cover");cover.style.backgroundColor = color;}}}
</script><style scoped>.box {position: relative;background-color: pink;/*margin: 30px;*/border-radius: 15px;}/* 选择颜色的小方格 */#cur {width: 13px;height: 13px;outline: 2px solid #ffffff;margin-left: -1px;margin-top: -1px;position: absolute;border-radius: 13px;}#cover{position: absolute;left: 100px;top: 10px;width: 50px;height: 50px;background-color: antiquewhite;/* cover作为遮罩挡住了canvas，使用这个可以穿透遮罩，点击到下面的元素 */pointer-events: none;}
</style>

调用：

<template><div style="background-color: black"><div style="display: flex; height: 44px;align-items: center"><div style="width: 100px;color: white">彩光</div><div style="width: 100px;color: white">白光</div></div><div style="display: flex; height: 44px;align-items: center;"><div class="btn_style-common" style="background-color: rgb(41,53,255)" @click="selectColor('rgb(41,53,255)')"></div><div class="btn_style-common" style=" background-color: rgb(255,202,83)" @click="selectColor('rgb(255,202,83)')"></div></div><CanvasColor2 ref="canvasColor" :data="color" :canvas-width="340" :canvas-height="170"></CanvasColor2></div>
</template><script>import CanvasColor2 from "./CanvasColor2";import '../../util/utils.js'export default {name: "yxfColor",components:{CanvasColor2},data() {return {color:'rgb(100,255,83)'}},mounted() {this.$refs.canvasColor.getParamColor(this.color)},methods:{selectColor(color) {if (color.indexOf('rgb') != 0) {this.color = color.colorRgb();} else {this.color = color;}this.$refs.canvasColor.getParamColor(this.color)},}}
</script><style scoped>
.btn_style-common {height: 20px;width: 20px; border-radius: 20px;margin-left: 20px;
}
</style>

颜色从十六进制转换成RGB格式：utils.js

String.prototype.colorRgb = function () {// 16进制颜色值的正则var reg = /^#([0-9a-fA-f]{3}|[0-9a-fA-f]{6})$/;// 把颜色值变成小写var color = this.toLowerCase();if (reg.test(color)) {// 如果只有三位的值，需变成六位，如：#fff => #ffffffif (color.length === 4) {var colorNew = "#";for (var i = 1; i < 4; i += 1) {colorNew += color.slice(i, i + 1).concat(color.slice(i, i + 1));}color = colorNew;}// 处理六位的颜色值，转为RGBvar colorChange = [];for (var j = 1; j < 7; j += 2) {colorChange.push(parseInt("0x" + color.slice(j, j + 2)));}return "RGB(" + colorChange.join(",") + ")";} else {return color;}
};

注意：

组件中最外层的div的位置设为相对位置，页面中的坐标设置都是相对于最外层div的，所以在设置点击位置的时候要减去最外层div的距离顶部的高度。即

var pos = {x: e.clientX,y: e.clientY-outDiv.offsetTop//当该组件整体为相对位置时，y轴的坐标是当前点的位置-最外层距离顶点的高度
}

VUE 自定义取色器组件相关推荐

vue-color-picker-sheldon使用说明（一款基于Vue的取色器/颜色选择器）
vue-color-picker-sheldon使用说明(一款基于Vue的取色器/颜色选择器) Introduction 简介 Functions 功能点 Install 安装 Usage 用法 CS ...
vue自定义音频播放组件_易于创建Vue的自定义音频播放器组件
vue自定义音频播放组件音频更好 (vue-audio-better) Easy to create custom audio player components for Vue.js. 易于为Vu ...
vue 定义全局弹框_VUE路由拦截：Vue自定义全局弹窗组件
前言在任何一个平台中,如果需要增加用户黏度,除了用户需要的基本内容外,用户登录注册提交信息也是非常重要的一环,可以了解用户基本信息,用户喜欢等. 抛出前后端混合开发外,vue可以轻松的实现路由拦截. ...
rideo选中 vue_适用于 Vue 的播放器组件Vue-Video-Player操作
如果h5的标签不能满足你的需求,那就用这个组件Vue-Video-Player吧,也许可以覆盖到你的需求. class="video-player vjs-custom-skin" ...
vue自定义日历小组件
vue自定义小日历组件一.前言自己开发的项目需要用到类似博客侧边栏小日历组件,觉得自己造一个比较随心所欲,更能满足自己的需求,所以决定自己开发一个.最终效果如图所示. 二.日历样式我的这个日历组 ...
Vue自定义InputNumber 计数器组件
1.为什么要自己封装一个InputNumber 计数器组件? 因为原始的el-element的el-input-number组件有问题: 原生组件能输入英文,不能限制只能输入数值: 原始组件能通过键盘 ...
Vue 自定义多选组件
Vue 自定义多选组件子组件(选项卡) checkBoxCard.vue <template><div class="checkBoxCard">< ...
前端 vue 自定义导航栏组件高度及返回箭头自定义 tabbar 图标
前端vue自定义导航栏组件高度及返回箭头自定义tabbar图标, 下载完整代码请访问uni-app插件市场地址:https://ext.dcloud.net.cn/plugin?id=12986 喜 ...
vue 自定义键盘组件_使用Vue自定义数字键盘组件的方法
这篇文章主要介绍了关于使用Vue自定义数字键盘组件的方法,有着一定的参考价值,现在分享给大家,有需要的朋友可以参考一下最近做 Vue 开发,因为有不少页面涉及到金额输入,产品老是觉得用原生的 inp ...
原生js颜色选择器取色器组件
文件结构展示文件结构目录 color-index.js config.js color - picker-index.js 上传太多代码不是很好看,,我上传的都不收费, 完整代码包点击下载如不能下载 ...

VUE 自定义取色器组件

VUE 自定义取色器组件相关推荐

最新文章

热门文章