jQuery-Knob icon indicating copy to clipboard operation
jQuery-Knob copied to clipboard

add image to the end

Open ThilinieK opened this issue 10 years ago • 2 comments

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.

capture

ThilinieK avatar Nov 24 '14 07:11 ThilinieK

+1 also interesed this issue.

AntonyHatchet avatar Oct 05 '15 22:10 AntonyHatchet

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;
                }
            }

ghernandezr avatar Oct 06 '15 13:10 ghernandezr