基于Angular框架封装的画环形进度条组件
发布时间:2020-12-17 07:06:38 所属栏目:安全 来源:网络整理
导读:1.首先在我们的plugin目录下将本文档附件中的js文件引入,这个组件是以Angular工厂模式创建canvas对象,以Angular指令控制dom 2.然后在html文件中在需要画图的地方调用组件,以下为html的demo div class ="test" ng-controller ="TestCtrl" circle-progress
<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,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,Math.PI/2,Math.PI/2-n*this.rad,true); }else if(!this.iscounter&&this.start == ‘top‘){ this.ctx.arc(this.center_x,-Math.PI/2,-Math.PI/2+n*this.rad,false); }else if(this.iscounter&&this.start == ‘top‘){ this.ctx.arc(this.center_x,-Math.PI/2-n*this.rad,true); }else if(!this.iscounter&&this.start == ‘bottom‘){ this.ctx.arc(this.center_x,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,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)); (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |