VUE 自定义取色器组件的实现

本文主要介绍了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 => #ffffff
        if (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;
        }
        // 处理六位的颜色值,转为RGB
        var 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 取色器 内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们!

(0)

相关推荐

  • Flutter实现矩形取色器的封装

    前言 最近看插件库上少有的取色器大都是圆形的或者奇奇怪的的亚子,所以今天做两个矩形的颜色取色器 提示:以下是本篇文章正文内容,下面案例可供参考 一.BarTypeColorPicker 条形选色板的功能实现,颜色的获取是通过位置来判断,然后赋予相应的颜色.这个封装好的组件可通过colorListener.onTapUpListener的回调方法,把颜色传出去. 代码如下(示例): import 'package:flutter/cupertino.dart'; import 'package:f

  • 使用react-color实现前端取色器的方法

    背景 我们可以通过react-color实现前端界面的取色器,效果如下图所示: 安装 npm i react-color -S 使用 import React, { Component, Fragment, createRef } from 'react'; import { Popover } from 'antd'; import { SketchPicker } from 'react-color'; type StateType = { subtitleColor: string; };

  • 详解Python GUI工具取色器

    Python 提供了多个图形开发界面的库,几个常用 Python GUI 库如下: Tkinter: Tkinter 模块(Tk 接口)是 Python 的标准 Tk GUI 工具包的接口 .Tk 和 Tkinter 可以在大多数的 Unix 平台下使用,同样可以应用在 Windows 和 Macintosh 系统里.Tk8.0 的后续版本可以实现本地窗口风格,并良好地运行在绝大多数平台中. wxPython:wxPython 是一款开源软件,是 Python 语言的一套优秀的 GUI 图形库,

  • JS实现的RGB网页颜色在线取色器完整实例

    本文实例讲述了JS实现的RGB网页颜色在线取色器.分享给大家供大家参考,具体如下: 运行效果图如下: 完整实例代码如下: <html> <head> <meta content="text/html; charset=utf-8" http-equiv="content-type"> <meta name="description" content="在线取色器"> <me

  • js从10种颜色中随机取色实现每次取出不同的颜色

    昨天在做js 从10种颜色中随机取色,并每次取出的颜色不同的时候,考虑了很多,最终用如下来实现: 复制代码 代码如下: var colorList = ["#FFFF99","#B5FF91","#94DBFF","#FFBAFF","#FFBD9D","#C7A3ED","#CC9898","#8AC007","#CCC007"

  • VUE 自定义取色器组件的实现

    本文主要介绍了VUE 自定义取色器组件的实现,分享给大家,具体如下: 效果: 功能: 1.点击色块中任何一点,色块中的正方形显示该点的颜色. 2.点击色块上方的颜色圆点,色块选中该颜色所在的位置,并在正方形中显示相应颜色. 3.上方圆点如果不是rgb格式,需要转换. 4.组件的大小从调用它的页面中传过去. 组件代码(CanvasColor2.vue): <template> <!--    <div>-->     <div id='outDiv' style=&

  • 使用Vue自定义数字键盘组件(体验度极好)

    为了满足用户体验,小编用vue写了一个自定义数字键盘组件,用户体验度还不错. 废话不多说,先上效果图吧~ 效果图 具体实现 布局排版 <div class='key-container'> <div class='key-title'>请输入金额</div> <div class='input-box'>{{ money }}</div> <div class='keyboard' @click.stop='_handleKeyPress'

  • vue自定义switch开关组件,实现样式可自行更改

    用法: import switchc from './public/switch' <switchc v-model="value1" text="on|off"></switchc> 属性 text 非必填,类型为string,要求格式为"on|off" ,以 | 分隔 事件 change html部分: <template> <div> <span class="weui-swi

  • 使用Vue 自定义文件选择器组件的实例代码

    本文 GitHub  https://github.com/qq44924588... 上已经收录,更多往期高赞文章的分类,也整理了很多我的文档,和教程资料.欢迎Star和完善,大家面试可以参照考点复习,希望我们一起有点东西. 文件选择元素是web上最难看的 input 类型之一.它们在每个浏览器中实现的方式不同,而且通常非常难看.这里有一个解决办法,就是把它封装成一个组件. 安装 如果你尚未设置项目,可以使用 vue-cli 的 webpack-simple 模板启动一个新项目. $ npm

  • Vue自定义多选组件使用详解

    本文实例为大家分享了Vue自定义多选组件使用的具体代码,供大家参考,具体内容如下 子组件(选项卡) checkBoxCard.vue <template> <div class="checkBoxCard"> <div :class="`box ${check && 'boxCheck'}`" @click="checked(), updateData()"> {{ name }} </d

  • 适用于 Vue 的播放器组件Vue-Video-Player操作

    如果h5的标签<vedio>不能满足你的需求,那就用这个组件Vue-Video-Player吧,也许可以覆盖到你的需求. <video-player class="video-player vjs-custom-skin" ref="videoPlayer" :playsinline="true" :options="playerOptions" ></video-player> 配置参数:

  • vue自定义翻页组件的方法

    本文实例为大家分享了vue自定义翻页组件的具体代码,供大家参考,具体内容如下 效果图如下: 1.在components建立page.vue文件 <template>     <div class="pagination">         <!-- 上 -->         <button :disabled="pageNo == 1" @click="getPageNo(pageNo - 1)">

  • Vue自定义全局弹窗组件操作

    写在前面 页面中会有很多时候需要弹窗提示,我们可以写一个弹窗组件,但是如果每个页面都引入这个组件,太麻烦了,所以我们将它变成全局组件,需要用的时候直接通过JS调用即可,不需要在每个页面引入了 效果图 弹窗组件 新建一个弹窗的组件--popup.vue <template> <transition name='fade'> <!-- 蒙版 --> <div class="mask" v-if="show" @touchmove

  • vue自定义封装按钮组件

    vue按钮组件的自定义封装代码,供大家参考,具体内容如下 封装按钮组件 button.vue <template> <button class="button ellipsis" :class="[size,type]"> <slot /> </button> </template> <script> export default { name: 'Button', props: { size:

  • vue自定义数字输入框组件

    最近自己在练习组件开发,做了一个简单的数字输入框加减的组件,效果图如下: 组件可以传入三个参数,value是初始化值,max是可输入的最大值,min是可输入最小值,当然参数可以按需求继续扩展的. 组件代码如下: <template>     <div style="text-align: center;margin-top: 20px;">         <input type="text" v-model="current

随机推荐