From 9ecca2bd912e90490326c48c1473a211fd27ffd9 Mon Sep 17 00:00:00 2001
From: Scott Hillman <scotth@mediarain.com>
Date: Thu, 17 Apr 2014 15:34:23 -0600
Subject: [PATCH] Added support for image handles

---
 js/jquery.knob.js | 39 ++++++++++++++++++++++++++++++++++++---
 1 file changed, 36 insertions(+), 3 deletions(-)

diff --git a/js/jquery.knob.js b/js/jquery.knob.js
index 83d6327..2cb55cd 100755
--- a/js/jquery.knob.js
+++ b/js/jquery.knob.js
@@ -111,6 +111,7 @@
                     inline : false,
                     step : this.$.data('step') || 1,
                     rotation: this.$.data('rotation'),
+                    handleImg: this.$.data('handleimg') || null,
 
                     // Hooks
                     draw : null, // function () {}
@@ -190,6 +191,15 @@
             this.$.wrap(this.$div).before(this.$c);
             this.$div = this.$.parent();
 
+            if (this.o.handleImg) {
+                this.$handleImg = new Image();
+                this.$handleImg.onload = function() {
+                    s._carve();
+                    s._draw();
+                }
+                this.$handleImg.src = this.o.handleImg;
+            }
+
             if (typeof G_vmlCanvasManager !== 'undefined') {
               G_vmlCanvasManager.initElement(this.$c[0]);
             }
@@ -247,7 +257,10 @@
             this.isInit = true;
 
             this.$.val(this.o.format(this.v));
-            this._draw();
+
+            if (!this.o.handleImg) {
+                this._draw();
+            }
 
             return this;
         };
@@ -277,9 +290,10 @@
             });
 
             // finalize canvas with computed width
+            var heightAdjustment = (this.$handleImg) ? (this.$handleImg.height / 2) : 0;
             this.$c.attr({
                 width: this.w,
-                height: this.h
+                height: this.h + heightAdjustment
             });
 
             // scaling
@@ -287,7 +301,7 @@
                 this.$c[0].width = this.$c[0].width * this.scale;
                 this.$c[0].height = this.$c[0].height * this.scale;
                 this.$c.width(this.w);
-                this.$c.height(this.h);
+                this.$c.height(this.h + heightAdjustment);
             }
 
             return this;
@@ -768,11 +782,30 @@
                 c.strokeStyle = r ? this.o.fgColor : this.fgColor ;
                 c.arc(this.xy, this.xy, this.radius, a.s, a.e, a.d);
             c.stroke();
+
+            if (this.o.handleImg) {
+                var xyCoords = this._convertToXYCoords(this.xy, this.radius, a.s, a.e), // Use maths to convert numbers to different numbers in a mathy way. 
+                    scale = window.devicePixelRatio || 1; // Need to use this or on high density devices (most mobile devices) the image is tiny. 
+
+                c.drawImage(
+                    this.$handleImg, // image object
+                    xyCoords.x - (this.$handleImg.width / 2) * scale, // x coordinate
+                    xyCoords.y - (this.$handleImg.height / 2) * scale, // y coordinate
+                    this.$handleImg.width * scale, // x scale
+                    this.$handleImg.height * scale); // y scale
+            }
         };
 
         this.cancel = function () {
             this.val(this.v);
         };
+
+        this._convertToXYCoords = function(origin, radius, startAngle, endAngle) {
+            return {
+                x: origin + radius * Math.cos(startAngle),
+                y: origin + radius * Math.sin(endAngle)
+            }
+        };
     };
 
     $.fn.dial = $.fn.knob = function (o) {