javascript - 具有圆锥形渐变的圆

Question

可以用拉斐尔创建一个圆锥形渐变的圆吗？ 类似 http://raphaeljs.com/picker/ 的色轮但有定制的颜色 例如:“从红色到橙色到黄色到绿色到黄色到橙色到红色)”

Answer 1

是的，尝试这个功能(我从 Raphael 的 Colorpicker 代码中分析，使其独立并添加特定颜色之间的渐变，而不是仅仅增加光盘上的色调):

var paper = Raphael('paper', 800, 600);

var wheel = function (x, y, r, colors) {
    var pi = Math.PI;
    var nbColors = colors.length;
    //    Formatting every color to its RGB values
    for (var i = 0 ; i < nbColors ; i++)
    {
        colors[i] = Raphael.getRGB(colors[i]);
    }
    //    Initialize segments    
    var segments = pi * r * 2 / Math.min(r / 8, 4);
    var a = pi / 2 - pi * 2 / segments * 1.5;
    var path = ["M", x, y - r, "A", r, r, 0, 0, 1, r * Math.cos(a) + x, y - r * Math.sin(a), "L", x, y, "z"].join();
    //    Draw segments
    for (var i = 0 ; i < segments ; i++)
    {
        //    Between which 2 colors is this segment?
        var j = nbColors * i / segments;
        var n = Math.floor(j);
        var d = j % 1;
        var color1 = colors[n];
        var color2 = colors[(n + 1) % nbColors];
        //    Calculate the segment's color from the 2 other
        var color =
        {   r :   Math.round(d * (color2.r - color1.r) + color1.r)
        ,   g :   Math.round(d * (color2.g - color1.g) + color1.g)
        ,   b :   Math.round(d * (color2.b - color1.b) + color1.b)
        }
        //    Draw the sector
        paper.path(path).attr(
        {   stroke: 'none'
        ,   fill: 'rgb(' + color.r + ',' + color.g + ',' + color.b + ')'
        ,   rotation: [90 + (360 / segments) * i, x, y]
        });
    }
    //    Surrounding circle
    return paper.circle(x, y, r).attr(
    {   stroke : '#fff'
    ,   'stroke-width' : Math.round(r * .03)
    });
};

您可以像这样使用它，第四个参数是要使用的颜色数组:

wheel (100, 100, 50, ['#F00', '#0FF', '#00F', '#0F0', '#F80']);
wheel (500, 200, 50, ['rgb(255,0,0)', 'hsb(40,100,100)', '#0F00F0']);