Videos annular frame package based Angular progress bar assembly

1. First in our directory plugin js file attachment in this document is introduced, this component is Angular factory pattern to create a canvas object to Angular command control dom

2. Then call the assembly in place required drawing in the html file, the following is a demo html

<div class="test" ng-controller="TestCtrl">
　　<circle-progress config="circleConfig"></circle-progress>
</div>

 

3. Then the logical layer controller.js parameter configuration calls required components, the following is a demo

( Function (App) { 
　　app.controller ( 'TestCtrl', [ '$ scope' , function ($ scope) { 
　　　　$ scope.setTitle ( 'loop test' );
　　　　// initialize 
　　　　function the init () {
　　　　// In this configuration parameter assembly 
　　　　　　$ scope.circleConfig = { 
　　　　　　　　proid: 'Test-ID', // ID String type 
　　　　　　　　Percent: 65.5, // percentage Number type 
　　　　　　　　ForeColor: "# FFCD2C", // the progress bar color type String 
　　　　　　　　bdgcolor: "# 999999 " // background color of type String 
　　　　　　　　size:" 300 ", // canvas length and width of type String
　　　　　　　　isround: true , // a Boolean progress bar head and tail need not default arc arc 
　　　　　　　　iscounter: true , // whether counterclockwise Boolean type defaults to true counterclockwise 
　　　　　　　　Start: 'bottom' // starting point of type String starting at the top bottom top = default = bottom in 'bottom' start bottom 
　　　　　　} 
　　　　} 
　　　　( function () { 
　　　　　　the init (); 
　　　　}) (); 
　　}]); 
}) (angular.module (appName));

 

Source Components

/**
* 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(the this .isround) {
　　　　　　　　the this .ctx.lineCap = "round" ; 
　　　　　　} 
　　　　　　the this .ctx.strokeStyle = the this .ForeColor;
　　　　　　// for drawing an arc context.arc (x coordinate, y coordinate, a radius, the initial angle, termination angle, clockwise / counterclockwise) 
　　　　　　IF ( the this .iscounter && the this .start == 'bottom' ) {
　　　　　　　　the this .ctx.arc ( the this .center_x, the this .center_y, RADIUS, Math.PI / 2, Math.PI / 2 * -n the this .rad, to true ); 
　　　　　　} the else  IF (! the this .iscounter && the 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));