一个简单的在线调色板

2024-02-25 20:58

文章标签 简单在线调色板

本文主要是介绍一个简单的在线调色板，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

找了一整天的调色板，都没有比较符合俺要求的。。。很郁闷，用别人的色彩算法自己搞了一个。。。恩，也可以去 http://www.x-bs.com 查看效果

源码如下：
<script>
var Panel_Name = 'C_pointer';

function getColor(prtX,prtY){
    var colorR = 0;
    var colorG = 0;
    var colorB = 0;

    if(prtX < 32){
        colorR = 256;
        colorG = prtX * 8;
        colorB = 1;
    }
    if(prtX >= 32 && prtX < 64){
        colorR = 256 - (prtX - 32 ) * 8;
        colorG = 256;
        colorB = 1;
    }
    if(prtX >= 64 && prtX < 96){
        colorR = 1;
        colorG = 256;
        colorB = (prtX - 64) * 8;
    }
    if(prtX >= 96 && prtX < 128){
        colorR = 1;
        colorG = 256 - (prtX - 96) * 8;
        colorB = 256;
    }
    if(prtX >= 128 && prtX < 160){
        colorR = (prtX - 128) * 8;
        colorG = 1;
        colorB = 256;
    }
    if(prtX >= 160){
        colorR = 256;
        colorG = 1;
        colorB = 256 - (prtX - 160) * 8;
    }

    if(prtY < 64){
        colorR = colorR + (256 - colorR) * (64 - prtY) / 64;
        colorG = colorG + (256 - colorG) * (64 - prtY) / 64;
        colorB = colorB + (256 - colorB) * (64 - prtY) / 64;
    }
    if(prtY > 64 && prtY <= 128){
        colorR = colorR - colorR * (prtY - 64) / 64;
        colorG = colorG - colorG * (prtY - 64) / 64;
        colorB = colorB - colorB * (prtY - 64) / 64;
    }
    if(prtY > 128){
        colorR = 256 - ( prtX / 192 * 256 );
        colorG = 256 - ( prtX / 192 * 256 );
        colorB = 256 - ( prtX / 192 * 256 );
    }

    colorR = parseInt(colorR);
    colorG = parseInt(colorG);
    colorB = parseInt(colorB);

    if(colorR >= 256){
        colorR = 255;
    }
    if(colorG >= 256){
        colorG = 255;
    }
    if(colorB >= 256){
        colorB = 255;
    }

    colorR = colorR.toString(16);
    colorG = colorG.toString(16);
    colorB = colorB.toString(16);

    if(colorR.length < 2){
    colorR = 0 + colorR;
    }
    if(colorG.length < 2){
    colorG = 0 + colorG;
    }
    if(colorB.length < 2){
    colorB = 0 + colorB;
    }

    return "#" + colorR + colorG + colorB;
}

function pickColor(obj,id){
    var ta = document.getElementById(id);
    if (document.getElementById(Panel_Name)){
        var PN = document.getElementById(Panel_Name);
    }else{
        var PN = document.createElement('div');
        var A_1 = document.createElement('div');
        var A_2 = document.createElement('div');
        PN.id = Panel_Name;
        PN.style.position = A_1.style.position = A_2.style.position = 'absolute';
        PN.style.width = '192px';
        PN.style.border = A_1.style.border = A_2.style.border = '1px solid black';
        PN.style.height = '154px';
        PN.style.background = 'white url(../Images/ColorPanel.jpg) top no-repeat';
        PN.style.left = '-1';
        PN.style.top = '-1';
        PN.style.zIndex = '6';
        A_1.style.bottom = A_2.style.bottom = '2px';
        A_1.style.width = A_2.style.width = '60px';
        A_1.style.height = A_2.style.height = '20px';
        A_1.style.left = '10px';
        A_2.style.left = '110px';
        A_1.innerHTML = A_2.style.background = obj.style.background;
        A_1.style.overflow = 'hidden';
        PN.appendChild(A_1);
        PN.appendChild(A_2);
        obj.appendChild(PN);
        obj.style.zIndex = '10';
        var xobj = document.getElementById(Panel_Name);
        xobj.onmouseout = function(){
            this.parentNode.style.zIndex = '5';
            this.parentNode.removeChild(this);
        }
        xobj.onclick = function(e){
            var NC = getColor((!e)?(event.x):(e.clientX - (this.offsetLeft + this.parentNode.offsetLeft)),(!e)?(event.y):(e.clientY - (this.offsetTop + this.parentNode.offsetTop)));
            obj.style.background = NC;
            ta.value = NC;
            this.parentNode.style.zIndex = '5';
            this.parentNode.removeChild(this);
        }
        xobj.onmousemove = function(e){
            var NC = getColor((!e)?(event.x):(e.clientX - (this.offsetLeft + this.parentNode.offsetLeft)),(!e)?(event.y):(e.clientY - (this.offsetTop + this.parentNode.offsetTop)));
            A_1.innerHTML = A_2.style.background = NC;
        }
    }
}
</script> <input type="text" οnclick="pickColor(document.getElementById('preview'),'setColor1');this.blur();" id="setColor1" />
<div οnclick="pickColor(this,'setColor1');" style="border: 1px solid black; width: 40px; height: 20px; cursor: pointer;" id="preview"> </div>