HSV与RGB实现可视化交互转换

HSV与RGB实现可视化交互转换
1.html语言实现可视化界面

2.通过js实现各控件功能
（1）进度条的功能

range_all.onmousemove = function () {
        range_all_control();
    }
    input_R_color.onmousemove = function () {
        input_R.value = input_R_color.value;
        get_R_canvas_color(input_R_color.value);
        color_now_canvas_data(input_R_color.value,input_G_color.value,input_B_color.value);
        range_all_control_data();
        RGB_to_HSV(input_R_color.value,input_G_color.value,input_B_color.value);
        color_map_canvas_show(input_R_color.value,input_G_color.value,input_B_color.value);
    }
    input_G_color.onmousemove = function () {
        input_G.value = input_G_color.value;
        get_G_canvas_color(input_G_color.value);
        color_now_canvas_data(input_R_color.value,input_G_color.value,input_B_color.value);
        range_all_control_data();
        RGB_to_HSV(input_R_color.value,input_G_color.value,input_B_color.value);
        color_map_canvas_show(input_R_color.value,input_G_color.value,input_B_color.value);
    }
    input_B_color.onmousemove = function () {
        input_B.value = input_B_color.value;
        get_B_canvas_color(input_B_color.value);
        color_now_canvas_data(input_R_color.value,input_G_color.value,input_B_color.value);
        range_all_control_data();
        RGB_to_HSV(input_R_color.value,input_G_color.value,input_B_color.value);
        color_map_canvas_show(input_R_color.value,input_G_color.value,input_B_color.value);
    }
    input_H_range.onmousemove = function () {
        input_H.value = input_H_range.value;
        HSV_to_RGB(input_H_range.value,input_S_range.value,input_V_range.value);
    }
    input_S_range.onmousemove = function () {
        input_S.value = input_S_range.value;
        HSV_to_RGB(input_H_range.value,input_S_range.value,input_V_range.value);
    }
    input_V_range.onmousemove = function () {
        input_V.value = input_V_range.value;
        HSV_to_RGB(input_H_range.value,input_S_range.value,input_V_range.value);
    }

（2）选择性数据的功能

function get_data() {
        input_R_color.value=Math.round(input_R.value);
        input_G_color.value=Math.round(input_G.value);
        input_B_color.value=Math.round(input_B.value);
        get_R_canvas_color(input_R_color.value);
        get_G_canvas_color(input_G_color.value);
        get_B_canvas_color(input_B_color.value);
        color_now_canvas_data(input_R_color.value,input_G_color.value,input_B_color.value);
        RGB_to_HSV(input_R_color.value,input_G_color.value,input_B_color.value);
        color_map_canvas_show(input_R_color.value,input_G_color.value,input_B_color.value);
    }
    function get_R_data() {
        input_R_color.value=Math.round(input_R.value);
        get_R_canvas_color(input_R_color.value);
        color_now_canvas_data(input_R_color.value,input_G_color.value,input_B_color.value);
        range_all_control_data();
        RGB_to_HSV(input_R_color.value,input_G_color.value,input_B_color.value);
        color_map_canvas_show(input_R_color.value,input_G_color.value,input_B_color.value);
    }
    function get_R_canvas_color(r) {
        input_R_canvas_context.fillStyle = 'rgb('+r+',0,0)';
        input_R_canvas_context.fillRect(0,0,192,10);
    }
    function get_G_data() {
        input_G_color.value=Math.round(input_G.value);
        get_G_canvas_color(input_G_color.value);
        color_now_canvas_data(input_R_color.value,input_G_color.value,input_B_color.value);
        range_all_control_data();
        RGB_to_HSV(input_R_color.value,input_G_color.value,input_B_color.value);
        color_map_canvas_show(input_R_color.value,input_G_color.value,input_B_color.value);
    }
    function get_G_canvas_color(g) {
        input_G_canvas_context.fillStyle = 'rgb(0,'+g+',0)';
        input_G_canvas_context.fillRect(0,0,192,10);
    }
    function get_B_data() {
        input_B_color.value=Math.round(input_B.value);
        get_B_canvas_color(input_B_color.value);
        color_now_canvas_data(input_R_color.value,input_G_color.value,input_B_color.value);
        range_all_control_data();
        RGB_to_HSV(input_R_color.value,input_G_color.value,input_B_color.value);
        color_map_canvas_show(input_R_color.value,input_G_color.value,input_B_color.value);
    }
    function get_B_canvas_color(b) {
        input_B_canvas_context.fillStyle = 'rgb(0,0,'+b+')';
        input_B_canvas_context.fillRect(0,0,192,10);
    }
    function get_H_data() {
        input_H_range.value = input_H.value;
        HSV_to_RGB(input_H_range.value,input_S_range.value,input_V_range.value);
    }
    function get_S_data() {
        input_S_range.value = input_S.value;
        HSV_to_RGB(input_H_range.value,input_S_range.value,input_V_range.value);
    }
    function get_V_data() {
        input_V_range.value = input_V.value;
        HSV_to_RGB(input_H_range.value,input_S_range.value,input_V_range.value);
    }
    function color_now_canvas_data(r,g,b) {
        color_now_canvas.fillStyle = 'rgb('+r+','+g+','+b+')';
        color_now_canvas.fillRect(0,0,50,340);
    }

（3）HSV转换RGB

function HSV_to_RGB(h,s,v) {
        var s=s/100;
        var v=v/100;
        var h1=Math.floor(h/60) % 6;
        var f=h/60-h1;
        var p=v*(1-s);
        var q=v*(1-f*s);
        var t=v*(1-(1-f)*s);
        var r,g,b;
        switch(h1){
            case 0:
                r=v;
                g=t;
                b=p;
                break;
            case 1:
                r=q;
                g=v;
                b=p;
                break;
            case 2:
                r=p;
                g=v;
                b=t;
                break;
            case 3:
                r=p;
                g=q;
                b=v;
                break;
            case 4:
                r=t;
                g=p;
                b=v;
                break;
            case 5:
                r=v;
                g=p;
                b=q;
                break;
        }
        r = Math.round(r*255);
        g = Math.round(g*255);
        b = Math.round(b*255);
        input_R_color.value = input_R.value = r;
        input_G_color.value = input_G.value = g;
        input_B_color.value = input_B.value = b;
        range_all_control_data();
        color_now_canvas_data(input_R_color.value,input_G_color.value,input_B_color.value);
        color_map_canvas_show(input_R_color.value,input_G_color.value,input_B_color.value);
    }

（4）RGB转换HSV

function RGB_to_HSV(r,g,b) {
        r=r/255;
        g=g/255;
        b=b/255;
        var h,s,v;
        var min=Math.min(r,g,b);
        var max=v=Math.max(r,g,b);
        var l=(min+max)/2;
        var difference = max-min;

        if(max==min){
            h=0;
        }else{
            switch(max){
                case r: h=(g-b)/difference+(g < b ? 6 : 0);break;
                case g: h=2.0+(b-r)/difference;break;
                case b: h=4.0+(r-g)/difference;break;
            }
            h=Math.round(h*60);
        }
        if(max==0){
            s=0;
        }else{
            s=1-min/max;
        }
        s=Math.round(s*100);
        v=Math.round(v*100);
        input_H_range.value = input_H.value = h;
        input_S_range.value = input_S.value = s;
        input_V_range.value = input_V.value = v;
    }

（5）色谱实现

var linearGradient = color_map2_context.createLinearGradient(0,0,260,0);
        linearGradient.addColorStop(0  , 'rgb(255, 0, 0)');
        linearGradient.addColorStop(1/6, 'rgb( 255, 0, 255)');
        linearGradient.addColorStop(2/6, 'rgb( 0, 0, 255)');
        linearGradient.addColorStop(3/6  ,'rgb( 0, 255, 255)');
        linearGradient.addColorStop(4/6, 'rgb( 0,255,0)');
        linearGradient.addColorStop(5/6, 'rgb( 255, 255,0)');
        linearGradient.addColorStop(6/6, 'rgb( 255, 0,0)');
        color_map2_context.fillStyle = linearGradient;
        color_map2_context.fillRect(0,0,260,50);

（6）综合色块实现

function color_map_canvas_show(r,g,b) {
        var linearGradient1 = color_map_context.createLinearGradient(0,0,260,0);
        for(var i=1;i<=255;i++)
        {
            linearGradient1 = color_map_context.createLinearGradient(0,i,260,i);
            linearGradient1.addColorStop(0,'rgb('+(255-i)+','+(255-i)+','+(255-i)+')');
            linearGradient1.addColorStop(1,'rgb('+(Math.round(r-r/255*i))+','+(Math.round(g-g/255*i))+','+(Math.round(b-b/255*i))+')');
            color_map_context.fillStyle=linearGradient1;
            color_map_context.fillRect(0,i,260,1);
        }
    }

（7）色谱转换为RGB

function range_all_control() {
        var value_all=range_all.value;
        var t=100/6;
        var r,g,b;
        if(value_all/t<1)
        {
            r=255;
            g=0;
            b=Math.round(255/t*value_all);
        }
        else if(value_all/t<2)
        {
            r=Math.round(255-(255/t*(value_all-t)));
            g=0;
            b=255;
        }
        else if(value_all/t<3)
        {
            r=0;
            g=Math.round(255/t*(value_all-2*t));
            b=255;
        }
        else if(value_all/t<4)
        {
            r=0;
            g=255;
            b=Math.round(255-(255/t*(value_all-3*t)));
        }
        else if(value_all/t<5)
        {
            r=Math.round(255/t*(value_all-4*t));
            g=255;
            b=0;
        }
        else
        {
            r=255;
            g=Math.round(255-(255/t*(value_all-5*t)));
            b=0;
        }
        input_R.value = r;
        input_G.value = g;
        input_B.value = b;
        get_data();
    }

（8）RGB转换为色谱

function range_all_control_data() {
        var r = input_R_color.value;
        var g = input_G_color.value;
        var b = input_B_color.value;
        var t;
        var m = 0;
        if(r>=255/2) r = 255;
        else r = 0;
        if(g>=255/2) g = 255;
        else g = 0;
        if(b>=255/2) b = 255;
        else b = 0;
        if(r == 255 && g == 0 && b == 0) m = 0;
        if(r == 255 && g == 0 && b == 255) m = 1/6;
        if(r == 0 && g == 0 && b == 255) m = 2/6;
        if(r == 0 && g == 255 && b == 255) m = 3/6;
        if(r == 0 && g == 255 && b == 0) m = 4/6;
        if(r == 255 && g == 255 && b == 0) m = 5/6;
        if(r == 255 && g == 0 && b == 0) m = 6/6;
        t = 100*m;
        range_all.value = t;
    }

（9）控件实现

<head>
    <meta charset="UTF-8">
    <title>RGB与HSV转换</title>
</head>
<body>
<div style="width: 270px;float: left;margin-left: auto">
    <canvas id="color_map" width="260" height="260" style="border: 1px solid #000000;margain:0 auto;"></canvas>
    <canvas id="color_map2" width="260" height="50" style="border: 1px solid #000000;margain:0 auto;"></canvas>
    <input type="range" id="range_all" min="0" max="255*6" step="1" value="0" style="border: 1px solid #000000;margain:0 auto;width: 260px" onclick="range_all_control()">
</div>
<div style="width: 60px;float: left;margin-left: auto">
    <canvas id="color_now" width="50px" height="340" style="border: 1px solid #000000;margain:0 auto;"></canvas>
</div>
<div style="width: 210px;float: left;margin-left: auto">
    <div id="color_R" style="width: 200px;float: left;margin-left: auto">
        R:<input type="number" id="input_R" min="0" max="255" step="1" value="0" onclick="get_R_data()">
        <input type="range" id="input_R_color" min="0" max="255" step="1" value="0" style="border: 1px solid #000000;margain:0 auto;width: 190px" onclick="get_R_canvas_color()">
        <canvas id="color_R_1" width="190px" height="10px" style="border: 1px solid #000000;margain:0 auto;"></canvas>
    </div>
    <div id="color_G" style="width: 200px;float: left;margin-left: auto">
        G:<input type="number" id="input_G" min="0" max="255" step="1" value="0" onclick="get_G_data()">
        <input type="range" id="input_G_color" min="0" max="255" step="1" value="0" style="border: 1px solid #000000;margain:0 auto;width: 190px" onclick="get_G_canvas_color()">
        <canvas id="color_G_1" width="190px" height="10px" style="border: 1px solid #000000;margain:0 auto;"></canvas>
    </div>
    <div id="color_B" style="width: 200px;float: left;margin-left: auto">
        B:<input type="number" id="input_B" min="0" max="255" step="1" value="0" onclick="get_B_data()">
        <input type="range" id="input_B_color" min="0" max="255" step="1" value="0" style="border: 1px solid #000000;margain:0 auto;width: 190px" onclick="get_B_canvas_color()">
        <canvas id="color_B_1" width="190px" height="10px" style="border: 1px solid #000000;margain:0 auto;"></canvas>
    </div>
    <div id="color_H" style="width: 200px;float: left;margin-left: auto">
        H:<input type="number" id="input_H" min="0" max="360" step="1" value="0" onclick="get_H_data()">
        <input type="range" id="input_H_range" min="0" max="360" step="1" value="0" style="border: 1px solid #000000;margain:0 auto;width: 190px" >
    </div>
    <div id="color_S" style="width: 200px;float: left;margin-left: auto">
        S:<input type="number" id="input_S" min="0" max="100" step="1" value="0" onclick="get_S_data()">
        <input type="range" id="input_S_range" min="0" max="100" step="1" value="0" style="border: 1px solid #000000;margain:0 auto;width: 190px" >
    </div>
    <div id="color_V" style="width: 200px;float: left;margin-left: auto">
        V:<input type="number" id="input_V" min="0" max="100" step="1" value="0" onclick="get_V_data()">
        <input type="range" id="input_V_range" min="0" max="100" step="1" value="0" style="border: 1px solid #000000;margain:0 auto;width: 190px" >
    </div>
</div>

（10）控件获取

 var color_map = document.getElementById("color_map");
    var color_map_context = color_map.getContext("2d");
    var color_map2 = document.getElementById("color_map2");
    var color_map2_context =color_map2.getContext("2d");
    var range_all = document.getElementById("range_all");
    var color_now = document.getElementById("color_now");
    var color_now_canvas = color_now.getContext("2d");
    var input_R = document.getElementById("input_R");
    var input_R_color = document.getElementById("input_R_color");
    var input_R_canvas = document.getElementById("color_R_1");
    var input_R_canvas_context = input_R_canvas.getContext("2d");
    var input_G = document.getElementById("input_G");
    var input_G_color = document.getElementById("input_G_color");
    var input_G_canvas = document.getElementById("color_G_1");
    var input_G_canvas_context = input_G_canvas.getContext("2d");
    var input_B = document.getElementById("input_B");
    var input_B_color = document.getElementById("input_B_color");
    var input_B_canvas = document.getElementById("color_B_1");
    var input_B_canvas_context = input_B_canvas.getContext("2d");
    var input_H = document.getElementById("input_H");
    var input_H_range = document.getElementById("input_H_range");
    var input_S = document.getElementById("input_S");
    var input_S_range = document.getElementById("input_S_range");
    var input_V = document.getElementById("input_V");
    var input_V_range = document.getElementById("input_V_range");

3.原理
先将界面用HTML控件实现，然后获取控件对象，然后再用window.onload初始化原始界面，在功能中，用函数链接数字选框，用函数链接canvas颜色框，用onmousemove功能实现滑动条，并在滑动条调用函数，在函数中相互调用实现联动功能。