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 相关文章推荐
ie focus bug 解决方法
Sep 03 Javascript
基于jquery的禁用右键、文本选择功能、复制按键的实现代码
Aug 27 Javascript
js创建一个input数组并绑定click事件的方法
Jun 12 Javascript
jQuery控制TR显示隐藏的三种常用方法
Aug 21 Javascript
jQuery移动web开发之页面跳转和加载外部页面的实现
Dec 04 Javascript
原生javascript+css3编写的3D魔方动画旋扭特效
Mar 14 Javascript
jQuery展示表格点击变色、全选、删除
Jan 05 Javascript
Linux使用Node.js建立访问静态网页的服务实例详解
Mar 21 Javascript
JavaScript重复元素处理方法分析【统计个数、计算、去重复等】
Dec 14 Javascript
React学习笔记之高阶组件应用
Jun 02 Javascript
vue使用v-for实现hover点击效果
Sep 29 Javascript
vue 导航锚点_点击平滑滚动,导航栏对应变化详解
Aug 10 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
PHP面向对象多态性实现方法简单示例
2017/09/27 PHP
PHP使用PDO访问oracle数据库的步骤详解
2017/09/29 PHP
thinkPHP框架中执行原生SQL语句的方法
2017/10/25 PHP
PHP sdk文档处理常用代码示例解析
2020/12/09 PHP
php中yar框架实例用法讲解
2020/12/27 PHP
event.srcElement+表格应用
2006/08/29 Javascript
基于jquery实现的服务器验证控件的启用和禁用代码
2010/04/27 Javascript
javascript基础知识大全 便于大家学习,也便于我自己查看
2012/08/17 Javascript
jQuery获取节点和子节点文本的方法
2014/07/22 Javascript
js实现发送验证码后的倒计时功能
2015/05/28 Javascript
NodeJS的Promise的用法解析
2016/05/05 NodeJs
Bootstrap时间选择器datetimepicker和daterangepicker使用实例解析
2016/09/17 Javascript
vue组件初学_弹射小球(实例讲解)
2017/09/06 Javascript
20行JS代码实现粘贴板复制功能
2018/02/06 Javascript
小程序实现选择题选择效果
2018/11/04 Javascript
JS实现集合的交集、补集、差集、去重运算示例【ES5与ES6写法】
2019/02/18 Javascript
微信小程序实现时间戳格式转换
2020/07/20 Javascript
[16:04]DOTA2海涛带你玩炸弹 9月5日更新内容详解
2014/09/05 DOTA
用Python实现QQ游戏大家来找茬辅助工具
2014/09/14 Python
python3读取MySQL-Front的MYSQL密码
2017/05/03 Python
Python实现的rsa加密算法详解
2018/01/24 Python
Python requests发送post请求的一些疑点
2018/05/20 Python
对python操作kafka写入json数据的简单demo分享
2018/12/27 Python
Python统计学一数据的概括性度量详解
2020/03/03 Python
基于Django signals 信号作用及用法详解
2020/03/28 Python
canvas实现扭蛋机动画效果的示例代码
2018/10/17 HTML / CSS
戴森美国官网:Dyson美国
2016/09/11 全球购物
StubHub智利:购买和出售您的门票
2016/11/23 全球购物
荷兰手表网站:Watch2Day
2018/07/02 全球购物
项目经理聘任书
2014/03/29 职场文书
小学生手册家长评语
2014/04/16 职场文书
环保小标语
2014/06/13 职场文书
好的旅游活动方案
2014/08/19 职场文书
普通党员对照检查材料
2014/09/24 职场文书
预备党员党支部意见
2015/06/02 职场文书
《狼王梦》读后感:可怜天下父母心
2019/11/01 职场文书