欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

原生JS搭配canvas模式开发的调色盘代码实现

程序员文章站 2022-09-04 19:05:45
之前做了一版纯p版的,有同学反应加载速度太慢。无可否认,1w多个p能不慢么。做那个版本的用意在于好玩... 好了,同样废话不多说,这次先上图吧! 风格是学习的谷歌的,一眼就看得出来,由于ie不兼容...

之前做了一版纯p版的,有同学反应加载速度太慢。无可否认,1w多个p能不慢么。做那个版本的用意在于好玩...

好了,同样废话不多说,这次先上图吧!

原生JS搭配canvas模式开发的调色盘代码实现

风格是学习的谷歌的,一眼就看得出来,由于ie不兼容input color,而且兼容input color的弹出框实在不敢恭维,所以才开始自己着手做。我想总有人问,为啥不用现成的控件!为了站的更高!好了,上代码。

#有同学会问为啥不放附件,要贴代码。没办法公司卡的比较死,附件下不下来。。。快哭了

[javascript] view plain copy

/** 

 * 调色盘  

 * create by j.y.du 

 */  

var du = this.du || {};  

du.yue = this.du.yue || {};  

du.yue.palettetop = function()  

{  

    // vo  

    var _palettetop = this;  

    var _paletteutil = du.yue.paletteutil;  

    var _palettedom = new du.yue.palettedom();  

    var _paletteevent = new du.yue.paletteevent();  

    // datavo   

    var _start = false,_mode = 0,_classname = "my-palette";// mode:0-p模式 1-canvas模式  

    var _currentvo = {};// target:当前点击的input,rgb:当前颜色,hsv,hex  

    var _typelabel = "hex";  

    var _palettectx,_midshowctx,_huectx,_transparentctx,_bottomchangectx,_bottomdefineplusctx;  

    // dom  

    var _outp,_paletteoutp,_palettecirclep,_paletteinnp,_palettecanvas;  

    var _midoutp,_midshowcanvas;  

    var _midbaroutp,_midbarhueoutp,_midbarhuecirclep,_midbarhueeventp,_huecanvas;  

    var _midbartransoutp,_midbartranscirclep,_midbartranseventp,_transparentcanvas;  

    var _bottomoutp,_bottomlabelp,_bottomlabelspan,_bottomchangep,_bottomchangecanvas,_bottominputp,_bottomhexinput,_bottomrinput,_bottomginput,_bottombinput,_bottomainput;  

    var _bottomquickoutp,_bottomquickmodeloutp,_bottomdefineoutp,_bottomdefinepluscanvas;  

    // 三个球的移动对象  

    var _palettevo = {},_huevo = {},_transparentvo = {};  

    /** 

     * 初始化方法 

     */  

    _init();  

    /** 

     * 对外方法 

     */  

    object.defineproperties(this, {  

        debugdata : { writable : false, value : function(dataname) { return eval(dataname); } },  

        start : { writable : false, value : function(classname) { _start = true; classname && (_classname = classname); eval("_startmode_" + _mode).call(); } },  

        finish : { writable : false, value : function() { _start = false; } }  

    });  

    /** 

     * 内部方法 

     */  

    // 初始化  

    function _init()  

    {  

        // 给doc绑定鼠标按下事件  

        document.addeventlistener("mousedown", function(){ _paletteevent.docmousedownevent.apply(this, [_start, _classname, _outp, _setcolor]); });  

    }  

    // 执行事件绑定方法  

    function _fire()  

    {  

        if(_currentvo.target)  

        {  

            _currentvo.target.setattribute("readonly", "readonly");  

            _currentvo.target.style["background-color"] = _currentvo.target.value;  

            _currentvo.target.style["text-indent"] = "-999px";  

            _paletteutil.event.fire(_currentvo.target, "change");  

        }  

    }  

    // 启动0模式  

    function _startmode_0()  

    {  

        // 组装弹框  

        eval("_packagedialogp_"+_mode).call();  

        // 初始化canvas  

        eval("_initcanvas_"+_mode).call();  

        // 绑定事件  

        eval("_bindevent_"+_mode).call();  

    }  

    // 组装弹框  

    function _packagedialogp_0()  

    {  

        _outp = _palettedom.getoutp();  

        // 顶部  

        _paletteoutp = _palettedom.getpaletteoutp();  

        _outp.appendchild(_paletteoutp);  

        // 色盘选择圆圈  

        _palettecirclep = _palettedom.getpalettecirclep();  

        _paletteoutp.appendchild(_palettecirclep);  

        // 色盘内框  

        _paletteinnp = _palettedom.getpaletteinnp();  

        _paletteoutp.appendchild(_paletteinnp);  

        // 色盘  

        _palettecanvas = _palettedom.getpalettecanvas();  

        _paletteinnp.appendchild(_palettecanvas);  

        // 中部   

        _midoutp = _palettedom.getmidoutp();  

        _outp.appendchild(_midoutp);  

        // 色卡  

        _midshowcanvas = _palettedom.getmidshowcanvas();  

        _midoutp.appendchild(_midshowcanvas);  

        // hue外框   

        _midbaroutp = _palettedom.getmidbaroutp();  

        _midoutp.appendchild(_midbaroutp);  

        // 彩虹外框  

        _midbarhueoutp = _palettedom.getmidbarhueoutp();  

        _midbaroutp.appendchild(_midbarhueoutp);  

        // 彩虹圆圈  

        _midbarhuecirclep = _palettedom.getmidbarcirclep();  

        _midbarhueoutp.appendchild(_midbarhuecirclep);  

        // 彩虹条外框包围  

        _midbarhueeventp = _palettedom.getmidbarhuep();  

        _midbarhueoutp.appendchild(_midbarhueeventp);  

        // 彩虹条  

        _huecanvas = _palettedom.getmidbarhuecanvas();  

        _midbarhueeventp.appendchild(_huecanvas);  

        // 透明度外框   

        _midbartransoutp = _palettedom.getmidbarhueoutp();  

        _midbaroutp.appendchild(_midbartransoutp);  

        // 透明度圆圈  

        _midbartranscirclep = _palettedom.getmidbarcirclep();  

        _midbartransoutp.appendchild(_midbartranscirclep);  

        // 透明条外框包围  

        _midbartranseventp = _palettedom.getmidbarhuep();  

        _midbartransoutp.appendchild(_midbartranseventp);  

        // 透明度条  

        _transparentcanvas = _palettedom.getmidbarhuecanvas();  

        _midbartranseventp.appendchild(_transparentcanvas);  

        // 底部  

        _bottomoutp = _palettedom.getbottomoutp();  

        _outp.appendchild(_bottomoutp);  

        // 输入信息外框  

        _bottominputp = _palettedom.getbottominputp();  

        _bottomoutp.appendchild(_bottominputp);  

        // hex框  

        _bottomhexinput = _palettedom.getbottomhexinput();  

        _bottominputp.appendchild(_bottomhexinput);  

        // rgb框  

        _bottomrinput = _palettedom.getbottomrgbinput();  

        _bottomginput = _palettedom.getbottomrgbinput();  

        _bottombinput = _palettedom.getbottomrgbinput();  

        _bottomainput = _palettedom.getbottomrgbinput();  

        // 单控  

        _bottomainput.setattribute("maxlength", "4");  

        // 切换标签  

        _bottomchangep = _palettedom.getbottomchangep();  

        _bottomoutp.appendchild(_bottomchangep);  

        // 切换canvas  

        _bottomchangecanvas = _palettedom.getbottomchangecanvas();  

        _bottomchangep.appendchild(_bottomchangecanvas);  

        // 文字显示和切换框  

        _bottomlabelp = _palettedom.getbottomlabelp();  

        _bottomoutp.appendchild(_bottomlabelp);  

        // 具体文字显示  

        _bottomlabelspan = _palettedom.getbottomlabelspan();  

        _bottomlabelp.appendchild(_bottomlabelspan);  

        // 快速颜色选择包裹  

        _bottomquickoutp = _palettedom.getbottomquickoutp();  

        _outp.appendchild(_bottomquickoutp);  

        // 模板色块包裹  

        _bottomquickmodeloutp = _palettedom.getbottomquickmodeloutp();  

        _bottomquickoutp.appendchild(_bottomquickmodeloutp);  

        // 模板色块  

        _createmodelps();  

        // 自定义色块包裹  

        _bottomdefineoutp = _palettedom.getbottomdefineoutp();  

        _bottomquickoutp.appendchild(_bottomdefineoutp);  

        // 加号  

        _bottomdefinepluscanvas = _palettedom.getbottomdefinepluscanvas();  

        _bottomdefineoutp.appendchild(_bottomdefinepluscanvas);  

          

    }  

    function _createmodelps()  

    {  

        var colors = ["#f44336", "#e91e63", "#9c27b0", "#673ab7", "#3f51b5", "#2196f3", "#00bcd4","#009688","#4caf50",  

        "#8bc34a", "#cddc39","#ffeb3b", "#ffc107", "#ff9800", "#ff5722", "#795548", "#9e9e9e","#607d8b"];  

        for(var a = 0;a<colors.length;a++)  

        {  

            var modelp = _palettedom.getbottomquickmodelp(colors[a]);   

            _bottomquickmodeloutp.appendchild(modelp);  

            // 绑定色块单击事件  

            modelp.addeventlistener("click", function(){ _paletteevent.modelpclickevent.apply(this, [_changebymodel]); });  

        }  

    }  

    // 初始化canvas  

    function _initcanvas_0()  

    {  

        if(!_palettecanvas.getcontext)  

        {  

            throw "your browser don't support canvas! so la-ji!";  

            return;  

        }  

        _palettectx = _palettecanvas.getcontext("2d");  

        _midshowctx = _midshowcanvas.getcontext("2d");  

        _huectx = _huecanvas.getcontext("2d");  

        _drawhue();  

        _transparentctx = _transparentcanvas.getcontext("2d");  

        _bottomchangectx = _bottomchangecanvas.getcontext("2d");  

        _drawchangenoback();  

        _bottomdefineplusctx = _bottomdefinepluscanvas.getcontext("2d");  

        _drawdefineplus();  

    }  

    // 绑定事件  

    function _bindevent_0()  

    {  

        _palettevo = {  

            eventdom : _paletteoutp,  

            callback : _selectbypalette  

        };  

        _huevo = {  

            eventdom : _midbarhueoutp,  

            callback : _selectbyhue   

        };  

        _transparentvo = {  

            eventdom : _midbartransoutp,  

            callback : _selectbytrans         

        };        

        // 最外框阻止冒泡  

        _outp.addeventlistener("mousedown", function(){ _paletteevent.outpmousedownevent.apply(this, [_palettevo, _huevo, _transparentvo]); });  

        // 阻止右键默认事件 需要直接绑定   

        _outp.oncontextmenu = function(){ return _paletteevent.outpcontextmenuevent.apply(this); };  

        // 色盘区域 单击,移动事件  

        _paletteoutp.addeventlistener("mousedown", function(){ _paletteevent.paletteoutpmousedownevent.apply(this, [_selectbypalette]); });  

        _midbarhueoutp.addeventlistener("mousedown", function(){ _paletteevent.midbarhueoutpmousedownevent.apply(this, [_selectbyhue]); });  

        _midbartransoutp.addeventlistener("mousedown", function(){ _paletteevent.midbartransoutpmousedownevent.apply(this, [_selectbytrans]); });  

        document.addeventlistener("mousemove", function(){ _paletteevent.docmousemoveevent.apply(this, [_palettevo, _huevo, _transparentvo]); });  

        document.addeventlistener("mouseup", function(){ _paletteevent.docmouseupevent.apply(this); });  

        // >> 切换事件  

        _bottomchangecanvas.addeventlistener("click", function(){ _paletteevent.bottomchangecanvasclickevent.apply(this, [_changebottomtype]); });  

        _bottomchangecanvas.addeventlistener("mouseenter", function(){ _paletteevent.bottomchangecanvasmouseenterevent.apply(this, [_drawchangehasback]); });  

        _bottomchangecanvas.addeventlistener("mouseleave", function(){ _paletteevent.bottomchangecanvasmouseleaveevent.apply(this, [_drawchangenoback]); });  

        // hex oninput事件  

        _bottomhexinput.addeventlistener("input", function(){ _paletteevent.bottominputevent.apply(this, [_bottominput]); });  

        _bottomrinput.addeventlistener("input", function(){ _paletteevent.bottominputevent.apply(this, [_bottominput]); });  

        _bottomginput.addeventlistener("input", function(){ _paletteevent.bottominputevent.apply(this, [_bottominput]); });  

        _bottombinput.addeventlistener("input", function(){ _paletteevent.bottominputevent.apply(this, [_bottominput]); });  

        _bottomainput.addeventlistener("input", function(){ _paletteevent.bottominputevent.apply(this, [_bottominput]); });  

        // 加号单击,添加自定义颜色  

        _bottomdefinepluscanvas.addeventlistener("click", function(){ _paletteevent.bottomdefinepluscanvasclickevent.apply(this, [_adduserdefinedcolor]); });  

    }  

    // 设置颜色  

    function _setcolor()  

    {  

        _currentvo["target"] = this;  

        _setcolordetail(this.value);  

        _setbottominfo();  

    }  

    // 设置颜色详细  

    function _setcolordetail(value)  

    {  

        _getcurrentvo(value);  

        _setpalette();  

        _setpaletteposition();  

        _setmidshowcolor();  

        _setmidhueposition();  

        _setmidtransposition();  

    }  

    // 获取当前颜色rgb,hex,hsv和活动dom  

    function _getcurrentvo(value)  

    {  

        var rgb = [];  

        if(value && value.touppercase().substring(0,1) == "#")  

        {  

            rgb = _paletteutil.color.hextorgb(value);  

        }else if(value && value.touppercase().substring(0,3) == "rgb")  

        {  

            var _rgbarray = _paletteutil.color.rgbtoarray(value);  

            var hex = _paletteutil.color.rgbtohex(_rgbarray);  

            rgb = _paletteutil.color.hextorgb("#"+hex);  

        }else  

        {  

            rgb = [255, 255, 255, 1];   

        }  

        var hex = _paletteutil.color.rgbtohex(rgb);  

        var hsv = _paletteutil.color.rgbtohsv(rgb.slice(0,3));  

        _currentvo["rgb"] = rgb;  

        _currentvo["hex"] = hex;  

        _currentvo["hsv"] = hsv;  

        var left = hsv[1] / 100 * _palettecanvas.width;  

        var top = (100 - hsv[2]) / 100 * _palettecanvas.height;  

        _currentvo["pos"] = [left, top];  

    }  

    // 绘制彩虹条  

    function _drawhue()  

    {  

        _huectx.save();  

        var huegradient = _huectx.createlineargradient(0, 0, _huecanvas.width, 0);  

        huegradient.addcolorstop(0, "rgb(255, 0, 0)");  

        huegradient.addcolorstop(0.17, "rgb(255, 255, 0)");  

        huegradient.addcolorstop(0.34, "rgb(0, 255, 0)");  

        huegradient.addcolorstop(0.51, "rgb(0, 255, 255)");  

        huegradient.addcolorstop(0.68, "rgb(0, 0, 255)");  

        huegradient.addcolorstop(0.85, "rgb(255, 0, 255)");  

        huegradient.addcolorstop(1, "rgb(255, 0, 0)");  

        _huectx.fillstyle = huegradient;  

        _huectx.beginpath();  

        _huectx.rect(0, 0, _huecanvas.width, _huecanvas.height);  

        _huectx.fill();  

        _huectx.closepath();  

        _huectx.restore();  

    }  

    // 绘制切换按钮  

    function _drawchangetriangle()  

    {  

        _bottomchangectx.save();  

        _bottomchangectx.fillstyle = "#000";  

        _bottomchangectx.beginpath();  

        _bottomchangectx.moveto(9, 4);  

        _bottomchangectx.lineto(12, 9);  

        _bottomchangectx.lineto(6, 9);  

        _bottomchangectx.fill();  

        _bottomchangectx.closepath();  

        _bottomchangectx.beginpath();  

        _bottomchangectx.moveto(6, 12);  

        _bottomchangectx.lineto(12, 12);  

        _bottomchangectx.lineto(9, 17);  

        _bottomchangectx.fill();  

        _bottomchangectx.closepath();  

        _bottomchangectx.restore();  

    }  

    // 绘制切换按钮  

    function _drawchangenoback()  

    {  

        _bottomchangectx.clearrect(0, 0, _bottomchangecanvas.width, _bottomchangecanvas.height);  

        _drawchangetriangle();  

    }  

    // 绘制切换按钮  

    function _drawchangehasback()  

    {  

        _bottomchangectx.clearrect(0, 0, _bottomchangecanvas.width, _bottomchangecanvas.height);  

        _bottomchangectx.save();  

        _bottomchangectx.fillstyle = "#ddd";  

        _bottomchangectx.beginpath();  

        _bottomchangectx.rect(0, 0, _bottomchangecanvas.width, _bottomchangecanvas.height);  

        _bottomchangectx.fill();  

        _bottomchangectx.closepath();  

        _bottomchangectx.restore();  

        _drawchangetriangle();  

    }  

    // 自定义加号  

    function _drawdefineplus()  

    {  

        _bottomdefineplusctx.linewidth = 2;  

        _bottomdefineplusctx.strokestyle = "gray";  

        _bottomdefineplusctx.beginpath();  

        _bottomdefineplusctx.moveto(_bottomdefinepluscanvas.width / 2, 0);  

        _bottomdefineplusctx.lineto(_bottomdefinepluscanvas.width / 2, _bottomdefinepluscanvas.height);  

        _bottomdefineplusctx.stroke();  

        _bottomdefineplusctx.closepath();  

        _bottomdefineplusctx.beginpath();  

        _bottomdefineplusctx.moveto(0, _bottomdefinepluscanvas.height / 2);  

        _bottomdefineplusctx.lineto(_bottomdefinepluscanvas.width, _bottomdefinepluscanvas.height / 2);  

        _bottomdefineplusctx.stroke();  

        _bottomdefineplusctx.closepath();  

    }  

    // 设置色盘  

    function _setpalette()  

    {  

        _palettectx.clearrect(0, 0, _palettecanvas.width, _palettecanvas.height);  

        var hsv = _currentvo["hsv"];  

        var h = math.round(hsv[0]);  

        var height = 1.1;  

        _palettectx.linewidth = height * 3;   

        for(var x = 0;x<=100;x++)  

        {  

            var leftrgb = _paletteutil.color.hsvtorgb([h, 1, 100 - x]);  

            var rightrgb = _paletteutil.color.hsvtorgb([h, 100, 100 - x]);  

            _palettectx.save();  

            var linegradient = _palettectx.createlineargradient(0, x * height, _palettecanvas.width, x * height);  

            linegradient.addcolorstop(0, "#" + _paletteutil.color.rgbtohex(leftrgb));  

            linegradient.addcolorstop(1, "#" + _paletteutil.color.rgbtohex(rightrgb));  

            _palettectx.strokestyle = linegradient;  

            _palettectx.beginpath();  

            _palettectx.moveto(0, x * height);  

            _palettectx.lineto(_palettecanvas.width, x * height);  

            _palettectx.stroke();  

            _palettectx.closepath();  

            _palettectx.restore();  

        }  

        _settransparent();  

    }  

    // 设置透明度条  

    function _settransparent()  

    {  

        _transparentctx.clearrect(0, 0, _transparentcanvas.width, _transparentcanvas.height);  

        _transparentctx.save();  

        var cellwidth = _transparentcanvas.height / 2;  

        var size = math.ceil(_transparentcanvas.width / cellwidth);  

        _transparentctx.save();  

        for(var a = 0;a<2;a++)  

        {  

            for(var b = 0;b<size;b++)  

            {  

                var ab = a + b;  

                _transparentctx.fillstyle = (ab % 2 == 0 ? "#fff" : "#ddd");  

                _transparentctx.beginpath();  

                _transparentctx.rect(b * cellwidth, a * cellwidth, cellwidth, cellwidth);  

                _transparentctx.fill();  

                _transparentctx.closepath();  

            }  

        }  

        _transparentctx.restore();  

        var rgb = _currentvo["rgb"];  

        var transgradient = _transparentctx.createlineargradient(0, 0, _transparentcanvas.width, 0);  

        try  

        {  

            // ie 不识别透明度 会报 syntaxerror,捕获不处理  

            transgradient.addcolorstop(0, "rgb("+rgb[0]+","+rgb[1]+","+rgb[2]+", 0)");  

            transgradient.addcolorstop(1, "rgb("+rgb[0]+","+rgb[1]+","+rgb[2]+", 1)");  

        }catch(e){}  

        _transparentctx.fillstyle = transgradient;  

        _transparentctx.beginpath();  

        _transparentctx.rect(0, 0, _transparentcanvas.width, _transparentcanvas.height);  

        _transparentctx.fill();  

        _transparentctx.closepath();  

        _transparentctx.restore();  

    }  

    // 设置色盘选择器位置  

    function _setpaletteposition()  

    {  

        _palettecirclep.style["left"] = (number(_currentvo["pos"][0]) - 6) + "px";  

        _palettecirclep.style["top"] = (number(_currentvo["pos"][1]) - 6) + "px";  

    }  

    // 设置显示区域颜色  

    function _setmidshowcolor()  

    {  

        var cellwidth = 5;  

        var sizex = _midshowcanvas.width / cellwidth;  

        var sizey = _midshowcanvas.height / cellwidth;  

        _midshowctx.clearrect(0, 0, _midshowcanvas.width, _midshowcanvas.height);  

        _midshowctx.save();  

        for(var a = 0;a<sizex;a++)  

        {  

            for(var b = 0;b<sizey;b++)  

            {  

                var ab = a + b;  

                _midshowctx.fillstyle = (ab % 2 == 0 ? "#fff" : "#ddd");  

                _midshowctx.beginpath();  

                _midshowctx.rect(b * cellwidth, a * cellwidth, cellwidth, cellwidth);  

                _midshowctx.fill();  

                _midshowctx.closepath();  

            }  

        }  

        _midshowctx.restore();  

        _midshowctx.save();  

        _midshowctx.fillstyle = "#" + _currentvo["hex"];  

        _midshowctx.beginpath();  

        _midshowctx.rect(0, 0, _midshowcanvas.width, _midshowcanvas.height);  

        _midshowctx.fill();  

        _midshowctx.closepath();  

        _midshowctx.restore();  

    }  

    // 设置彩虹条的位置  

    function _setmidhueposition()  

    {  

        var hsv = _currentvo["hsv"];  

        var left = hsv[0] / 360 * _huecanvas.width;  

        // 获取彩虹条的doms  

        _midbarhuecirclep.style["left"] = (left - 7) + "px";  

    }  

    // 设置透明度条的位置  

    function _setmidtransposition()  

    {  

        var a = _currentvo["rgb"][3];  

        a == undefined && (a = 1);  

        var left = math.round(a * _transparentcanvas.width);  

        // 获取透明度dom ,  

        _midbartranscirclep.style["left"] = (left - 7) + "px";  

    }  

    // 设置底部信息  

    function _setbottominfo()  

    {  

        _bottominputp.innerhtml = "";  

        _bottomlabelspan.innerhtml = _typelabel;  

        if(_typelabel == "hex")  

        {  

            _bottomhexinput.value = "#" + _currentvo["hex"];  

            _bottominputp.appendchild(_bottomhexinput);  

        }else  

        {  

            _bottomrinput.value = _currentvo["rgb"][0];  

            _bottomginput.value = _currentvo["rgb"][1];  

            _bottombinput.value = _currentvo["rgb"][2];  

            _bottomainput.value = _currentvo["rgb"][3];  

            _bottominputp.appendchild(_bottomrinput);  

            _bottominputp.appendchild(document.createtextnode(" - "));  

            _bottominputp.appendchild(_bottomginput);  

            _bottominputp.appendchild(document.createtextnode(" - "));  

            _bottominputp.appendchild(_bottombinput);  

            _bottominputp.appendchild(document.createtextnode(" - "));  

            _bottominputp.appendchild(_bottomainput);  

        }  

    }  

    // 色盘选择  

    function _selectbypalette(left, top)  

    {  

        // 取色 h不变,s v变化,不通过getimagedata,不准确  

        var s = left / _palettecanvas.width * 100;  

        var v = 100 - top / _palettecanvas.height * 100;  

        _currentvo.hsv[1] = s;  

        _currentvo.hsv[2] = v;  

        var rgb = _paletteutil.color.hsvtorgb(_currentvo.hsv);  

        // 设置活动dom  

        _currentvo.rgb[0] = rgb[0];  

        _currentvo.rgb[1] = rgb[1];  

        _currentvo.rgb[2] = rgb[2];  

        // 设置圆圈位置  

        _currentvo["pos"] = [left, top];  

        _setpaletteposition();  

        // 设置底部信息  

        _currentvo.hex = _paletteutil.color.rgbtohex(_currentvo.rgb);  

        _setbottominfo();  

        // 设置色卡颜色  

        _setmidshowcolor();  

        // 设置透明度条颜色  

        _settransparent()  

        // 设置原始input值  

        _currentvo.target.value = "#" + _currentvo.hex;  

        // 执行方法  

        _fire();  

    }  

    // 彩虹条选择  

    function _selectbyhue(left)  

    {  

        var h = left / _huecanvas.width * 360;  

        _currentvo.hsv[0] = h;  

        // 保留透明度  

        var a = _currentvo.rgb[3];  

        // 生成新的rgb,hex  

        _currentvo.rgb = _paletteutil.color.hsvtorgb(_currentvo.hsv);  

        _currentvo.rgb.push(a);  

        _currentvo.hex = _paletteutil.color.rgbtohex(_currentvo.rgb);  

        // 色盘 透明度重置  

        _setpalette();  

        // 彩虹条位置调整  

        _setmidhueposition();  

        // 设置色卡颜色和底部信息  

        _setmidshowcolor();  

        _setbottominfo();  

        // 设置原始input值  

        _currentvo.target.value = "#" + _currentvo.hex;  

        // 执行方法  

        _fire();  

    }  

    // 透明度选择  

    function _selectbytrans(left)  

    {  

        var a = left / _transparentcanvas.width;  

        _currentvo.rgb[3] = number(a).tofixed(2);  

        _currentvo.hex = _paletteutil.color.rgbtohex(_currentvo.rgb);  

        // 设置透明度条  

        _setmidtransposition();  

        // 设置色卡颜色和底部信息  

        _setmidshowcolor();  

        _setbottominfo();  

        // 设置原始input值  

        _currentvo.target.value = "#" + _currentvo.hex;  

        // 执行方法  

        _fire();  

    }  

    // hex输入  

    function _bottominput()  

    {  

        var value = "";  

        if(_typelabel == "hex")  

        {  

            value = _bottomhexinput.value;  

        }else  

        {  

            value = "rgb("+_bottomrinput.value+","+_bottomginput.value+","+_bottombinput.value+","+_bottomainput.value+")";  

        }  

        _setcolordetail(value);  

        // 设置原始input值  

        _currentvo.target.value = "#" + _currentvo.hex;  

        // 执行方法  

        _fire();  

    }  

    // 切换显示类型  

    function _changebottomtype()  

    {  

        _typelabel = (_typelabel == "hex") ? "rgba" : "hex";  

        _setbottominfo();  

    }  

    // 色块单击改变  

    function _changebymodel(color)  

    {  

        _setcolordetail(color);  

        _setbottominfo();  

        // 设置原始input值  

        _currentvo.target.value = "#" + _currentvo.hex;  

        // 执行方法  

        _fire();  

    }  

    // 添加自定义色块 一共9个child,不算加号,最多8个自定义颜色  

    function _adduserdefinedcolor()  

    {  

        var childcount = _bottomdefineoutp.childelementcount;  

        if(childcount == 9)  

        {  

            return;  

        }  

        var modelp = _palettedom.getbottomquickmodelp("#" + _currentvo.hex);   

        _bottomdefineoutp.insertbefore(modelp, _bottomdefinepluscanvas);  

        // 绑定色块单击事件  

        modelp.addeventlistener("click", function(){ _paletteevent.modelpclickevent.apply(this, [_changebymodel]); });  

        // 绑定右键删除事件  

        modelp.addeventlistener("contextmenu", function(){ _paletteevent.modelpcontextmenuevent.apply(this); });  

    }  

}  

/** 

 * 事件类 

 */  

du.yue.paletteevent = function()  

{  

    var _paletteutil = du.yue.paletteutil;  

    var _palettedragvo = {};// 色盘drag对象  

    var _huedragvo = {};// 彩虹条drag对象  

    var _transdragvo = {};// 透明条drag对象  

    // 对外暴露接口  

    object.defineproperties(this, {  

        docmousedownevent : { writable : false, value : _docmousedownevent },  

        outpmousedownevent : { writable : false, value : _outpmousedownevent },  

        outpcontextmenuevent : { writable : false, value : _outpcontextmenuevent },  

        paletteoutpmousedownevent : { writable : false, value : _paletteoutpmousedownevent },  

        midbarhueoutpmousedownevent : { writable : false, value : _midbarhueoutpmousedownevent },  

        midbartransoutpmousedownevent : { writable : false, value : _midbartransoutpmousedownevent },  

        docmouseupevent : { writable : false, value : _docmouseupevent },  

        docmousemoveevent : { writable : false, value : _docmousemoveevent },  

        bottominputevent : { writable : false, value : _bottominputevent },  

        bottomchangecanvasclickevent : { writable : false, value : _bottomchangecanvasclickevent },  

        bottomchangecanvasmouseenterevent : { writable : false, value : _bottomchangecanvasmouseenterevent },  

        bottomchangecanvasmouseleaveevent : { writable : false, value : _bottomchangecanvasmouseleaveevent },  

        modelpclickevent : { writable : false, value : _modelpclickevent },  

        modelpcontextmenuevent : { writable : false, value : _modelpcontextmenuevent },  

        bottomdefinepluscanvasclickevent : { writable : false, value : _bottomdefinepluscanvasclickevent }  

    });  

    // 加号单击  

    function _bottomdefinepluscanvasclickevent()  

    {  

        arguments[0].call();  

    }  

    // 色块单击  

    function _modelpclickevent()  

    {  

        var color = this.style["background-color"];  

        arguments[0].call(null, color);  

    }  

    // 自定义色块右键  

    function _modelpcontextmenuevent()  

    {  

        this.parentelement.removechild(this);  

    }  

    // 切换显示类型  

    function _bottomchangecanvasclickevent()  

    {  

        var e = _paletteutil.event.getevent(event);  

        // 禁止默认事件  

        _paletteutil.event.preventdefault(e);  

        arguments[0].call();  

    }  

    function _bottomchangecanvasmouseenterevent()  

    {  

        arguments[0].call();  

    }  

    function _bottomchangecanvasmouseleaveevent()  

    {  

        arguments[0].call();  

    }  

    // hex改变事件  

    function _bottominputevent()  

    {  

        arguments[0].call();  

    }  

    // 色盘鼠标按下  

    function _paletteoutpmousedownevent()  

    {  

        var e = _paletteutil.event.getevent(event);  

        // 禁止默认事件  

        _paletteutil.event.preventdefault(e);  

        var clientx = e.clientx;  

        var clienty = e.clienty;  

        var thisleft = this.getboundingclientrect().left;  

        var thistop = this.getboundingclientrect().top;  

        var left = clientx - thisleft;  

        var top = clienty - thistop;  

        arguments[0].call(null, left, top);  

        // 开启drag  

        _palettedragvo.flag = true;  

    }  

    // 彩虹条鼠标按下  

    function _midbarhueoutpmousedownevent()  

    {  

        var e = _paletteutil.event.getevent(event);  

        // 禁止默认事件  

        _paletteutil.event.preventdefault(e);  

        var clientx = e.clientx;  

        var bbox = this.getboundingclientrect();  

        var x = clientx < bbox.left ? 0 : clientx > bbox.right ? bbox.width : (clientx - bbox.left);  

        arguments[0].call(null, x);  

        // 开启drag  

        _huedragvo.flag = true;  

    }  

    // 透明度条鼠标按下  

    function _midbartransoutpmousedownevent()  

    {  

        var e = _paletteutil.event.getevent(event);  

        // 禁止默认事件  

        _paletteutil.event.preventdefault(e);  

        var clientx = e.clientx;  

        var bbox = this.getboundingclientrect();  

        var x = clientx < bbox.left ? 0 : clientx > bbox.right ? bbox.width : (clientx - bbox.left);  

        arguments[0].call(null, x);  

        // 开启drag  

        _transdragvo.flag = true;  

    }  

    // doc鼠标按下事件  [_start, _classname, _outp, _setcolor]  

    function _docmousedownevent()  

    {  

        var _start = arguments[0];   

        if(!_start)  

        {  

            return;  

        }  

        var _outp = arguments[2];  

        var e = _paletteutil.event.getevent(event);  

        var target = _paletteutil.event.gettarget(e);  

        // 判断input type='text'  

        var tagname = target.tagname;  

        var type = target.type;  

        if(!tagname || tagname.tolowercase() != "input" || !type || type.tolowercase() != "text")  

        {  

            // 隐藏弹框  

            document.body.contains(_outp) && document.body.removechild(_outp);  

            return;  

        }  

        // 判断class  

        var classlist = target.classname.split(" ");  

        var _classname = arguments[1];  

        var index = classlist.indexof(_classname);  

        if(index < 0)  

        {  

            // 隐藏弹框  

            document.body.contains(_outp) && document.body.removechild(_outp);  

            return;  

        }  

        document.body.appendchild(_outp);  

        // 确定弹框位置  

        var top = target.offsettop + target.offsetheight;  

        _outp.style["top"] = top + "px";  

        var winwidth = document.body.scrollwidth;  

        var targetleft = target.offsetleft;  

        var targetwidth = target.offsetwidth;  

        var outpwidth = parseint(_outp.style["width"].replace("px", ""));  

        if((targetleft + outpwidth) <= winwidth)  

        {  

            _outp.style["left"] = targetleft + "px";  

        }else  

        {  

            _outp.style["left"] = (winwidth - outpwidth - 10) + "px";  

        }  

        arguments[3].call(target);  

    }  

    // doc鼠标移动事件  

    function _docmousemoveevent()  

    {  

        var e = _paletteutil.event.getevent(event);  

        _palettedragvo.flag && _palettemousemoveevent.call(this, e, arguments[0]);  

        _huedragvo.flag && _huemousemoveevent.call(this, e, arguments[1]);  

        _transdragvo.flag && _transmousemoveevent.call(this, e, arguments[2]);  

    }  

    // 色盘鼠标移动事件  

    function _palettemousemoveevent(e, _palettevo)  

    {  

        // 禁止默认事件  

        _paletteutil.event.preventdefault(e);  

        var eventdom = _palettevo.eventdom;  

        var bbox = eventdom.getboundingclientrect();  

        var clientx = e.clientx;  

        var clienty = e.clienty;  

        var x = clientx < bbox.left ? 0 : clientx > bbox.right ? bbox.width : (clientx - bbox.left);  

        var y = clienty < bbox.top ? 0 : clienty > bbox.bottom ? bbox.height : (clienty - bbox.top);  

        _palettevo.callback.call(null, x, y);  

    }  

    // 彩虹条鼠标移动事件  

    function _huemousemoveevent(e, _huevo)  

    {  

        // 禁止默认事件  

        _paletteutil.event.preventdefault(e);  

        var eventdom = _huevo.eventdom;  

        var bbox = eventdom.getboundingclientrect();  

        var clientx = e.clientx;  

        var x = clientx < bbox.left ? 0 : clientx > bbox.right ? bbox.width : (clientx - bbox.left);  

        _huevo.callback.call(null, x);  

    }  

    // 透明度条鼠标移动事件  

    function _transmousemoveevent(e, _transparentvo)  

    {  

        // 禁止默认事件  

        _paletteutil.event.preventdefault(e);  

        var eventdom = _transparentvo.eventdom;  

        var bbox = eventdom.getboundingclientrect();  

        var clientx = e.clientx;  

        var x = clientx < bbox.left ? 0 : clientx > bbox.right ? bbox.width : (clientx - bbox.left);  

        _transparentvo.callback.call(null, x);  

    }  

    // doc鼠标弹起  

    function _docmouseupevent()  

    {  

        // 停止drag  

        _palettedragvo.flag && (_palettedragvo.flag = false);  

        _huedragvo.flag && (_huedragvo.flag = false);  

        _transdragvo.flag && (_transdragvo.flag = false);  

    }  

    // 最外框阻止冒泡  

    function _outpmousedownevent()  

    {  

        var e = _paletteutil.event.getevent(event);  

        _paletteutil.event.stoppropagation(e);  

    }  

    // 最外框阻止右键默认事件  

    function _outpcontextmenuevent()  

    {  

        return false;  

    }  

}  

/** 

 * dom类 

 */  

du.yue.palettedom = function()  

{  

    var _paletteutil = du.yue.paletteutil;  

    object.defineproperties(this, { &