angularJS结合canvas画图例子


Posted in Javascript onFebruary 09, 2015

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

<!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>

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

Javascript 相关文章推荐
Jquery AJAX 框架的使用方法
Nov 03 Javascript
javascript 数组学习资料收集
Apr 11 Javascript
javascript计时器详解
Feb 28 Javascript
jquery实现的树形目录实例
Jun 26 Javascript
理解javascript闭包
Dec 15 Javascript
JavaScript实现99乘法表及隔行变色实例代码
Feb 24 Javascript
轻松掌握JavaScript单例模式
Aug 25 Javascript
Angular组件化管理实现方法分析
Mar 17 Javascript
功能完善的小程序日历组件的实现
Mar 31 Javascript
JavaScript创建表格的方法
Apr 13 Javascript
js实现全选和全不选功能
Jul 28 Javascript
javascript之Object.assign()的痛点分析
Mar 03 Javascript
jquery实现上下左右滑动的方法
Feb 09 #Javascript
js实现上传图片预览的方法
Feb 09 #Javascript
js实现ifram取父窗口URL地址的方法
Feb 09 #Javascript
jquery实现相册一下滑动两次的方法
Feb 09 #Javascript
js点击选择文本的方法
Feb 09 #Javascript
JS动态加载当前时间的方法
Feb 09 #Javascript
JavaScript实现Java中StringBuffer的方法
Feb 09 #Javascript
You might like
造就帕卡马拉的帕卡斯是怎么被发现的
2021/03/03 咖啡文化
实用函数2
2007/11/08 PHP
php下安装配置fckeditor编辑器的方法
2011/03/02 PHP
让PHP COOKIE立即生效,不用刷新就可以使用
2011/03/09 PHP
win7系统配置php+Apache+mysql环境的方法
2015/08/21 PHP
php中二分法查找算法实例分析
2016/09/22 PHP
PHP实现的字符串匹配算法示例【sunday算法】
2017/12/19 PHP
javaScript - 如何引入js代码
2021/03/09 Javascript
自写的一个jQuery圆角插件
2010/10/26 Javascript
JS简单实现动画弹出层效果
2015/05/05 Javascript
Bootstrap中CSS的使用方法
2016/02/17 Javascript
微信小程序 Page()函数详解
2016/10/17 Javascript
将angular-ui的分页组件封装成指令的方法详解
2017/05/10 Javascript
vue双花括号的使用方法 附练习题
2017/11/07 Javascript
使用vue-cli创建项目的图文教程(新手入门篇)
2018/05/02 Javascript
js中call()和apply()改变指针问题的讲解
2019/01/17 Javascript
微信小程序五子棋游戏AI实现方法【附demo源码下载】
2019/02/20 Javascript
详解用JS添加和删除class类名
2019/03/25 Javascript
vue中实现高德定位功能
2019/12/03 Javascript
微信小程序实现吸顶效果
2020/01/08 Javascript
mpvue 项目初始化及实现授权登录的实现方法
2020/07/20 Javascript
pyside写ui界面入门示例
2014/01/22 Python
numpy 进行数组拼接,分别在行和列上合并的实例
2018/05/08 Python
为什么你还不懂得怎么使用Python协程
2019/05/13 Python
python异常触发及自定义异常类解析
2019/08/06 Python
使用Python自动生成HTML的方法示例
2019/08/06 Python
python实现随机加减法生成器
2020/02/24 Python
Python中有几个关键字
2020/06/04 Python
python os模块在系统管理中的应用
2020/06/22 Python
使用CSS3制作倾斜导航条和毛玻璃效果
2017/09/12 HTML / CSS
100%法国制造的游戏和玩具:Les Jouets Français
2021/03/02 全球购物
舞蹈比赛获奖感言
2014/02/04 职场文书
2014年售后服务工作总结
2014/11/18 职场文书
暑期家教宣传单
2015/07/14 职场文书
谢师宴家长致辞
2015/07/27 职场文书
Mysql中存储引擎的区别及比较
2021/06/04 MySQL