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 相关文章推荐
utf8的编码算法 转载
Dec 27 Javascript
博客侧边栏模块跟随滚动条滑动固定效果的实现方法(js+jquery等)
Mar 24 Javascript
JS图片定时翻滚效果实现方法
Jun 21 Javascript
前端框架Vue.js构建大型应用浅析
Sep 12 Javascript
js 中文汉字转Unicode、Unicode转中文汉字、ASCII转换Unicode、Unicode转换ASCII、中文转换
Dec 06 Javascript
jquery,js简单实现类似Angular.js双向绑定
Jan 13 Javascript
整理关于Bootstrap警示框的慕课笔记
Mar 29 Javascript
jQuery实现的滑块滑动导航效果示例
Jun 04 jQuery
微信小程序中进行地图导航功能的实现方法
Jun 29 Javascript
JavaScript创建对象的常用方式总结
Aug 10 Javascript
JavaScript变量作用域及内存问题实例分析
Jun 10 Javascript
vue props对象validator自定义函数实例
Nov 13 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
discuz Passport 通行证 整合笔记
2008/06/30 PHP
不用mod_rewrite直接用php实现伪静态化页面代码
2008/10/04 PHP
php中可能用来加密字符串的函数[base64_encode、urlencode、sha1]
2012/01/16 PHP
php的dl函数用法实例
2014/11/06 PHP
php app支付宝回调(异步通知)详解
2018/07/25 PHP
PHP集成环境XAMPP的安装与配置
2018/11/13 PHP
jquery导航制件jquery鼠标经过变色效果示例
2013/12/05 Javascript
jquery获取对象的方法足以应付常见的各种类型的对象
2014/05/14 Javascript
jQuery trigger()方法用法介绍
2015/01/13 Javascript
借助FileReader实现将文件编码为Base64后通过AJAX上传
2015/12/24 Javascript
快速解决Canvas.toDataURL 图片跨域的问题
2016/05/10 Javascript
JavaScript利用闭包实现模块化
2017/01/13 Javascript
JavaScript设计模式之职责链模式应用示例
2018/08/07 Javascript
微信小程序自定义tabbar custom-tab-bar 6s出不来解决方案(cover-view不兼容)
2019/11/01 Javascript
基于canvasJS在PHP中制作动态图表
2020/05/30 Javascript
JavaScript缺少insertAfter解决方案
2020/07/03 Javascript
基于Vue中的父子传值问题解决
2020/07/27 Javascript
[57:18]DOTA2上海特级锦标赛主赛事日 - 1 败者组第一轮#3VP VS VG
2016/03/03 DOTA
Python之str操作方法(详解)
2017/06/19 Python
Python实现的旋转数组功能算法示例
2019/02/23 Python
python使用Plotly绘图工具绘制柱状图
2019/04/01 Python
python实现图片转字符小工具
2019/04/30 Python
Python paramiko模块使用解析(实现ssh)
2019/08/30 Python
Python 可变类型和不可变类型及引用过程解析
2019/09/27 Python
Python之指数与E记法的区别详解
2019/11/21 Python
Python 找出英文单词列表(list)中最长单词链
2020/12/14 Python
The North Face北面荷兰官网:美国著名户外品牌
2019/10/16 全球购物
承认错误的检讨书
2014/01/30 职场文书
就业自我评价
2014/02/04 职场文书
促销活动总结范文
2014/04/30 职场文书
厕所文明标语
2014/06/11 职场文书
商业企业管理专业求职信
2014/07/10 职场文书
机械工程及其自动化专业求职信
2014/08/08 职场文书
2014党委书记四风对照检查材料思想汇报
2014/09/21 职场文书
实用干货:敬酒词大全,帮你应付各种场合
2019/11/21 职场文书
浅谈Python协程asyncio
2021/06/20 Python