여기서는 Angularjs 및 Canvas로 그리기의 예를 여러분과 공유하겠습니다. 효과는 먼저 매우 좋습니다.
코드 사본은 다음과 같습니다.
<! doctype html>
<html ng-app = "app">
<헤드>
<meta charset = "utf-8">
<script src = "http://cdn.bootcss.com/angular.js/1.3.0-beta.12/angular.min.js"> </script>
</head>
<body ng-controller = "mainctrl">
<!-
인터페이스 의이 요소는 캔버스 요소로 대체됩니다.
->
<div ang : 라운드 : 진행 데이터 라운드 프로그램-모델 = "RoundProgressData"> </div>
<br>
<입력 유형 = "number"ng-model = "roundProgressData.label"/>
<cript>
// 각도를 인용합니다.
var app = angular.module ( 'app', [ 'Angular.directives-Round-Progress']).
컨트롤러 ( 'mainctrl', function ($ scope) {
$ scope.roundProgressData = {
// 이것은 초기 데이터입니다.
레이블 : 11,
백분율 : 0.11
}
// 스코프의 RoundProgressData 속성을 들으면 인터페이스 캔버스를 다시 드로 드로 이동합니다.
$ scope. $ watch ( 'RoundProgressData', function (newValue) {
newValue.percentage = newValue.label / 100;
}, 진실);
});
</스크립트>
<cript>
/*!
* Angularjs 라운드 진행 지시문
*
* 저작권 2013 Stephane Begaudeau
* MIT 라이센스에 따라 릴리스되었습니다
*/
Angular.Module ( 'Angular.directives-Round-Progress', []). 지시 ( 'angroundProgress', [function () {
var compilationfunction = function (templateElement, templateattributes, translate) {
if (templateElement.length === 1) {
// 캔버스 초기화 등을 포함하여 DOM 모델을 초기화합니다.;
var node = templateElement [0];
var width = node.getAttribute ( 'data-round-progress-width') || '400';
var height = node.getAttribute ( 'Data-Round-Progress-Height') || '400';
var canvas = document.createElement ( 'canvas');
canvas.setattribute ( 'width', width);
Canvas.setAttribute ( '높이', 높이);
canvas.setattribute ( 'data-round-progress-model', node.getAttribute ( 'data-round-progress-model'));
// 원래 요소를 대체하는 데모와 동일합니다.
node.parentNode.ReplaceChild (캔버스, 노드);
// 다양한 구성;
var autercirclewidth = node.getAttribute ( 'data-round-progress-outer-circle-width') || '20';
var innercirclewidth = node.getAttribute ( 'data-round-progress-inner-circle-width') || '5';
var autercirclebackgroundcolor = node.getAttribute ( '데이터 라운드 프로그램-오우터-캐슬-컬러 컬러') || '#505769';
var autercircleforegroundcolor = node.getAttribute ( '데이터 라운드 프로그램-오우터-캐슬-컬러') || '#12eeb9';
var innerCircleColor = node.getAttribute ( '데이터 라운드 프로그램-내기-색상') || '#505769';
var labelcolor = node.getAttribute ( 'data-round-progress-label-color') || '#12eeb9';
var autercircleradius = node.getAttribute ( 'data-round-progress-outer-circle-radius') || '100';
var innerCircleradius = node.getAttribute ( 'data-round-progress-inner-circle-radius') || '70';
var labelfont = node.getAttribute ( 'data-round-progress-label-font') || '50pt Calibri';
반품 {
pre : function prelink (스코프, 인스턴스 element, instanceattributes, 컨트롤러) {
var expression = canvas.getAttribute ( 'data-round-progress-model');
// 모니터링 모델, o
// 속성을 듣습니다.
SCOPE. $ WATCH (표현, 기능 (NewValue, OldValue) {
// 캔버스의 내용을 만듭니다
// 새로운 창조와 리 그리기 포함;
var ctx = canvas.getContext ( '2d');
ctx.clearrect (0, 0, 너비, 높이);
// "배경"원
var x = 너비 / 2;
var y = 높이 / 2;
ctx.beginpath ();
ctx.arc (x, y, parseint (Outercircleradius), 0, math.pi * 2, false);
ctx.linewidth = parseint (autercirclewidth);
ctx.strokestyle = outercirclebackgroundcolor;
ctx.stroke ();
// 내부 원
ctx.beginpath ();
ctx.arc (x, y, parseint (Innercircleradius), 0, math.pi * 2, false);
ctx.linewidth = parseint (innercirclewidth);
ctx.strokestyle = InnercircleColor;
ctx.stroke ();
// 내부 번호
ctx.font = Labelfont;
ctx.textalign = '센터';
ctx.textBaseline = '중간';
ctx.fillstyle = labelColor;
ctx.fillText (newValue.Label, X, y);
// "전경"원입니다
var startangle = - (math.pi / 2);
var endangle = ((math.pi * 2) * newValue.percenge) - (Math.pi / 2);
var anticLockowise = false;
ctx.beginpath ();
ctx.arc (x, y, parseint (Outercircleradius), startangle, endangle, 반 시계 방향);
ctx.linewidth = parseint (autercirclewidth);
ctx.strokestyle = outercirclefore groundcolor;
ctx.stroke ();
}, 진실);
},
Post : 함수 postlink (범위, 인스턴스 element, instanceattributes, 컨트롤러) {}
};
}
};
var roundprogress = {
// 컴파일에서 먼저 DOM에서 작동 한 다음 $ SOCPE에서 듣습니다.
컴파일 : 컴파일 기능,
교체 : true
};
RoundProgress를 반환하십시오.
}]);
</스크립트>
</body>
</html>
위는 캔버스 그리기 예제와 결합 된 AngularJS의 전체 코드입니다. 모두가 좋아할 수 있기를 바랍니다.