动态刻度圆
Posted 糖糖部落
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了动态刻度圆相关的知识,希望对你有一定的参考价值。
html:
<input type="hidden" class="progressRate" value="{$content.progressRate/100}"> <!--progressRate 投资进度--> <canvas id="draw_circle" style="width:7rem;height:7rem;"></canvas>
js:
define(function(require, exports) { window.requestAnimFrame = (function() { return window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || function(callback) { window.setTimeout(callback, 200); }; })(); var u = navigator.userAgent, app = navigator.appVersion, isandroid = u.indexOf(\'Android\') > -1 || u.indexOf(\'Linux\') > -1, //android终端或者uc浏览器 isios = !!u.match(/\\(i[^;]+;( U;)? CPU.+Mac OS X/); //ios终端 var stage = new createjs.Stage("draw_circle"), //画布 clock = new createjs.Shape(); //刻度圆 stage.autoClear = true; if (isiOS) { var position = Math.floor(lib.flexible.rem2px(3.5)), //坐标 (画布一半的距离/中心点位置) circleR = Math.floor(lib.flexible.rem2px(3.12)); //半径 } else if (isAndroid) { var position = Math.floor(lib.flexible.rem2px(14)), //坐标 (画布一半的距离/中心点位置) circleR = Math.floor(lib.flexible.rem2px(12)); //半径 } var rate =$(".progressRate").val(), //投资进度 i = 0, first = 1, //1:进入页面,第一次绘制100%刻度圆(蓝色) 2:绘制投资进度的 刻度圆(灰色) gArr = []; //用于存放 绘制的刻度 exports.init = function() { fn_drawClock(circleR, 0); //100%刻度圆 //手动移除loading 测试 // $(".mainCon").removeClass(\'undis\'); // seajs.use(\'module/bankCommon/loading\', function(argument){ // argument.loadingFn(); // }); //进度-刻度圆 setTimeout(function() { first = 2; fn_drawArc(); }, 500) } //进度动画展示 function fn_drawArc() { fn_drawClock(circleR, i); if (i < rate) { i += 0.01; //进度递增 $(".progress .jsRateNum").html(100 - (Math.round(i * 100))); window.requestAnimFrame(fn_drawArc); } else { stage = null; //最后清空画布,释放内存 } } //刻度 圆环 function fn_drawClock(r, rate) { var x0 = 0; var y0 = 0; var ang = 0; if (isiOS) { var r0 = r - lib.flexible.rem2px(0.213); // 时刻度长度 越小越长 var r1 = r - lib.flexible.rem2px(0.213); //分刻度长度 越小越长 } else if (isAndroid) { var r0 = r - lib.flexible.rem2px(0.8); // 时刻度长度 越小越长 var r1 = r - lib.flexible.rem2px(0.8); //分刻度长度 越小越长 } var x00 = 0; var y00 = 0; var arry = []; for (var index = 0; index < 60; index++) { ang = -90 + 360 / 60 * index; // if (index % 5 == 0) { // continue; //跳过时刻度 // } x1 = x0 + r * Math.cos(ang * Math.PI / 180); y1 = y0 + r * Math.sin(ang * Math.PI / 180); // console.log(x1 + "," + y1) x01 = x00 + r1 * Math.cos(ang * Math.PI / 180); y01 = y00 + r1 * Math.sin(ang * Math.PI / 180); // console.log(x01 + "," + y01) var line = clock.graphics; // line.beginStroke("#dde0e3"); if ((ang + 90) / 360 >= rate && first == 1) { line.beginStroke("#0094ff"); } else if ((ang + 90) / 360 >= rate && first == 2) { line.beginStroke("#dde0e3"); continue; } if (isiOS) { line.setStrokeStyle(3).moveTo(x1, y1).lineTo(x01, y01); } else if (isAndroid) { line.setStrokeStyle(4).moveTo(x1, y1).lineTo(x01, y01); } if (first == 1) { gArr.push(line); //第一次绘制刻度圆 每条刻度添加至数组内,第二次绘制 刻度时,每次绘制的新刻度,清除对应的原刻度 }else{ stage.removeChild(gArr[index]); } } clock.x = position; clock.y = position; stage.addChild(clock); $(".bidMsg").show(); stage.alpha = 1; stage.update(); } })
//进度圆 seajs.use(\'easel\', function() { require(\'module/bid/content/drawCircle\').init(); })
还需引入easel.js
https://cdn.bootcss.com/EaselJS/0.8.0/easeljs.min.js
以上是关于动态刻度圆的主要内容,如果未能解决你的问题,请参考以下文章
在smith圆图上想并联一个电容和电阻,然后接地,这个在smith圆图上怎么操作?