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的颜色选择插件实例代码
Oct 02 Javascript
Javascript遍历table中的元素示例代码
Jul 08 Javascript
实例详解JavaScript获取链接参数的方法
Jan 01 Javascript
JS清除字符串中重复值的实现方法
Aug 03 Javascript
jQuery层次选择器用法示例
Sep 09 Javascript
jQuery实现下拉菜单的实例代码
Jun 19 jQuery
js使用ajax传值给后台,后台返回字符串处理方法
Aug 08 Javascript
Next.js项目实战踩坑指南(笔记)
Nov 29 Javascript
vue 输入电话号码自动按3-4-4分割功能的实现代码
Apr 30 Javascript
JS实现前端动态分页码代码实例
Jun 02 Javascript
vue 需求 data中的数据之间的调用操作
Aug 05 Javascript
vue首次渲染全过程
Apr 21 Vue.js
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
PHP调用三种数据库的方法(1)
2006/10/09 PHP
IIS+PHP+MySQL+Zend配置 (视频教程)
2006/12/13 PHP
PHP仿博客园 个人博客(1) 数据库与界面设计
2013/07/05 PHP
分享一段PHP制作的中文拼音首字母工具类
2014/12/11 PHP
PHP正则表达式之捕获组与非捕获组
2015/11/06 PHP
PHP使用栈解决约瑟夫环问题算法示例
2017/08/27 PHP
PHP实现模拟http请求的方法分析
2017/12/20 PHP
php使用lua+redis实现限流,计数器模式,令牌桶模式
2019/04/04 PHP
JavaScript 中的事件教程
2007/04/05 Javascript
慎用 somefunction.prototype 分析
2009/06/02 Javascript
JavaScript和JQuery的鼠标mouse事件冒泡处理
2015/06/19 Javascript
JS判断iframe是否加载完成的方法
2016/08/03 Javascript
js获取地址栏中传递的参数(两种方法)
2017/02/08 Javascript
Webpack优化配置缩小文件搜索范围
2017/12/25 Javascript
微信小程序静默登录的实现代码
2020/01/08 Javascript
[33:42]LGD vs OG 2018国际邀请赛小组赛BO2 第一场 8.16
2018/08/17 DOTA
对Python新手编程过程中如何规避一些常见问题的建议
2015/04/01 Python
Python3.2中Print函数用法实例详解
2015/05/19 Python
Python向日志输出中添加上下文信息
2017/05/24 Python
Python设计模式之抽象工厂模式原理与用法详解
2019/01/15 Python
Python中字符串String的基本内置函数与过滤字符模块函数的基本用法
2019/05/27 Python
python并发编程 Process对象的其他属性方法join方法详解
2019/08/20 Python
解决Django删除migrations文件夹中的文件后出现的异常问题
2019/08/31 Python
利用matplotlib为图片上添加触发事件进行交互
2020/04/23 Python
用python打开摄像头并把图像传回qq邮箱(Pyinstaller打包)
2020/05/17 Python
Win10下配置tensorflow-gpu的详细教程(无VS2015/2017)
2020/07/14 Python
法国女性内衣购物网站:Glamuse
2019/05/13 全球购物
澳大利亚香水在线商店:City Perfume
2020/09/02 全球购物
治超工作实施方案
2014/05/04 职场文书
安全施工标语
2014/06/07 职场文书
乡文化站暑期培训方案
2014/08/28 职场文书
六年级学生评语大全
2014/12/26 职场文书
2015年人民调解工作总结
2015/05/18 职场文书
2015年新农村建设指导员工作总结
2015/07/24 职场文书
2016年校长新年寄语
2015/08/17 职场文书
ubuntu下常用apt命令介绍
2022/06/05 Servers