jQuery旋钮，Angular渐变

Question

有没有办法在jQuery的knob插件中添加角度渐变，使其从一种颜色开始，沿着弧线逐渐转变成另一种颜色？

- Adee

Answer 1

我在互联网上寻找解决方案，但没有人尝试过或发表过解决方案。最终我发布了一个问答。如果有更好的解决方案，请与我们分享。

在初始化期间，我已经覆盖了draw方法，并检查了属性shaded="true"。如果存在，则形成渐变，从白色开始向fgColor移动。要选择起始颜色而不是白色，请设置属性shadeColor="#(颜色十六进制代码)"。

<input class="knob" value="95" autocomplete="off" data-readOnly=true data-fgColor="#FF0000" data-bgColor="transparent" shaded="1" shadeColor="#00FF00"/>
<script>
    $(function(){
        $('.knob').knob({
            draw : function () {
                var a = this.angle(this.cv)  // Angle
                , sa = this.startAngle          // Previous start angle
                , sat = this.startAngle         // Start angle
                , ea                            // Previous end angle
                , eat = sat + a                 // End angle
                , r = 1;

                this.g.lineWidth = this.lineWidth;

                if(this.$.attr('shaded')){
                    var color1 = r ? this.o.fgColor : this.fgColor;
                    var color2 = this.$.attr('shadeColor') ? this.$.attr('shadeColor') : '#ffffff';
                    var grad = getGradient(color2, color1);

                    var saDeg = parseInt((sa * 180 / Math.PI) % 360);
                    var eatDeg = parseInt((eat * 180 / Math.PI) % 360);

                    for(var angle = saDeg;(angle % 360) != eatDeg;angle++){
                        sat = angle * (Math.PI / 180);
                        eat = (angle + 2) * (Math.PI / 180);

                        if(grad.color2[0] != grad.color1[0] && (angle + 1) % grad.steps[0] == 0){
                            grad.color1[0] += grad.adder[0];
                        }
                        if(grad.color2[1] != grad.color1[1] && (angle + 1) % grad.steps[1] == 0){
                            grad.color1[1] += grad.adder[1];
                        }
                        if(grad.color2[2] != grad.color1[2] && (angle + 1) % grad.steps[2] == 0){
                            grad.color1[2] += grad.adder[2];
                        }

                        color = '#' + toHex(grad.color1[0]) + toHex(grad.color1[1]) + toHex(grad.color1[2]);

                        this.g.beginPath();
                        this.g.strokeStyle = color;
                        this.g.arc(this.xy, this.xy, this.radius, sat, eat, false);
                        this.g.stroke();
                    }
                } else {
                    this.g.beginPath();
                    this.g.strokeStyle = r ? this.o.fgColor : this.fgColor ;
                    this.g.arc(this.xy, this.xy, this.radius, sat, eat, false);
                    this.g.stroke();
                }

                return false;
            }
        });
    });

    function getGradient(color1, color2){
        var ret = new Object();

        ret.color1 = new Array();
        ret.color2 = new Array();
        ret.steps = new Array();
        ret.adder = new Array();

        color1 = color1.replace('#','');
        ret.color1[0] = parseInt(color1.slice(0,2), 16),
        ret.color1[1] = parseInt(color1.slice(2,4), 16),
        ret.color1[2] = parseInt(color1.slice(4,6), 16);

        color2 = color2.replace('#','');
        ret.color2[0] = parseInt(color2.slice(0,2), 16),
        ret.color2[1] = parseInt(color2.slice(2,4), 16),
        ret.color2[2] = parseInt(color2.slice(4,6), 16);

        ret.steps[0] = (ret.color1[0] == ret.color2[0])? 0 : parseInt(360 / Math.abs(ret.color1[0] - ret.color2[0])),
        ret.steps[1] = (ret.color1[1] == ret.color2[1])? 0 : parseInt(360 / Math.abs(ret.color1[1] - ret.color2[1])),
        ret.steps[2] = (ret.color1[2] == ret.color2[2])? 0 : parseInt(360 / Math.abs(ret.color1[2] - ret.color2[2])),

        ret.adder[0] = (ret.color1[0] > ret.color2[0])? -1 : 1;
        ret.adder[1] = (ret.color1[1] > ret.color2[1])? -1 : 1;
        ret.adder[2] = (ret.color1[2] > ret.color2[2])? -1 : 1;

        return ret;
    }

    function toHex(number){
        number = number.toString(16);
        if(number.length < 2){
            number = '0' + number;
        }
        return number;
    }
</script>

它为每个度数绘制一个单独的弧线（为了保持平滑，弧角为2度而不是1度）。弧的颜色从fgColor过渡到shadeColor。

颜色混合效果类似于油漆混合而不是光混合，因此如果您从绿色开始向红色移动，您将不会在中心获得黄色阴影。用光混合效果看起来很酷，但不知道如何确切实现。此外，这不是一个良好优化的代码，它只是一个解决方案。还有很大的改进空间...

- Adee

---

你的圆并不是从顶部开始，而是从东方90度开始。奇怪的是，红色在90度处停止，然后绿色出现了...我尝试将角度改为-90度，但红色仍然在东方90度处停止。我该如何将红色更改为0度？问候 Frank - Frank

@Frank，我已经修复了。现在它将从0开始。你可以通过使用data-angleOffset参数来指定一个起始角度。希望能满足你的要求。 - Adee

谢谢Adee的回复，问题是什么？ - Frank

不用谢。在我的情况下，我已经将起始角度硬编码为90度，因为它以90度的偏移开始。 - Adee

Answer 2

太棒了，正是我所需要的！我还添加了“cursor”选项，因为这是唯一还没有工作的选项。

var drawGradient = function () {

    var a = this.angle(this.cv)  // Angle
        , sa = this.startAngle          // Previous start angle
        , sat = this.startAngle         // Start angle
        , eat = sat + a                 // End angle
        , r = 1;

    this.g.lineCap = this.lineCap;
    this.g.lineWidth = this.lineWidth;

    if (this.o.bgColor !== "none") {
        this.g.beginPath();
        this.g.strokeStyle = this.o.bgColor;
        this.g.arc(this.xy, this.xy, this.radius, this.endAngle - 0.00001, this.startAngle + 0.00001, true);
        this.g.stroke();
    }

    if (this.$.attr('shaded')) {
        var color1 = r ? this.o.fgColor : this.fgColor;
        var color2 = this.$.attr('shadeColor') ? this.$.attr('shadeColor') : '#ffffff';
        var grad = getGradient(color2, color1);

        var saDeg = parseInt((sa * 180 / Math.PI) % 360);
        var eatDeg = parseInt((eat * 180 / Math.PI));

        var normalizedAngle = 0
        var normalizedEatAngle = eatDeg - saDeg;

        if(this.o.cursor == true) {
            var size = 40;
        } else if(this.o.cursor != false) {
            var size = this.o.cursor;
            this.o.cursor = true;
        }

        if(this.o.cursor) {
            if(normalizedEatAngle <= size) {
                normalizedEatAngle = size;
            }
        }
        for (var angle = saDeg; normalizedAngle < normalizedEatAngle; angle++, normalizedAngle++) {

            sat = angle * (Math.PI / 180);
            eat = (angle + 2) * (Math.PI / 180);

            if (grad.color2[0] != grad.color1[0] && (angle + 1) % grad.steps[0] == 0) {
                grad.color1[0] += grad.adder[0];
            }
            if (grad.color2[1] != grad.color1[1] && (angle + 1) % grad.steps[1] == 0) {
                grad.color1[1] += grad.adder[1];
            }
            if (grad.color2[2] != grad.color1[2] && (angle + 1) % grad.steps[2] == 0) {
                grad.color1[2] += grad.adder[2];
            }


            if(!this.o.cursor || (normalizedAngle + size) > normalizedEatAngle) {
                color = '#' + toHex(grad.color1[0]) + toHex(grad.color1[1]) + toHex(grad.color1[2]);
                this.g.beginPath();
                this.g.strokeStyle = color;
                this.g.arc(this.xy, this.xy, this.radius, sat, eat, false);
                this.g.stroke();
            }
        }
    } else {
        this.g.beginPath();
        this.g.strokeStyle = r ? this.o.fgColor : this.fgColor;
        this.g.arc(this.xy, this.xy, this.radius, sat, eat, false);
        this.g.stroke();
    }

    return false;
};

- elbowz