jQuery-Knob
jQuery-Knob copied to clipboard
add image to the end
Hi ..! how can i add a image at the end of the data-line cap? or instead a div or something? I've been trying to add this, but this did not work for me.
+1 also interesed this issue.
Hi, i do something like that meybe this is what you need or meybe not, you decide
<input class="knob" data-width="150" data-displayprevious="true" data-fgcolor="#ffec03" data-skin="tron" data-thickness=".2" value="70">
draw: function() {
// "tron" case
if (this.$.data('skin') == 'tron') {
this.cursorExt = 0.3;
var a = this.arc(this.cv), // Arc
pa, // Previous arc
r = 1;
this.g.lineWidth = this.lineWidth;
if (this.o.displayPrevious) {
pa = this.arc(this.v);
this.g.beginPath();
this.g.strokeStyle = this.pColor;
this.g.arc(this.xy, this.xy, this.radius - this.lineWidth, pa.s, pa.e, pa.d);
this.g.stroke();
}
this.g.beginPath();
this.g.strokeStyle = r ? this.o.fgColor : this.fgColor;
this.g.arc(this.xy, this.xy, this.radius - this.lineWidth, a.s, a.e, a.d);
this.g.stroke();
this.g.lineWidth = 2;
this.g.beginPath();
this.g.strokeStyle = this.o.fgColor;
this.g.arc(this.xy, this.xy, this.radius - this.lineWidth + 1 + this.lineWidth * 2 / 3, 0, 2 * Math.PI, false);
this.g.stroke();
var r = this.radius - this.lineWidth;
//var a = Math.PI / this.v;
var x = r * Math.cos(a.e) + this.xy,
y = r * Math.sin(a.e) + this.xy;
this.g.beginPath();
this.g.strokeStyle = "#07D5D5";
this.g.arc(x, y, 10, 0, 2 * Math.PI, a.d);
this.g.fillStyle = "#07D5D5";
this.g.fill();
this.g.stroke();
return false;
}
}