Exemple d'angularJS combiné avec Canvas Drawing_AngularJS

Ici, j'aimerais partager avec vous un exemple d'angularJS combiné avec du dessin sur toile. L'effet est très bon. Veuillez lui donner un coup de pouce.

Copier le code Le code est le suivant :

   
 


 
   

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

以上就是angularJS结合canvas画图例子的全部代码了，希望大家能够喜欢。