angularJS結(jié)合canvas畫圖例子
更新時間:2015年02月09日 15:23:31 投稿:hebedich
這篇文章主要介紹了angularJS結(jié)合canvas畫圖例子的方法,需要的朋友可以參考下
這里給大家分享一個angularJS結(jié)合canvas畫圖例子,效果非常不錯,贊一個先。
復(fù)制代碼 代碼如下:
<!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 = {
//這個是初始化的數(shù)據(jù);
label: 11,
percentage: 0.11
}
//通過監(jiān)聽scope下的這個roundProgressData屬性, 對界面的canvas進(jìn)行重繪;
$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'));
//相當(dāng)于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');
//監(jiān)聽模型, O了
//就監(jiān)聽一個屬性;
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進(jìn)行操作, 再對$socpe進(jìn)行監(jiān)聽;
compile: compilationFunction,
replace: true
};
return roundProgress;
}]);
</script>
</body>
</html>
以上就是angularJS結(jié)合canvas畫圖例子的全部代碼了,希望大家能夠喜歡。
您可能感興趣的文章:
- angularjs創(chuàng)建彈出框?qū)崿F(xiàn)拖動效果
- Angular4實(shí)現(xiàn)鼠標(biāo)懸停3d傾斜效果
- 在AngularJS應(yīng)用中實(shí)現(xiàn)一些動畫效果的代碼
- Angular動畫實(shí)現(xiàn)的2種方式以及添加購物車動畫實(shí)例代碼
- 用AngularJS的指令實(shí)現(xiàn)tabs切換效果
- AngularJS實(shí)現(xiàn)按鈕提示與點(diǎn)擊變色效果
- AngularJS中實(shí)現(xiàn)顯示或隱藏動畫效果的方式總結(jié)
- 教你用AngularJS框架一行JS代碼實(shí)現(xiàn)控件驗(yàn)證效果
- 基于angularjs實(shí)現(xiàn)圖片放大鏡效果
- AngularJS實(shí)現(xiàn)的鼠標(biāo)拖動畫矩形框示例【可兼容IE8】
相關(guān)文章
angularjs自定義ng-model標(biāo)簽的屬性
這篇文章主要介紹了angularjs自定義ng-model標(biāo)簽的屬性的相關(guān)資料,需要的朋友可以參考下2016-01-01基于angular中的重要指令詳解($eval,$parse和$compile)
下面小編就為大家?guī)硪黄赼ngular中的重要指令詳解($eval,$parse和$compile)。小編覺得挺不錯的,現(xiàn)在就分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2016-10-10Angular 4依賴注入學(xué)習(xí)教程之FactoryProvider配置依賴對象(五)
這篇文章主要給大家介紹了關(guān)于Angular 4依賴注入之FactoryProvider配置依賴對象的相關(guān)資料,文中介紹的非常詳細(xì),對大家具有一定的參考學(xué)習(xí)價值,需要的朋友們下面來一起看看吧。2017-06-06angular inputNumber指令輸入框只能輸入數(shù)字的實(shí)現(xiàn)
這篇文章主要介紹了angular inputNumber指令輸入框只能輸入數(shù)字的實(shí)現(xiàn),文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-12-12Angular中懶加載模塊初始化技術(shù)實(shí)例解析
這篇文章主要為大家介紹了Angular中懶加載模塊初始化技術(shù)實(shí)例解析,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-10-10