angularjs实例

angular的canvas画图例子

时间:2015-06-14 10:32来源:网络整理 作者:KKWL 点击:
界面的这个元素会被替换成canvas元素; ]).controller( ($scope) {$scope.roundProgressData = { ,percentage: 0.11 } (newValue) {newValue.percentage ;}, true );}); ! * AngularJS Round Progress Directive * * Copyright 2013 Stephane Be

界面的这个元素会被替换成canvas元素; ]). controller(($scope) { $scope.roundProgressData = { , percentage: 0.11 } (newValue) { newValue.percentage ; }, true); }); ! * AngularJS Round Progress Directive * * Copyright 2013 Stephane Begaudeau * Released under the MIT license */ angular.module( () { (templateElement, templateAttributes, transclude) { ) { ]; ; ; ); canvas.setAttribute(, width); canvas.setAttribute(, height); canvas.setAttribute()); //相当于demo, 替换原来的元素; node.parentNode.replaceChild(canvas, node); ; ; ; ; ; ; ; ; ; return { pre: function preLink(scope, instanceElement, instanceAttributes, controller) { ); (newValue, oldValue) { ); ctx.clearRect(, width, height); ; ; ctx.beginPath(); ctx.arc(x, y, parseInt(outerCircleRadius), ); ctx.lineWidth = parseInt(outerCircleWidth); ctx.strokeStyle = outerCircleBackgroundColor; ctx.stroke(); // The inner circle ctx.beginPath(); ctx.arc(x, y, parseInt(innerCircleRadius), ); ctx.lineWidth = parseInt(innerCircleWidth); ctx.strokeStyle = innerCircleColor; ctx.stroke(); labelFont; ctx.textAlign ; ctx.textBaseline ; ctx.fillStyle = labelColor; ctx.fillText(newValue.label, x, y); ); ); ; ctx.beginPath(); ctx.arc(x, y, parseInt(outerCircleRadius), startAngle, endAngle, anticlockwise); ctx.lineWidth = parseInt(outerCircleWidth); ctx.strokeStyle = outerCircleForegroundColor; ctx.stroke(); }, true); }, post: function postLink(scope, instanceElement, instanceAttributes, controller) {} }; } }; { //compile里面先对dom进行操作, 再对$socpe进行监听; compile: compilationFunction, replace: true }; return roundProgress; }]);

------分隔线----------------------------