js颜色调试器

/* ColorTestViewer 颜色调试器

attribute:
    onchange: Function; //颜色改变回调; 默认null

    //以下属性不建议直接修改
    rgb: RGBColor;         //rgb模式颜色
    hsv: Object{h,s,v};    //hsv模式颜色
    alpha: Number;        //透明度

method:
    update(): undefined;        //更新控件视图 (通常控件被唤出时调用此方法, 前提是在唤出前控件颜色发生了改变)
    setValue(r, g, b, a): this; //设置控件的颜色

demo:
    const ctv = new ColorTestViewer({ 200})
    .setValue(0, 0, 255, 1).update(false)
    .pos(100, 100).render();

    ctv.onchange = v => console.log(v);

*/
class ColorTestViewer extends CanvasAnimateRender{

    get value(){
        return this.rgb.getRGBA(Math.floor(this.alpha * 1000) / 1000);
    }

    constructor(option = {}){
        super(option);

        this.rgb = new RGBColor(255);
        this.hsv = this.rgb.getHSV();
        this.alpha = 1;
        this.cae = null;
        this.onchange = null;

        this.viewSVColor = null;
        this.viewSVsv = null;
        this.viewSVCursor = null;

        this.viewHValueBG = null;
        this.viewHValue = null;
        this.viewHScroll = null;
        this.viewHCursor = null;

        this.viewAScroll = null;
        this.viewACursor = null;

        this.viewColorInfo = null;

        //默认样式
        if(option.canvas === undefined){
            const width = option.width || 200, height = option.height || (width * 0.8), margin = 2, 
            h5 = height * 0.5, h1 = height * 0.1, h3 = height * 0.3;

            this.size(width + margin * 2, height + margin * 5);

            this.initViewSVColor(width, h5);
            this.initViewHScroll(width, h1);
            this.initViewAScroll(width, h1);
            this.initViewHValue(h3, h3);
            this.initViewColorInfo(width - h3, h3);

            this.setViewSVPos(margin, margin);
            this.setViewHScrollPos(margin, h5 + margin * 2);
            this.setViewAScrollPos(margin, h5 + h1 + margin * 3);
            this.setViewHValuePos(margin, h5 + h1 * 2 + margin * 4);
            this.viewColorInfo.pos(this.viewHValue.box.maxX(), this.viewHValue.box.y);
            
            this.initList();
            this.initEvent();

        }
        
    }

    update(u){
        if(this.viewSVColor !== null){
            this.updateViewSVCursor();
            this.updateViewSVColor();
            this.updateViewHValue();
            this.updateViewHCursor();
            this.updateViewACursor();
            this.updateViewColorInfo();
            if(u === true) this.redraw();
        }

        return this;
    }

    setValue(r, g, b, a){
        this.rgb.r = r;
        this.rgb.g = g;
        this.rgb.b = b;
        this.alpha = a;
        this.rgb.getHSV(this.hsv);
        
        return this;
    }

    setValueString(color){
        if(typeof color !== "string") return this;
        var _color = this.getColor(color);
        
        if(_color[0] === "#"){
            const len = _color.length;
            if(len === 4){
                _color = _color.slice(1);
                this.rgb.setFormHex(parseInt("0x"+_color + "" + _color));
            }
            else if(len === 7) this.rgb.setFormHex(parseInt("0x"+_color.slice(1)));
            this.alpha = 1;
            this.rgb.getHSV(this.hsv);
            
        }

        else if(_color[0] === "r" && _color[1] === "g" && _color[2] === "b"){
            const arr = [];
            for(let k = 0, len = _color.length, v = "", is = false; k < len; k++){
                
                if(is === true){
                    if(_color[k] === "," || _color[k] === ")"){
                        arr.push(parseFloat(v));
                        v = "";
                    }
                    else v += _color[k];
                    
                }

                else if(_color[k] === "(") is = true;
                
            }

            this.setValue(arr[0], arr[1], arr[2], arr[3] === undefined ? 1 : arr[3]);
            
        }
        
        return this;
    }

    getColor(str){ //检测 str 是否是颜色类型(16进制, rgb, rgba, 英文); 如果是则返回去除掉空格后的字符串颜色(英文则返回对应16进制颜色)
        var _color = "";
        for(let k = 0, len = str.length; k < len; k++){
            if(str[k] === " ") continue;
            _color += str[k];
        }
        
        if(_color[0] === "#" || (_color[0] === "r" && _color[1] === "g" && _color[2] === "b")) return _color;
        else{
            for(let k = 0, len = ColorRefTable.length; k < len; k++){
                str = ColorRefTable[k];
                if(str[0] === _color) return str[1];
            }
        }

        return "";
    }

    exit(){
        if(this.cae){
            this.onUpSV();
            this.onUpH();
            this.onUpA();
        }

        if(this.domElement.parentElement) this.domElement.parentElement.removeChild(this.domElement);

    }


    //event
    initEvent(){
        
        const cae = new CanvasAnimateEvent(this);

        //SV
        const setSV = (pageX, pageY) => {
            pageX = (pageX - this.domElementRect.x - this.viewSVColor.box.x) / this.viewSVColor.box.w * 100;
            pageY = (1 - (pageY - this.domElementRect.y - this.viewSVColor.box.y) / this.viewSVColor.box.h) * 100;
            if(pageX < 0) pageX = 0;
            else if(pageX > 100) pageX = 100;
            if(pageY < 0) pageY = 0;
            else if(pageY > 100) pageY = 100;
            if(this.hsv.s !== pageX || this.hsv.v !== pageY){
                this.hsv.s = pageX;
                this.hsv.v = pageY;
                this.rgb.setFormHSV(this.hsv.h, this.hsv.s, this.hsv.v);
                if(typeof this.onchange === "function") this.onchange(this.value);
                this.updateViewHValue();
                this.updateViewColorInfo();
                this.updateViewSVCursor();
                this.redraw();
            }

        },

        onMoveSV = event => {
            setSV(event.pageX, event.pageY);
        },

        onUpSV = () => {
            document.body.removeEventListener("pointerup", onUpSV);
            document.body.removeEventListener("pointermove", onMoveSV);
            cae.remove(this.viewSVCursor, 'up', onUpSV);
            cae.remove(this.viewSVCursor, 'move', onMoveSV);
            
        },

        onDownSV = event => {
            setSV(event.pageX, event.pageY);
            cae.add(this.viewSVCursor, "up", onUpSV);
            cae.add(this.viewSVCursor, "move", onMoveSV);
            document.body.addEventListener("pointerup", onUpSV);
            document.body.addEventListener("pointermove", onMoveSV);
            
        }

        cae.add(this.viewSVColor, "down", onDownSV);
        cae.add(this.viewSVCursor, "down", onDownSV);
        this.onUpSV = onUpSV;


        //H
        const setH = (pageX) => {
            pageX = (pageX - this.domElementRect.x - this.viewHScroll.box.x) / this.viewHScroll.box.w * 360;
            if(pageX < 0) pageX = 0;
            else if(pageX > 360) pageX = 360;
            if(this.hsv.h !== pageX){
                this.hsv.h = pageX;
                this.rgb.setFormHSV(this.hsv.h, this.hsv.s, this.hsv.v);
                if(typeof this.onchange === "function") this.onchange(this.value);
                this.updateViewHValue();
                this.updateViewColorInfo();
                this.updateViewSVColor();
                this.updateViewHCursor();
                this.redraw();
            }

        },

        onMoveH = event => {
            setH(event.pageX);
        },

        onUpH = () => {
            document.body.removeEventListener("pointerup", onUpH);
            document.body.removeEventListener("pointermove", onMoveH);
            cae.remove(this.viewHCursor, 'up', onUpH);
            cae.remove(this.viewHCursor, 'move', onMoveH);

        },

        onDownH = event => {
            setH(event.pageX);
            cae.add(this.viewHCursor, "up", onUpH);
            cae.add(this.viewHCursor, "move", onMoveH);
            document.body.addEventListener("pointerup", onUpH);
            document.body.addEventListener("pointermove", onMoveH);

        }
        
        cae.add(this.viewHScroll, "down", onDownH);
        cae.add(this.viewHCursor, "down", onDownH);
        this.onUpH = onUpH;



        //A
        const setA = (pageX) => {
            pageX = (pageX - this.domElementRect.x - this.viewAScroll.box.x) / this.viewAScroll.box.w;
            if(pageX < 0) pageX = 0;
            else if(pageX > 1) pageX = 1;
            if(this.alpha !== pageX){
                this.alpha = pageX;
                if(typeof this.onchange === "function") this.onchange(this.value);
                this.updateViewColorInfo();
                this.updateViewHValue();
                this.updateViewACursor();
                this.redraw();
            }

        },

        onMoveA = event => {
            setA(event.pageX);
        },

        onUpA = () => {
            document.body.removeEventListener("pointerup", onUpA);
            document.body.removeEventListener("pointermove", onMoveA);
            cae.remove(this.viewACursor, 'up', onUpA);
            cae.remove(this.viewACursor, 'move', onMoveA);
            
        },

        onDownA = event => {
            setA(event.pageX);
            cae.add(this.viewACursor, "up", onUpA);
            cae.add(this.viewACursor, "move", onMoveA);
            document.body.addEventListener("pointerup", onUpA);
            document.body.addEventListener("pointermove", onMoveA);

        }

        cae.add(this.viewAScroll, "down", onDownA);
        cae.add(this.viewACursor, "down", onDownA);
        this.onUpA = onUpA;

        this.cae = cae;

    }


    //SV 明度 与 灰度
    updateViewSVCursor(){
        this.viewSVCursor.pos(this.hsv.s / 100 * this.viewSVColor.box.w + this.viewSVColor.box.x - this.viewSVCursor.circle.r, (1 - this.hsv.v / 100) * this.viewSVColor.box.h + this.viewSVColor.box.y - this.viewSVCursor.circle.r);
    }

    updateViewSVColor(){
        this.viewSVColor.clear().fill(ColorTestViewer.emptyColor.setFormHSV(this.hsv.h, 100, 100).getHexString());

    }

    setViewSVPos(x, y){
        this.viewSVColor.pos(x, y);
        this.viewSVsv.pos(x, y);
        this.updateViewSVCursor();
    }

    initViewSVColor(width, height){ //*3
        this.viewSVColor = new CanvasAnimateCustom().size(width, height).rect();

        this.viewSVsv = new CanvasAnimateCustom().size(width, height);
        const gradientS = this.viewSVsv.linearGradient(0, height, width, height, ColorTestViewer.colorS, true),
        gradientV = this.viewSVsv.linearGradient(width, height, width, 0, ColorTestViewer.colorV, true);
        this.viewSVsv.rect().fill(gradientS).fill(gradientV);

        this.viewSVCursor = new CanvasAnimateCustom().size(10, 10);
        this.viewSVCursor.computeCircle();
        this.viewSVCursor.arc().stroke("#fff");

        this.list.push(this.viewSVColor, this.viewSVsv, this.viewSVCursor);

        this.setViewSVPos(0, 0);
        this.updateViewSVColor();

    }


    //H 颜色
    updateViewHValue(){
        this.viewHValue.clear().fill(this.rgb.getRGBA(this.alpha));

    }

    setViewHValuePos(x, y){
        this.viewHValueBG.pos(x, y);
        this.viewHValue.pos(x, y);

    }

    initViewHValue(width, height){ //*2
        this.viewHValueBG = new CanvasAnimateCustom().size(width, height)
        .drawTransparentBG(5, 0, 0, width, height);

        this.viewHValue = new CanvasAnimateCustom().size(width, height)
        .rect();

        this.list.push(this.viewHValueBG, this.viewHValue);
        this.updateViewHValue();

    }

    updateViewHCursor(){
        this.viewHCursor.pos(this.hsv.h / 360 * this.viewHScroll.box.w + this.viewHScroll.box.x - this.viewHCursor.circle.r, this.viewHScroll.box.y);

    }

    setViewHScrollPos(x, y){
        this.viewHScroll.pos(x, y);
        this.updateViewHCursor();
    }

    initViewHScroll(width, height){ //*2
        this.viewHScroll = new CanvasAnimateCustom().size(width, height).rect();
        this.viewHScroll.fill(this.viewHScroll.linearGradient(0, height, width, height, ColorTestViewer.colorH, true));

        const size = Math.min(width, height);
        this.viewHCursor = new CanvasAnimateCustom().size(size, size);
        this.viewHCursor.computeCircle();
        this.viewHCursor.arc().stroke("#fff");
        
        this.list.push(this.viewHScroll, this.viewHCursor);
        this.setViewHScrollPos(0, 0);

    }


    //A 透明度
    updateViewACursor(){
        this.viewACursor.pos(this.alpha * this.viewAScroll.box.w + this.viewAScroll.box.x - this.viewACursor.circle.r, this.viewAScroll.box.y);

    }

    setViewAScrollPos(x, y){
        this.viewAScroll.pos(x, y);
        this.updateViewACursor();
    }

    initViewAScroll(width, height){ //*2
        this.viewAScroll = new CanvasAnimateCustom().size(width, height)
        .drawTransparentBG(5, 0, 0, width, height).rect();
        this.viewAScroll.fill(this.viewAScroll.linearGradient(0, height, width, height, ColorTestViewer.colorA));

        const size = Math.min(width, height);
        this.viewACursor = new CanvasAnimateCustom().size(size, size);
        this.viewACursor.computeCircle();
        this.viewACursor.arc().stroke("rgb(0,160,255)");

        this.list.push(this.viewAScroll, this.viewACursor);
        this.setViewAScrollPos(0, 0);

    }


    //color text
    updateViewColorInfo(){
        
        this.viewColorInfo.clear().text(this.value, "#000000", 12, "center", "center");

    }

    initViewColorInfo(width, height){ //*1
        this.viewColorInfo = new CanvasAnimateCustom().size(width, height);
        this.list.push(this.viewColorInfo);
        this.updateViewColorInfo();
    }



    static emptyColor = new RGBColor();

    static colorH = function (){ //颜色渐变
        const result = [], color = ColorTestViewer.emptyColor;
        for(let h = 0; h < 6; h++){
            color.setFormHSV(h/6*360, 100, 100);
            result.push(color.getHexString());
        }
        
        return result;
    }();

    static colorS = function (){ //饱和度的渐变
        const result = [];
        for(let s = 0; s < 100; s++) result.push('rgba(255,255,255,' + (1 - s / 100) + ")");
        return result;
    }();

    static colorV = function (){ //明度渐变
        const result = [];
        for(let s = 0; s < 100; s++) result.push('rgba(0,0,0,' + (1 - s / 100) + ")");
        return result;
    }();

    static colorA = function (){ //透明度渐变
        const result = [];
        for(let a = 0; a <= 10; a++) result.push('rgba(0,0,0,' + (a / 10) + ")");
        return result;
    }();

}

类API说明

attribute:

　onchange: Function(color); //颜色改变回调; 默认null

    //以下属性不建议直接修改

    rgb: RGBColor;      //rgb模式颜色

    hsv: Object{h,s,v}; //hsv模式颜色

    alpha: Number;      //透明度

 

method:

    update(): undefined;        //更新控件视图 (通常控件被唤出时调用此方法, 前提是在唤出前控件颜色发生了改变)

    setValue(r, g, b, a): this; //设置控件的颜色

demo:

 

    

    const ctv = new ColorTestViewer({ 200})
    
    //设置调试器的颜色
    .setValue(0, 0, 255, 1)
    
    //更新调试器
　  .update(false)

    //设置元素位置, 渲染画布, 添加到body
    .pos(100, 100).render();

    //监听调试器的变动
    ctv.onchange = v => console.log(v);

提取地址: https://pan.baidu.com/s/1TV1j5BeZ7ZhidCq7aQXePA

提取码: 1111