Exemple d'angularJS combiné avec Canvas Drawing_AngularJS

   
 


 
   



<script><br> //Référence au module angulaire.directives-round-progress;<br> var APP = angulaire.module('APP', ['angular.directives-round-progress']).<br> contrôleur('MainCtrl', fonction($scope) {<br>            $scope.roundProgressData = {<br> ​​​​​ //Ceci sont des données initialisées ;<br> étiquette : 11,<br> pourcentage : 0,11<br> ><br> //Redessinez le canevas de l'interface en écoutant la propriété roundProgressData sous le scope ;<br> $scope.$watch('roundProgressData', fonction (newValue) {<br> newValue.percentage = newValue.label / 100;<br>          }, vrai);<br> });<br> </script>
<script><br> /*!<br> * Directive de progrès du cycle AngularJS<br> *<br> * Copyright 2013 Stéphane Begaudeau<br> * Publié sous licence MIT<br> */<br> angulaire.module('angular.directives-round-progress', []).directive('angRoundProgress', [function () {<br> var compilationFunction = function (templateElement, templateAttributes, transclude) {<br> Si (templateElement.length === 1) {<br> //Initialiser le modèle DOM, y compris l'initialisation du canevas, etc. ;<br> var noeud = templateElement[0];<br> var width = node.getAttribute('data-round-progress-width') || '400';<br> var hauteur = node.getAttribute('data-round-progress-height') || '400';<br> var toile = document.createElement('canvas');<br> ​​ canvas.setAttribute('width', width);<br>        canvas.setAttribute('hauteur', hauteur);<br> Canvas.setAttribute('data-round-progress-model', node.getAttribute('data-round-progress-model'));<br> ​​​​ //Équivalent à la démo, en remplacement des éléments d'origine ;<br> Node.parentNode.replaceChild(canvas, node);<br> ​​​​ //Diverses configurations;<br> var externalCircleWidth = node.getAttribute('data-round-progress-outer-circle-width') || '20';<br> var innerCircleWidth = node.getAttribute('data-round-progress-inner-circle-width') || '5';<br> var externalCircleBackgroundColor = node.getAttribute('data-round-progress-outer-circle-background-color') || '#505769';<br> var externalCircleForegroundColor = node.getAttribute('data-round-progress-outer-circle-foreground-color') || '#12eeb9';<br> var innerCircleColor = node.getAttribute('data-round-progress-inner-circle-color') || '#505769';<br> var labelColor = node.getAttribute('data-round-progress-label-color') || '#12eeb9';<br> var externalCircleRadius = node.getAttribute('data-round-progress-outer-circle-radius') || '100';<br> var innerCircleRadius = node.getAttribute('data-round-progress-inner-circle-radius') || '70';<br> var labelFont = node.getAttribute('data-round-progress-label-font') || '50pt Calibri';<br>        revenir {<br>             pré : fonction preLink (scope, instanceElement, instanceAttributes, contrôleur) {<br>            var expression = canvas.getAttribute('data-round-progress-model');<br>                                                                                                                                                                                                                                                       // Modèle de surveillance, O<br> ​​​​​​ //Écoutez simplement un attribut ; scope.$watch(expression, fonction (newValue, oldValue) {<br> // Créer le contenu du canevas<br>            //包括新建和重绘;<br>             var ctx = canvas.getContext('2d');<br>             ctx.clearRect(0, 0, largeur, hauteur);<br>             // Le cercle "de fond"<br>             var x = largeur / 2;<br>             var y = hauteur / 2;<br>             ctx.beginPath();<br>             ctx.arc(x, y, parseInt(outerCircleRadius), 0, Math.PI * 2, false);<br>             ctx.lineWidth = parseInt(outerCircleWidth);<br>             ctx.StrokeStyle = externalCircleBackgroundColor;<br>             ctx.AVC();<br>             // Le cercle intérieur<br>             ctx.beginPath();<br>             ctx.arc(x, y, parseInt(innerCircleRadius), 0, Math.PI * 2, false);<br>             ctx.lineWidth = parseInt(innerCircleWidth);<br>             ctx.StrokeStyle = innerCircleColor;<br>             ctx.AVC();<br>             // Le numéro intérieur<br>             ctx.font = labelFont;<br>             ctx.textAlign = 'centre';<br>             ctx.textBaseline = 'milieu';<br>             ctx.fillStyle = labelColor;<br>             ctx.fillText(newValue.label, x, y);<br>             // Le cercle "premier plan"<br>             var startAngle = - (Math.PI/2);<br>             var endAngle = ((Math.PI * 2 ) * newValue.percentage) - (Math.PI / 2);<br>             var dans le sens inverse des aiguilles d'une montre = false;<br>             ctx.beginPath();<br>             ctx.arc(x, y, parseInt(outerCircleRadius), startAngle, endAngle, antihoraire);<br>             ctx.lineWidth = parseInt(outerCircleWidth);<br>             ctx.StrokeStyle = externalCircleForegroundColor;<br>             ctx.AVC();<br>           }, vrai);<br>         },<br>         post : fonction postLink (portée, instanceElement, instanceAttributes, contrôleur) {}<br>       };<br>     ><br>   };<br>   var roundProgress = {<br>       //compile里面先对dom进行操作, 再对$socpe进行监听;<br>     compiler : compilationFonction,<br>     remplacer : vrai<br>   };<br>   retour au tourProgrès ;<br> }]);<br> </script>