UseStudio.CloudFront/controls/pc/colorpicker/colorpicker.js

//颜色空间   陈裕豪  赖杰辉
Namespace.register("U.Control.Colorpicker.calen"); //颜色拾取PC命名空间
//返回参数 ：divs 
//调用函数 ：U.Control.Colorpicker.calen.A
U.Control.Colorpicker.calen.A = function () {     //创建div 等相关内容
    var yuanshi = $('<div id="U_Colorpicker_calen_yuanshi"></div>')[0];
    var divs = $$('div', { 'class': 'U_Colorpicker_calen' }, yuanshi);
    var baowei = $$('div', { 'class': 'U_Colorpicker-rgb-dadivs-baowei' }, divs);
    var canvas = $$('canvas', { 'class': 'U_Colorpicker-canvass', 'width': '250', 'height': '250' }, baowei);
    var canvass = $$('canvas', { 'class': 'U_Colorpicker-canvass-two', 'width': '250', 'height': '250', 'style': { 'display': 'none'} }, baowei);
    var yuanquan = $$('div', { 'class': 'U_Colorpicker-rgb-dadivs-yuanquan' }, baowei);
    var changtiaokuang = $$('div', { 'class': 'U_Colorpicker-changtiao-divss-kuang' }, divs);
    var changtiao = $$('div', { 'class': 'U_Colorpicker-changtiao-divss' }, changtiaokuang);
    var changtiaocanvas = $$('canvas', { 'id': 'U_Colorpicker-changtiaocanvas', 'width': '5', 'height': '250', 'style': { 'display': 'none'} }, changtiaokuang);
    var sjx = $$('div', { 'class': 'U_Colorpicker-changtiao-divss-sjx' }, changtiaokuang);
    var block = $$('div', { 'class': 'U_Colorpicker-divss' }, divs);    //创建加载点击颜色的时候  方块显示的颜色
    var divrgb = $$('div', { 'class': 'U_Colorpicker-rgb-dadivs' }, divs);
    var divrgsb = $$('div', { 'class': 'U_Colorpicker-rgbkk-dadivs' }, divrgb);
    var daq = $$('div', { 'class': 'U_Colorpicker-rgbkk-dadivs_1', 'innerHTML': 'R:' }, divrgsb);
    var input = $$('input', { 'class': 'U_Colorpicker-input', 'id': 'U_Colorpicker_1', 'value': '248' }, divrgsb);
    var divrgsb = $$('div', { 'class': 'U_Colorpicker-rgbkk-dadivs' }, divrgb);
    var daq = $$('div', { 'class': 'U_Colorpicker-rgbkk-dadivs_1', 'innerHTML': 'G:' }, divrgsb);
    var input = $$('input', { 'class': 'U_Colorpicker-input', 'id': 'U_Colorpicker_2', 'value': '0' }, divrgsb);
    var divrgsb = $$('div', { 'class': 'U_Colorpicker-rgbkk-dadivs' }, divrgb);
    var daq = $$('div', { 'class': 'U_Colorpicker-rgbkk-dadivs_1', 'innerHTML': 'B:' }, divrgsb);
    var input = $$('input', { 'class': 'U_Colorpicker-input', 'id': 'U_Colorpicker_3', 'value': '42' }, divrgsb);
    var divrgsb = $$('div', { 'class': 'U_Colorpicker-rgbkk-dadivs-1' }, divrgb);
    var daq = $$('div', { 'class': 'U_Colorpicker-rgbkk-dadivs_1', 'innerHTML': '#' }, divrgsb);
    var input = $$('input', { 'class': 'U_Colorpicker-input-2', 'id': 'U_Colorpicker_4', 'value': 'F8002A' }, divrgsb);
    var divssp = $$('div', { 'class': 'U_Colorpicker-s-dadivs' }, divs);
    var ctxs = canvass.getContext("2d");
    var imgs = new Image();
    var globalhexcode = '';
    imgs.src = "images/hb.png";
    imgs.id = "bbbb";
    imgs.onload = function () //确保图片已经加载完毕  
    {
        ctxs.drawImage(imgs, 0, 0, 250, 250);   //  drawImage    canvas放置图片参数
    }
    var ctx = canvas.getContext("2d");    // 创建canvas 
    /*var img2 = new Image();
    img2.id = "aaaa";
    img2.src = "images/hb.png";
    img2.onload = function () //确保图片已经加载完毕  
    {
    ctx.drawImage(img2,0, 0, 250, 250);   //  drawImage    canvas放置图片参数
    }*/
    var img = new Image();
    img.src = "images/tu.png";
    img.id = "bbbb";
    img.onload = function () //确保图片已经加载完毕  
    {
        ctx.drawImage(img, 0, 0, 250, 250);   //  drawImage    canvas放置图片参数
    }
    baowei.onmousedown = function (e) {   //获取canvas里面图片点击当前位置的像素数据
        GG(e);
    }
    baowei.onmousemove = function (e) {   //获取canvas里面图片点击当前位置的像素数据
        GG(e);
    }
    changtiaokuang.onmousedown = function (e) { HH(e); }
    changtiaokuang.onmousemove = function (e) { HH(e); }
    var colord = ["000000", "FFFFFF", "FF0000", "00FF00", "0000FF", "FFFF00", "00FFFF", "FF00FF"];     //添加颜色数组
    var dd;
    for (x = 0; x < 8; x++) {
        dd = $$("div", { "style": { "cssText": "float:left;width:15px;height:15px;margin-right:4px;cursor:pointer;" }, "id": x }, divssp);  //FOR循环颜色数组
        dd.style.background = "#" + colord[x];
        dd.onclick = function () { colorpicker_div(this.id) }  //当这个数组点击的时候
    }
    colorpicker_div = function (a) {     //左边的小正方形点击的时候执行的函数  
        $("#U_Colorpicker_4")[0].value = colord[a];   //让input显示值
        block.style.background = "#" + colord[a];  //让div显示背景颜色
        b = new Array();
        for (x = 0; x < 3; x++) {    //for循环  数组   吧这个变成color值函数
            b[0] = colord[a].substr(x * 2, 2)
            b[3] = "0123456789abcdef";
            b[1] = b[0].substr(0, 1)
            b[2] = b[0].substr(1, 1)
            b[20 + x] = b[3].indexOf(b[1]) * 16 + b[3].indexOf(b[2])
        }
        //$("#bb")[0].value = "rgb(" + b[20] + "," + b[21] + "," + b[22] + ")";    //让div显示color值
        $("#U_Colorpicker_1")[0].value = b[20];      //让input  显示颜色值
        $("#U_Colorpicker_2")[0].value = b[21];      //让input  显示颜色值
        $("#U_Colorpicker_3")[0].value = b[22];      //让input  显示颜色值

    }
    HH = function (e) {
        if (event.buttons == 1) {
            var yy = event.clientY - 6;
            if (yy < 6 || yy > 253) {
                return;
            }
            var a = $('#U_Colorpicker-changtiaocanvas')[0].getContext("2d");
            a.clearRect(0, 0, 5, 250);
            var gradient = a.createLinearGradient(0, 0, 0, 250);
            gradient.addColorStop(0, '#' + globalhexcode);
            gradient.addColorStop(1, '#fff');
            a.fillStyle = gradient;
            a.rect(0, 0, 5, 250);
            a.fill();
            var height = $('.U_Colorpicker-changtiao-divss-sjx')[0].style.top.slice(0, length - 2);
            if (height == 0) {
                height = 1;
                var img = a.getImageData(0, height - 1, 1, height).data;
            } else {
                var img = a.getImageData(0, height - 1, 1, height).data;
            }
            $("#U_Colorpicker_1")[0].value = img[0];
            $("#U_Colorpicker_2")[0].value = img[1];
            $("#U_Colorpicker_3")[0].value = img[2];
            hexcode = '';
            for (var x = 0; x < 3; x++) {
                nn = img[x];
                var cc = "0123456789ABCDEF",
                bb = "",
                aa = nn % 16;
                bb = cc.substr(aa, 1);
                aa = (nn - a) / 16;
                hexcode += cc.substr(aa, 1) + bb;
            }
            $("#U_Colorpicker_4")[0].value = hexcode;
            $(".U_Colorpicker-divss")[0].style.cssText = "background-color: rgb(" + img[0] + ", " + img[1] + ", " + img[2] + ");";
            //console.log(img[0] + ' ' + img[1] + ' ' + img[2]);

            var bfb = e.offsetY / 250;
            $(".U_Colorpicker-canvass-two")[0].style.opacity = bfb;
            sjx.style.cssText += "top:" + yy + "px";

        }
    }
    GG = function (e) {
        if (event.buttons == 1) {
            var xx = event.clientX - 6;
            var yy = event.clientY - 6;
            if (event.clientX > 252 || event.clientY > 252 || event.clientX < 10 || event.clientY < 10) {
                return;
            }
            yuanquan.style.cssText += "left:" + xx + "px;top:" + yy + "px";
            //   yuanquan.style.cssText += "left:" + event.clientX + "px;top:" + event.clientY + "px";
            var canvasOffset = ctx.canvas;  //canvasOffset  获取canvas
            var x = Math.floor(e.pageX - canvasOffset.offsetLeft);  //获取当前点击的时候的在X上的位置
            var y = Math.floor(e.pageY - canvasOffset.offsetTop); //获取当前点击的时候的在y上的位置
            var imgData = ctx.getImageData(x, y, 1, 1);     //imgData   获取图片的像素信息
            var r = imgData.data[0]; var g = imgData.data[1]; var b = imgData.data[2];    //r是rbg第一个参数   g第二个参数  b第三个参数
            var color = [r, g, b];       //加入数组
            var hexcode = "";
            block.style.backgroundColor = "rgb(" + r + "," + g + "," + b + ")";   //让div显示颜色
            //$("#bb")[0].value = "rgb(" + r + "," + g + "," + b + ")";      //让input  显示颜色值
            $("#U_Colorpicker_1")[0].value = r;      //让input  显示颜色值
            $("#U_Colorpicker_2")[0].value = g;      //让input  显示颜色值
            $("#U_Colorpicker_3")[0].value = b;      //让input  显示颜色值
            var n;
            var c;
            for (x = 0; x < 3; x++) {     //for循环color
                n = color[x];
                c = "0123456789ABCDEF", b = "", a = n % 16;
                b = c.substr(a, 1); a = (n - a) / 16;
                hexcode += c.substr(a, 1) + b
            }
            globalhexcode = hexcode;
            $("#U_Colorpicker_4")[0].value = hexcode;
            var hexcodes = "#" + hexcode
            $(".U_Colorpicker-changtiao-divss")[0].style.background = " -webkit-linear-gradient(top, " + hexcodes + "  , white)";
        }
    }
    return yuanshi;    //返回div参数
}