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 相关文章推荐
使两个iframe的高度与内容自适应,且相等
Nov 20 Javascript
javascript 读取xml,写入xml 实现代码
Jul 10 Javascript
JavaScript 设计模式学习 Factory
Jul 29 Javascript
DOM和XMLHttpRequest对象的属性和方法整理
Jan 04 Javascript
jquery显示隐藏input对象
Jul 21 Javascript
jQuery 实现自动填充邮箱功能(带下拉提示)
Oct 14 Javascript
Web开发必知Javascript技巧大全
Feb 23 Javascript
详解JavaScript中|单竖杠运算符的使用方法
May 23 Javascript
微信小程序Redux绑定实例详解
Jun 07 Javascript
JavaScript中防止微信浏览器被整体拖动的方法
Aug 25 Javascript
简述pm2常用命令集合及配置文件说明
May 30 Javascript
小程序简单两栏瀑布流效果的实现
Dec 18 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
phplock(php进程锁) v1.0 beta1
2009/11/24 PHP
php学习之运算符相关概念
2011/06/09 PHP
模板引擎正则表达式调试小技巧
2011/07/20 PHP
PHP笔记之:日期函数的使用介绍
2013/04/24 PHP
php防止CC攻击代码 php防止网页频繁刷新
2015/12/21 PHP
Yii针对添加行的增删改查操作示例
2016/10/18 PHP
JavaScript Perfection kill 测试及答案
2010/03/23 Javascript
IE6图片加载的一个BUG解决方法
2010/07/13 Javascript
IE6下通过a标签点击切换图片的问题
2010/11/14 Javascript
JQuery获取当前屏幕的高度宽度的实现代码
2011/07/12 Javascript
jQuery 1.9.1源码分析系列(十)事件系统之绑定事件
2015/11/19 Javascript
jQuery实现定位滚动条位置
2016/08/05 Javascript
JavaScript使用键盘输入控制实现数字验证功能
2016/08/19 Javascript
JS定时器实现数值从0到10来回变化
2016/12/09 Javascript
jQuery实现标签页效果实战(4)
2017/02/08 Javascript
浅谈 Vue v-model指令的实现原理
2017/06/08 Javascript
Easyui Datagrid自定义按钮列(最后面的操作列)
2017/07/13 Javascript
vue实现前端分页完整代码
2020/06/17 Javascript
[55:35]DOTA2-DPC中国联赛 正赛 CDEC vs Dragon BO3 第二场 1月22日
2021/03/11 DOTA
在Django中管理Users和Permissions以及Groups的方法
2015/07/23 Python
Python实现Linux的find命令实例分享
2017/06/04 Python
python绘制简单折线图代码示例
2017/12/19 Python
浅谈Matplotlib简介和pyplot的简单使用——文本标注和箭头
2018/01/09 Python
python计算两个矩形框重合百分比的实例
2018/11/07 Python
dataframe 按条件替换某一列中的值方法
2019/01/29 Python
Django restframework 源码分析之认证详解
2019/02/22 Python
对python中UDP,socket的使用详解
2019/08/22 Python
Python selenium页面加载慢超时的解决方案
2020/03/18 Python
python lambda的使用详解
2021/02/26 Python
汽车专业人才自我鉴定范文
2013/12/29 职场文书
小学生获奖感言范文
2014/02/02 职场文书
反四风个人对照检查材料
2014/09/26 职场文书
三潭印月的导游词
2015/02/12 职场文书
2015年生产部工作总结范文
2015/05/25 职场文书
Python下载商品数据并连接数据库且保存数据
2022/03/31 Python
Python+Tkinter制作专属图形化界面
2022/04/01 Python