Beispiel für AngularJS in Kombination mit Canvas Drawing_AngularJS

Hier möchte ich Ihnen ein Beispiel für AngularJS in Kombination mit Leinwandzeichnung vorstellen. Der Effekt ist sehr gut.

Code kopieren Der Code lautet wie folgt:

   
 


 
   

<script><br> //Referenzieren Sie das Modul angle.directives-round-progress;<br> var APP = angle.module('APP', ['angular.directives-round-progress']).<br> controller('MainCtrl', function($scope) {<br>            $scope.roundProgressData = {<br> ​​​​​ //Dies sind initialisierte Daten;<br> Etikett: 11,<br> Prozentsatz: 0,11<br> }<br> //Zeichnen Sie den Canvas der Schnittstelle neu, indem Sie auf die Eigenschaft „roundProgressData“ unter dem Gültigkeitsbereich hören;<br> $scope.$watch('roundProgressData', function (newValue) {<br> newValue.percentage = newValue.label / 100;<br>          }, wahr);<br> });<br> </script>
<script><br> /*!<br> * AngularJS Round Progress Directive<br> *<br> * Copyright 2013 Stephane Begaudeau<br> * Veröffentlicht unter der MIT-Lizenz<br> */<br> angle.module('angular.directives-round-progress', []).directive('angRoundProgress', [function () {<br> var CompilationFunction = Funktion (templateElement, templateAttributes, transclude) {<br> If (templateElement.length === 1) {<br> // DOM-Modell initialisieren, einschließlich Canvas-Initialisierung usw.;<br> var node = templateElement[0];<br> var width = node.getAttribute('data-round-progress-width') || '400';<br> var height = node.getAttribute('data-round-progress-height') || '400';<br> var canvas = document.createElement('canvas');<br> ​​canvas.setAttribute('width', width);<br>        canvas.setAttribute('height', height);<br> Canvas.setAttribute('data-round-progress-model', node.getAttribute('data-round-progress-model'));<br> ​​​​ //Entspricht demo, ersetzt die ursprünglichen Elemente;<br> Node.parentNode.replaceChild(canvas, node);<br> ​​​​ //Verschiedene Konfigurationen;<br> var äußerer KreisWidth = node.getAttribute('data-round-progress-outer-circle-width') || '20';<br> var innerCircleWidth = node.getAttribute('data-round-progress-inner-circle-width') || '5';<br> var äußerer Kreis BackgroundColor = node.getAttribute('data-round-progress-outer-circle-background-color') || var äußerer KreisForegroundColor = node.getAttribute('data-round-progress-outer-circle-foreground-color') || var innerCircleColor = node.getAttribute('data-round-progress-inner-circle-color') || '#505769';<br> var labelColor = node.getAttribute('data-round-progress-label-color') || var äußerer KreisRadius = 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>        zurück {<br>             pre: function preLink(scope, Instanzelement, Instanzattribute, Controller) {<br>            var expression = canvas.getAttribute('data-round-progress-model');<br>                                                                                                                                                                                                                           // Überwachungsmodell, O<br> ​​​​​​ //Einfach auf ein Attribut hören; Scope.$watch(Ausdruck, Funktion (neuer Wert, alter Wert) {<br> // Erstelle den Inhalt der Leinwand<br>            //包括新建和重绘;<br>             var ctx = canvas.getContext('2d');<br>             ctx.clearRect(0, 0, width, height);<br>             // Der „Hintergrund“-Kreis<br>             var x = Breite / 2;<br>             var y = Höhe / 2;<br>             ctx.beginPath();<br>             ctx.arc(x, y, parseInt(outerCircleRadius), 0, Math.PI * 2, false);<br>             ctx.lineWidth = parseInt(outerCircleWidth);<br>             ctx.StrokeStyle = OuterCircleBackgroundColor;<br>             ctx.Stroke();<br>             // Der innere Kreis<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.Stroke();<br>             // Die innere Zahl<br>             ctx.font = labelFont;<br>             ctx.textAlign = 'center';<br>             ctx.textBaseline = 'middle';<br>             ctx.fillStyle = labelColor;<br>             ctx.fillText(newValue.label, x, y);<br>             // Der „Vordergrund“-Kreis<br>             var startAngle = - (Math.PI / 2);<br>             var endAngle = ((Math.PI * 2 ) * newValue.percentage) - (Math.PI / 2);<br>             var gegen den Uhrzeigersinn = false;<br>             ctx.beginPath();<br>             ctx.arc(x, y, parseInt(outerCircleRadius), startAngle, endAngle, gegen den Uhrzeigersinn);<br>             ctx.lineWidth = parseInt(outerCircleWidth);<br>             ctx.StrokeStyle = OuterCircleForegroundColor;<br>             ctx.Stroke();<br>           }, wahr);<br>         },<br>         post: Funktion postLink(scope, Instanzelement, Instanzattribute, Controller) {}<br>       };<br>     }<br>   };<br>   var RoundProgress = {<br>       //compile里面先对dom进行操作, 再对$socpe进行监听;<br>     kompilieren: Kompilierungsfunktion,<br>     ersetzen: true<br>   };<br>   Return RoundProgress;<br> }]);<br> </script>

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