캔버스 Drawing_AngularJS와 결합된 angleJS의 예

여기서는 캔버스 그리기와 결합된 AngleJS의 예를 여러분과 공유하고 싶습니다. 효과가 매우 좋습니다.

코드 복사 코드는 다음과 같습니다.

   
 


 
   

//angular.directives-round-progress 모듈 참조;
var APP = angle.module('APP', ['angular.directives-round-progress']).
컨트롤러('MainCtrl', function($scope) {
           $scope.roundProgressData = {
​​​​​ //초기화된 데이터입니다.
라벨: 11,
백분율: 0.11
}
//스코프 아래의 roundProgressData 속성을 수신하여 인터페이스의 캔버스를 다시 그립니다.
$scope.$watch('roundProgressData', 함수 (newValue) {
newValue.percentage = newValue.label / 100;
         }, 참);
});


/*!
* AngularJS 라운드 진행 지침
*
* Copyright 2013 스테판 베고도
* MIT 라이센스에 따라 출시됨
*/
angle.module('angular.directives-round-progress', []).directive('angRoundProgress', [function () {
varcompileFunction = 함수(templateElement, templateAttributes, transclude) {
If (templateElement.length === 1) {
//캔버스 초기화 등을 포함하여 DOM 모델을 초기화합니다.
var 노드 = 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('height', height);
Canvas.setAttribute('data-round-progress-model', node.getAttribute('data-round-progress-model'));
​​​​ //데모와 동일하며 원래 요소를 교체합니다.
Node.parentNode.replaceChild(캔버스, 노드);
​​​​ //다양한 구성;
var externalCircleWidth = node.getAttribute('data-round-progress-outer-circle-width') || '20';
var innerCircleWidth = node.getAttribute('data-round-progress-inner-circle-width') || '5';
var externalCircleBackgroundColor = node.getAttribute('data-round-progress-outer-circle-Background-color') || '#505769';
var externalCircleForegroundColor = node.getAttribute('data-round-progress-outer-circle-foreground-color') || '#12eeb9';
var innerCircleColor = node.getAttribute('data-round-progress-inner-circle-color') || '#505769';
var labelColor = node.getAttribute('data-round-progress-label-color') || '#12eeb9';
var externalCircleRadius = 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: 함수 preLink(scope,instanceElement,instanceAttributes,controller) {
           var 표현식 = canvas.getAttribute('data-round-progress-model');
> >                               // 모니터링 모델 O
​​​​​​ //하나의 속성만 듣습니다. 범위.$watch(표현식, 함수 (newValue, oldValue) {
// 캔버스 콘텐츠 생성
            //包括新建 和 重绘;
            var ctx = canvas.getContext('2d');
            ctx.clearRect(0, 0, 너비, 높이);
            // "배경" 원
            var x = 너비 / 2;
            var y = 높이 / 2;
            ctx.beginPath();
            ctx.arc(x, y, parsInt(outerCircleRadius), 0, Math.PI * 2, false);
            ctx.lineWidth = parsInt(outerCircleWidth);
            ctx.StrokeStyle = externalCircleBackgroundColor;
            ctx.Stroke();
            // 내부 원
            ctx.beginPath();
            ctx.arc(x, y, parsInt(innerCircleRadius), 0, Math.PI * 2, false);
            ctx.lineWidth =parseInt(innerCircleWidth);
            ctx.StrokeStyle = innerCircleColor;
            ctx.Stroke();
            // 내부번호
            ctx.font = labelFont;
            ctx.textAlign = 'center';
            ctx.textBaseline = '중간';
            ctx.fillStyle = labelColor;
            ctx.fillText(newValue.label, x, y);
            // "전경" 원
            var startAngle = - (Math.PI / 2);
            var endAngle = ((Math.PI * 2 ) * newValue.percentage) - (Math.PI / 2);
            var 시계 반대 방향 = false;
            ctx.beginPath();
            ctx.arc(x, y,parseInt(outerCircleRadius), startAngle, endAngle, 시계 반대 방향);
            ctx.lineWidth = parsInt(outerCircleWidth);
            ctx.StrokeStyle = externalCircleForegroundColor;
            ctx.Stroke();
          }, 사실);
        },
        게시물: 함수 postLink(범위, 인스턴스 요소, 인스턴스 속성, 컨트롤러) {}
      };
    }
  };
  var roundProgress = {
      //compile리면先对dom进行操작, 再对$socpe进行监听;
    컴파일: 컴파일 함수,
    바꾸기: 참
  };
  roundProgress를 반환합니다.
}]);

본문>