jQueryノブプラグインに角度グラデーションを追加して、ある色から始まり、弧に沿って別の色に変化する方法はありますか?
2539 次
2 に答える
6
私は解決策を求めてインターネットを掘り下げましたが、誰もこれを試したり、解決策を投稿したりしませんでした。最後にQ&Aを掲載します。誰かがより良い解決策を持っている場合は、私たちと共有してください。
初期化中に、draw メソッドをオーバーライドし、属性 shaded="true" をチェックしました。そこにある場合は、白から始まり、fgColor に向かって移動するグラデーションが形成されます。白以外の開始色を選択するには、属性 shadeColor="#(色の 16 進コード)" を設定します。
<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>
角度ごとに別々の弧を描きます (滑らかにするために、弧の角度を 1 度ではなく 2 度にします)。アークの色は、fgColor から shadeColor に遷移します。
色の混合効果は、光の混合ではなく絵の具の混合に似ているため、緑から始めて赤に向かっていくと、中央の黄色の色合いが得られません. ライト ミキシング エフェクトを使用するとクールに見えますが、正確に行う方法がわかりません。また、これは十分に最適化されたコードではなく、単なる解決策です。改善の余地が大きい..
于 2013-02-06T14:07:44.907 に答える
2
素晴らしい、まさに私が必要としていたものです! 「カーソル」オプションも追加しました。これはまだ機能していない唯一のものだったからです。
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;
};
于 2014-11-30T12:52:26.157 に答える