1.首先在我们的plugin目录下将本文档附件中的js文件引入，这个组件是以Angular工厂模式创建canvas对象，以Angular指令控制dom
2.然后在html文件中在需要画图的地方调用组件，以下为html的demo
<div class="test" ng-controller="TestCtrl"> <circle-progress config="circleConfig"></circle-progress> </div>
3.然后在controller.js逻辑层配置调用组件需要的参数，以下为demo
(function (app) { app.controller('TestCtrl', ['$scope',function ($scope) { $scope.setTitle('环形测试'); // 初始化 function init() { //在这配置组件的参数 $scope.circleConfig = { proid:'test-id', //id String类型 percent:65.5, // 百分比 Number类型 forecolor:"#FFCD2C", // 进度条颜色 String类型 bdgcolor:"#999999", // 背景色 String类型 size:"300", //画布的长宽 String类型 isround:true, // Boolean类型 进度条头尾是否需要弧度 默认没有圆弧 iscounter:true, // 是否逆时针 Boolean类型 默认为true 逆时针 start:'bottom' // 起点 String类型 top = 顶部开始 bottom = 底部开始 默认为‘bottom’ 底部开始 } } (function () { init(); })(); }]); })(angular.module(appName));
组件源码
/** * Created by cloudsor * Date: 2019/4/09 */ (function (app) { app.factory('circleProFactory',['$interval',function($interval){ var circleProFactory = {}; //画背景圆圈 circleProFactory.drawBackgroundCircle = function(){ this.ctx.save(); this.ctx.beginPath(); this.ctx.lineWidth = 18; var radius = this.center_x - this.ctx.lineWidth; this.ctx.strokeStyle = this.bdgcolor; this.ctx.arc(this.center_x,this.center_y,radius,0,Math.PI*2,true); this.ctx.stroke(); this.ctx.closePath(); this.ctx.restore(); }; //画前景圆圈 circleProFactory.drawfrontCircle = function(n){ this.ctx.save(); this.ctx.beginPath(); this.ctx.lineWidth = 18; var radius = this.center_x - this.ctx.lineWidth; if(this.isround){ this.ctx.lineCap = "round"; } this.ctx.strokeStyle = this.forecolor; //用于绘制圆弧context.arc(x坐标，y坐标，半径，起始角度，终止角度，顺时针/逆时针) if(this.iscounter&&this.start == 'bottom'){ this.ctx.arc(this.center_x, this.center_y, radius , Math.PI/2, Math.PI/2-n*this.rad, true); }else if(!this.iscounter&&this.start == 'top'){ this.ctx.arc(this.center_x, this.center_y, radius , -Math.PI/2, -Math.PI/2+n*this.rad, false); }else if(this.iscounter&&this.start == 'top'){ this.ctx.arc(this.center_x, this.center_y, radius , -Math.PI/2, -Math.PI/2-n*this.rad, true); }else if(!this.iscounter&&this.start == 'bottom'){ this.ctx.arc(this.center_x, this.center_y, radius , Math.PI/2, Math.PI/2+n*this.rad, false); } this.ctx.stroke(); this.ctx.closePath(); this.ctx.restore(); }; // 绘制百分比方法 circleProFactory.drawText = function(n){ this.ctx.save(); this.ctx.fillStyle = '#000000'; var font_size = 35; this.ctx.font = font_size + "px Helvetica"; var text_width = this.ctx.measureText(n.toFixed(1)+"%").width; this.ctx.fillText(n.toFixed(1)+"%", this.center_x-text_width/2, this.center_y+ font_size/4); this.ctx.restore(); } //动态渲染方法 circleProFactory.animation = function(){ this.ctx.clearRect(0, 0, this.ele.width, this.ele.height); this.drawBackgroundCircle(); this.drawfrontCircle(this.speed); this.drawText(this.speed); } return circleProFactory; }]) app.directive('circleProgress',['circleProFactory','$document',function (circleProFactory,$document) { return { scope: { config:'=' }, template: '<canvas id="{{config.proid}}" width="{{config.size}}" height="{{config.size}}"></canvas>', restrict: 'E', link:function (scope,ele,attr) { function drawFrame(){ circleProFactory.animation(); window.requestAnimationFrame(drawFrame); if(circleProFactory.speed>=circleProFactory.percent){ circleProFactory.speed = circleProFactory.percent; return false; }else{ circleProFactory.speed++; } } circleProFactory.ele = ele['context'].firstElementChild; circleProFactory.ctx = circleProFactory.ele.getContext('2d'); circleProFactory.percent = scope.config.percent; circleProFactory.bdgcolor = scope.config.bdgcolor; circleProFactory.forecolor = scope.config.forecolor; circleProFactory.center_x = scope.config.size/2; circleProFactory.center_y = scope.config.size/2; circleProFactory.speed = 0; circleProFactory.rad = Math.PI*2/100; circleProFactory.isround = scope.config.isround; circleProFactory.iscounter = scope.config.iscounter||true; circleProFactory.start = scope.config.start || 'bottom'; drawFrame(); } }; }]) })(angular.module(appName));
