angularJS结合canvas画图例子_AngularJS

这里给大家分享一个angularJS结合canvas画图例子,效果非常不错，赞一个先。

复制代码 代码如下:

   
 


 
   

   

   
    <script><br /> //引用angular.directives-round-progress这个模块;<br /> var APP = angular.module('APP', ['angular.directives-round-progress']).<br /> controller('MainCtrl', function($scope) {<br /> $scope.roundProgressData = {<br /> //这个是初始化的数据;<br /> label: 11,<br /> percentage: 0.11<br /> }<br /> //通过监听scope下的这个roundProgressData属性, 对界面的canvas进行重绘;<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 /> //初始化DOM模型, 包括初始化canvas等;<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 /> //相当于demo, 替换原来的元素;<br /> node.parentNode.replaceChild(canvas, node);<br /> //各种配置;<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 /> //监听模型, O了<br /> //就监听一个属性;<br /> 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>

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