angular的例子：
运行下面代码
计算
安全
数据库
网络和加速
企业服务
<!DOCTYPE html><html ng-app="APP"><head>
<meta charset="UTF-8">
<script src="http://cdn.bootcss.com/angular.js/1.3.0-beta.12/angular.min.js"></script>
</head><body ng-controller="MainCtrl">
<!--
界面的这个元素会被替换成canvas元素; -->
<div ang:round:progress data-round-progress-model="roundProgressData"></div>
<br>
<input type="number" ng-model="roundProgressData.label"/>
<script>
//引用angular.directives-round-progress这个模块;
var APP = angular.module('APP', ['angular.directives-round-progress']).
controller('MainCtrl', function($scope) {
$scope.roundProgressData = { //这个是初始化的数据; label: 11,
percentage: 0.11
} //通过监听scope下的这个roundProgressData属性, 对界面的canvas进行重绘; $scope.$watch('roundProgressData', function (newValue) {
newValue.percentage = newValue.label / 100;
}, true);
}); </script>
<script>
/*!
* AngularJS Round Progress Directive
*
* Copyright 2013 Stephane Begaudeau
* Released under the MIT license */angular.module('angular.directives-round-progress', []).directive('angRoundProgress', [function () { var compilationFunction = function (templateElement, templateAttributes, transclude) { if (templateElement.length === 1) { //初始化DOM模型, 包括初始化canvas等;
var node = templateElement[0]; var width = node.getAttribute('data-round-progress-width') || '400'; var height = node.getAttribute('data-round-progress-height') || '400'; var canvas = document.createElement('canvas');
canvas.setAttribute('width', width);
canvas.setAttribute('height', height);
canvas.setAttribute('data-round-progress-model', node.getAttribute('data-round-progress-model')); //相当于demo, 替换原来的元素; node.parentNode.replaceChild(canvas, node); //各种配置;
var outerCircleWidth = node.getAttribute('data-round-progress-outer-circle-width') || '20'; var innerCircleWidth = node.getAttribute('data-round-progress-inner-circle-width') || '5'; var outerCircleBackgroundColor = node.getAttribute('data-round-progress-outer-circle-background-color') || '#505769'; var outerCircleForegroundColor = node.getAttribute('data-round-progress-outer-circle-foreground-color') || '#12eeb9'; var innerCircleColor = node.getAttribute('data-round-progress-inner-circle-color') || '#505769'; var labelColor = node.getAttribute('data-round-progress-label-color') || '#12eeb9'; var outerCircleRadius = node.getAttribute('data-round-progress-outer-circle-radius') || '100'; var innerCircleRadius = node.getAttribute('data-round-progress-inner-circle-radius') || '70'; var labelFont = node.getAttribute('data-round-progress-label-font') || '50pt Calibri'; return {
pre: function preLink(scope, instanceElement, instanceAttributes, controller) { var expression = canvas.getAttribute('data-round-progress-model'); //监听模型, O了
//就监听一个属性; scope.$watch(expression, function (newValue, oldValue) { // Create the content of the canvas
//包括新建和重绘;
var ctx = canvas.getContext('2d');
ctx.clearRect(0, 0, width, height); // The "background" circle
var x = width / 2; var y = height / 2;
ctx.beginPath();
ctx.arc(x, y, parseInt(outerCircleRadius), 0, Math.PI * 2, false);
ctx.lineWidth = parseInt(outerCircleWidth);
ctx.strokeStyle = outerCircleBackgroundColor;
ctx.stroke(); // The inner circle ctx.beginPath();
ctx.arc(x, y, parseInt(innerCircleRadius), 0, Math.PI * 2, false);
ctx.lineWidth = parseInt(innerCircleWidth);
ctx.strokeStyle = innerCircleColor;
ctx.stroke(); // The inner number ctx.font = labelFont;
ctx.textAlign = 'center';
ctx.textBaseline = 'middle';
ctx.fillStyle = labelColor;
ctx.fillText(newValue.label, x, y); // The "foreground" circle
var startAngle = - (Math.PI / 2); var endAngle = ((Math.PI * 2 ) * newValue.percentage) - (Math.PI / 2); var anticlockwise = false;
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) {}
};
}
}; var roundProgress = { //compile里面先对dom进行操作, 再对$socpe进行监听; compile: compilationFunction,
replace: true
}; return roundProgress;
}]);</script></body></html>
新航道雅思
亿速云「云服务器」，即开即用、新一代英特尔至强铂金CPU、三副本存储NVMe SSD云盘，价格低至29元/月。点击查看>>
免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：is@yisu.com进行举报，并提供相关证据，一经查实，将立刻删除涉嫌侵权内容。
