基於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

function
($scope) }(
function
() )();
}]);

元件原始碼

/*

** created by cloudsor
* date: 2019/4/09*/(
function
($interval);
//畫背景圓圈
circleprofactory.drawbackgroundcircle = function
();　　　　
//畫前景圓圈
circleprofactory.drawfrontcircle = function
(n) 
this.ctx.strokestyle = this
.forecolor;
//用於繪製圓弧context.arc(x座標，y座標，半徑，起始角度，終止角度，順時針/逆時針)
if(this.iscounter&&this.start == 'bottom')
else
if(!this.iscounter&&this.start == 'top')
else
if(this.iscounter&&this.start == 'top')
else
if(!this.iscounter&&this.start == 'bottom')
this
.ctx.stroke();
this
.ctx.closepath();
this
.ctx.restore();
};//繪製百分比方法
circleprofactory.drawtext = function
(n)　　　　
//動態渲染方法
circleprofactory.animation = function
()　　
return
circleprofactory;
}])(circleprofactory,$document) ,
template: '',
restrict: 'e',
link:
function
(scope,ele,attr) 
else
}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();
}　　};
}])

基於angular2 的 http服務封裝

最近在專案中折騰了下angular2,所以出來跟大家分享，希望有幫助，每個公司業務不一樣，按實際情況而定，個人學習心得，不作為標準。1 定義http interceptor.service.ts服務，統一處理http請求 name http服務 describe 對http請求做統一處理 autho...

基於PhotoKit框架封裝（相簿的單選與多選）

獲取全部相簿 nsmutablearray getphotolistdatas 獲取某乙個相簿的結果集 phfetchresult getfetchresult phassetcollection assetcollection 獲取實體，並把結果存放到陣列中，返回值陣列 nsmutablearra...

angular中的http請求封裝

1 新建ts檔案 工具類 httputils.service.ts name http服務 describe 對http請求做統一處理 統一傳送請求 param params returns promise public request params any any else get請求 param...