jQuery konb实践

jQuery konb的github:  https://github.com/aterrien/jQuery-Knob

jQuery konb的demo:  http://anthonyterrien.com/demo/knob/

目前面临的项目需求

圆环上面代表的是温度，

彩色弧度起始位置为当前温度，显示数值在正中间如图15.0 

彩色弧度结束位置为设置温度，显示数值在小球上如图22.0

可拖动小球调节或点击环上任意位置更改设置温度

当设置温度大于当前温度时，为渐变红色

当设置温度小于当前温度时，为渐变蓝色

对demo的index.html直接删改

html改动后body页面如下，只剩一个环

 < body >

        < div   style = " width : 100 % ; font-size : 40 px ; letter-spacing : -8 px ; line-height : 40 px ; " >

            < h1 >jQuery Knob</ h1 >

        </ div >

        < div   style = " height :   340 px ; " >

            < div   class = "demo"   style = " margin :   10 px   auto ; " >

                  < input   class = "knob"   data-width = "300"   data-height = "300"   data-angleOffset = "-150"   data-angleArc = "300"   data-displayInput = "false"   data-fgColor = "#333"   data-skin = "tron"   data-thickness = ".1"   value = "22.0">

              </ div >

        </ div >

        < div   style = " margin-top : 30 px ; text-align : center " >

            < p   style = " font-size : 20 px ; " >jQuery Knob is   &copy;   2012 Anthony Terrien - MIT License</ p >

        </ div >

    </ body >

页面内联样式微调如下

< style >

              body {

                padding :   0 ;

                margin :   0 px   50 px ;

                font-family :   "Helvetica Neue" ,   Helvetica ,   Arial ,   sans-serif ;

                font-weight :   300 ;

                text-rendering :   optimizelegibility ;

              }

              p { font-size :   30 px ;   line-height :   30 px }

              div .demo { text-align :   center;   width :   280 px ; }

              div .demo   >   p { font-size :   20 px }

          </ style >

js初始化圆环改造，内联js如下

这块自己学了下 h5的canvas用法，再加上jQuery konb git上的说明，改造如下

< script >

              $ ( function ( $ ) {

                 $( ".knob" ).knob({

                   //          change : function (value) {

                   //            console.log("change : " + value);

                   //      },

                   //      release : function (value) {

                               console.log(this.$.attr('value'));

                   //          console.log("release : " + value);

                   //      },

                   //      cancel : function () {

                   //          console.log("cancel : ", this);

                   //      },

                   //      format : function (value) {

                   //          return value + '%';

                   //      },x

                    draw   :   function   () {

                    // "tron" case

                    if ( this .$.data( 'skin' )   ==   'tron' ) {

                        this .o.min   =   5.0 ;     //最小温度

                         this .o.max   =   35.0 ;    //最大温度

                         this .o.step   =    0.5 ;   //步长，即拖动时或滚轮时变化的最小温度

                         this .cursorExt   =   0.3 ;

                  

                         var   a   =   this .arc( this .cv)    // Arc

                              , pa                    // Previous arc

                              , r   =   1 ;

                  

                              this .g.lineWidth   =   this .lineWidth;

                                          

                  

                              if ( this .v   !=   null   &&   this .v   !=   "" ){

                                   this .v   =   15 ; // 当前温度.初始化时定义

                            }

                              var   k2   =   window .devicePixelRatio        //手机屏幕比率，自己定义的为了字体大小看起来比较适中

                                          

                              //图值，当前温度

                              var   mtv   =   ( this .v).toFixed( 1 );

                              this .g.font   =   60 * k2 + "px bold Arial" ;

                              this .g.fillStyle   =   '#005c99' ;

                              this .g.textAlign   =   'center' ;

                              this .g.textBaseline   =   'middle' ;

                              this .g.moveTo( this .xy, this .xy);

                              this .g.fillText(mtv,   this .xy, this .xy);

                                     

                              //画 ℃ 标记

                              this .g.font   =   20 * k2 + "px Arial" ;

                              this .g.fillStyle   =   '#005c99' ;

                              this .g.textAlign   =   'center' ;

                              this .g.textBaseline   =   'middle' ;

                              this .g.moveTo( this .xy + this .radius * ( 2 / 3 ), this .xy);

                              this .g.fillText( "℃" ,   this .xy + this .radius * ( 2 / 3 ), this .xy);

                                     

                                     

                              var   ast   =   ( 5 /3) * Math.PI*((this.v-this.o.min)/ ( this .o.max - this .o.min)) + ( 2 / 3 )   *   Math. PI ;

                                          

                              var   fxxs   =   this .radius * Math.cos(ast) + this .xy;

                              var   fxys   =   this .radius * Math.sin(ast) + this .xy;

                             var   fxxe   =   this .radius * Math.cos(a.e) + this .xy;

                              var   fxye   =   this .radius * Math.sin(a.e) + this .xy;

                                          

                              if ( this .cv   >   this .v){

                                 //设定温度大于变化温度设置渐变红色调

                                   var   grd = this .g.createLinearGradient(fxxs,fxys,fxxe,fxye);

                                 grd.addColorStop( 0 , "#ffeb00" );

                                 grd.addColorStop( 1 , "#ff0505" );

                                                

                                   this .g.beginPath();

                                   this .g.strokeStyle   =   grd;

                                   this .g.arc( this .xy,   this .xy,   this .radius   +   this .lineWidth * ( 1 / 2 ), ast,a.e, a.d);

                                   this .g.stroke();

                             } else {

                                 //渐变蓝色调

                                   var   grd = this .g.createLinearGradient(fxxe,fxye,fxxs,fxys);

                                 grd.addColorStop( 0 , "#0000FF" );

                                 grd.addColorStop( 1 , "#11f3b4" );

                                                

                                   this .g.beginPath();

                                   this .g.strokeStyle   =   grd;

                                   this .g.arc( this .xy,   this .xy,   this .radius   +   this .lineWidth * ( 1 / 2 ), ast,a.e, true );

                                   this .g.stroke();

                                                

                             }

                                          

                               this .g.lineWidth   =   2 ;

                               this .g.beginPath();

                               this .g.strokeStyle   =   "#005c99" ;

                               this .g.arc(   this .xy,   this .xy,   this .radius, ( 2 /3) * Math.PI, (7/ 3 )   *   Math. PI );

                               this .g.stroke();

                                 

                               var   k1   =    1.3  //自己定义的"BFR"字体大小比率

                                 

                               var   ty =   this .radius * Math.cos(( 1 / 3 ) * Math. PI / 2 );

                               var   fx   =   this .xy;

                               var   fy   =   this .xy + ty;

                                          

                               //画小圆

                               this .g.beginPath();

                               this .g.moveTo(fxxe,fxye);

                               this .g.strokeStyle   =   "#ddd" ;

                               this .g.arc(fxxe, fxye,   this .lineWidth * ( 7 / 6 ),   0 , Math. PI * 2 );

                               this .g.fill();

                                 

                               //画小圆中的数值

                               this .g.font   =   10 * k2 + "px Arial" ;

                               this .g.fillStyle   =   '#fff' ;

                               this .g.textAlign   =   'center' ;

                               this .g.textBaseline   =   'middle' ;

                               this .g.moveTo(fxxe,fxye);

                               this .g.fillText(( this .cv).toFixed( 1 ), fxxe,fxye);

                                          

                            

                                          

                                          

                               //画图“BFR”

                             var   fontSize =   ( this .radius - parseInt(ty)) * 1.5 * k1;    

                               this .g.font   =   "bold " + fontSize +   "px Arial" ;

                               this .g.fillStyle   =   '#005c99' ;

                               this .g.textAlign   =   'center' ;

                               this .g.textBaseline   =   'middle' ;

                               this .g.moveTo(fx,fy);

                               this .g.fillText( "BFR" , fx, fy);

                                          

                                          

                               return   false ;

                  }

                  }

                  });

            });

          </ script >

这样子大体好了，但还有些小细节要处理。

1. 摄氏度符号是乱码，这个要在head标签内最上方加代码如下

< meta   charset = "UTF-8" >

2. 现在的彩色圆环是无法再完全显示的，会发现缺几块，个人处理方式如下

   首先，将引入的生产环境js    < script   src = "dist/jquery.knob.min.js" ></ script >

                 改为开发环境的js （个人复制了jquery.knob.js并改名testJquery.knob.js引入）如下，

                  < script   src = "js/testJquery.knob.js" ></ script >

   然后，testJquery.konb.js大概685行代码   this .radius   =   this .xy   -   this .lineWidth   /   2 ;

        个人猜一下，应该是定义了圆半径，改一下变成  this .radius   =   this .xy   -   this .lineWidth;

         减小圆半径，运行一下发现彩色圆环可以完全显示，已经初步达到了需求效果