lixin-web/webapp/module/ref/jquery_knob_tron.js

vue and bootstrap

$(".knob").knob({
  /*change : function (value) {
   //console.log("change : " + value);
   },
   release : function (value) {
   console.log("release : " + value);
   },
   cancel : function () {
   console.log("cancel : " + this.value);
   },*/
  width:50,
  height:50,
  min:0,
  fontWeight:'normal',
  thickness:0.05,
  displayPrevious:true,
  angleOffset:-75,
  // fgColor:'#fff',
  format:function(n){
    var str = n.toString()
    return str.length == 1 ? 0 + str : str
  },
  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 = 2.5;

      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, 360 - pa.s, 360 - pa.e, pa.d);
        this.g.stroke();
      }

      this.g.beginPath();
      // this.g.strokeStyle = r ? this.o.fgColor : this.fgColor
      this.g.strokeStyle = '#fff' ;
      this.g.arc(this.xy, this.xy, this.radius - this.lineWidth, 360 - a.s, 360 - 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();

      return false;
    }
  }
});