Example of angularJS combined with canvas drawing_AngularJS

   
 


 
   



<script><br> //Reference the module angular.directives-round-progress;<br> var APP = angular.module('APP', ['angular.directives-round-progress']).<br> controller('MainCtrl', function($scope) {<br>            $scope.roundProgressData = {<br> ​​​​​ //This is initialized data;<br> label: 11,<br> percentage: 0.11<br> }<br> //Redraw the canvas of the interface by listening to the roundProgressData property under the scope;<br> $scope.$watch('roundProgressData', function (newValue) {<br> newValue.percentage = newValue.label / 100;<br>          }, true);<br> });<br> </script>
<script><br> /*!<br> * AngularJS Round Progress Directive<br> *<br> * Copyright 2013 Stephane Begaudeau<br> * Released under the MIT license<br> */<br> angular.module('angular.directives-round-progress', []).directive('angRoundProgress', [function () {<br> var compilationFunction = function (templateElement, templateAttributes, transclude) {<br> If (templateElement.length === 1) {<br> //Initialize DOM model, including initializing canvas, etc.;<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> ​​​​ //Equivalent to demo, replacing the original elements;<br> Node.parentNode.replaceChild(canvas, node);<br> ​​​​ //Various configurations;<br> var outerCircleWidth = node.getAttribute('data-round-progress-outer-circle-width') || '20';<br> var innerCircleWidth = node.getAttribute('data-round-progress-inner-circle-width') || '5';<br> var outerCircleBackgroundColor = node.getAttribute('data-round-progress-outer-circle-background-color') || '#505769';<br> var outerCircleForegroundColor = 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 outerCircleRadius = 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>        return {<br>             pre: function preLink(scope, instanceElement, instanceAttributes, controller) {<br>            var expression = canvas.getAttribute('data-round-progress-model');<br>                                                                                                                                                                                                                                                                                       // Monitoring model, O<br> ​​​​​​ //Just listen to one attribute; scope.$watch(expression, function (newValue, oldValue) {<br> // Create the content of the canvas<br>            //包括新建和重绘;<br>             var ctx = canvas.getContext('2d');<br>             ctx.clearRect(0, 0, width, height);<br>             // The "background" circle<br>             var x = width / 2;<br>             var y = height / 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>             // The inner circle<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>             // The inner number<br>             ctx.font = labelFont;<br>             ctx.textAlign = 'center';<br>             ctx.textBaseline = 'middle';<br>             ctx.fillStyle = labelColor;<br>             ctx.fillText(newValue.label, x, y);<br>             // The "foreground" circle<br>             var startAngle = - (Math.PI / 2);<br>             var endAngle = ((Math.PI * 2 ) * newValue.percentage) - (Math.PI / 2);<br>             var anticlockwise = false;<br>             ctx.beginPath();<br>             ctx.arc(x, y, parseInt(outerCircleRadius), startAngle, endAngle, anticlockwise);<br>             ctx.lineWidth = parseInt(outerCircleWidth);<br>             ctx.strokeStyle = outerCircleForegroundColor;<br>             ctx.stroke();<br>           }, true);<br>         },<br>         post: function postLink(scope, instanceElement, instanceAttributes, controller) {}<br>       };<br>     }<br>   };<br>   var roundProgress = {<br>       //compile里面先对dom进行操作, 再对$socpe进行监听;<br>     compile: compilationFunction,<br>     replace: true<br>   };<br>   return roundProgress;<br> }]);<br> </script>