基于Angular框架封装的画环形进度条组件

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));