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 相关文章推荐
一种JavaScript的设计模式
Nov 22 Javascript
JavaScript Event学习第四章 传统的事件注册模型
Feb 07 Javascript
jquery实现点击文字可编辑并修改保存至数据库
Apr 15 Javascript
JS模拟酷狗音乐播放器收缩折叠关闭效果代码
Oct 29 Javascript
利用JavaScript阻止表单提交的两种方法
Aug 11 Javascript
Bootstrop实现多级下拉菜单功能
Nov 24 Javascript
HTML5canvas 绘制一个圆环形的进度表示实例
Dec 16 Javascript
JS实现点击下拉菜单把选择的内容同步到input输入框内的实例
Jan 23 Javascript
如何在基于vue-cli的项目自定义打包环境
Nov 10 Javascript
原生JS实现的跳一跳小游戏完整实例
Jan 27 Javascript
基于Layui自定义模块的使用方法详解
Sep 14 Javascript
webpack 如何同时输出压缩和未压缩的文件的实现步骤
Jun 05 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实现网上点歌(二)
2006/10/09 PHP
PHP无限分类的类
2007/01/02 PHP
PHP 文件上传源码分析(RFC1867)
2009/10/30 PHP
那些年一起学习的PHP(一)
2012/03/21 PHP
从jquery的过滤器.filter()方法想到的
2013/09/29 Javascript
在JavaScript中判断整型的N种方法示例介绍
2014/06/18 Javascript
nodejs的10个性能优化技巧
2014/07/15 NodeJs
Angular 4.x 动态创建表单实例
2017/04/25 Javascript
JavaScript 有用的代码片段和 trick
2018/02/22 Javascript
Vue的路由动态重定向和导航守卫实例
2018/03/17 Javascript
页面内锚点定位及跳转方法总结(推荐)
2019/04/24 Javascript
layui 上传文件_批量导入数据UI的方法
2019/09/23 Javascript
使用Vue调取接口,并渲染数据的示例代码
2019/10/28 Javascript
Vue 中 a标签上href无法跳转的解决方式
2019/11/12 Javascript
vant时间控件使用方法详解
2020/12/24 Javascript
[07:52]2014DOTA2 TI逗比武士游V社解说背后的故事
2014/07/10 DOTA
python文件的md5加密方法
2016/04/06 Python
windows上安装Anaconda和python的教程详解
2017/03/28 Python
Python实现的爬虫功能代码
2017/06/24 Python
Selenium鼠标与键盘事件常用操作方法示例
2018/08/13 Python
Python寻找两个有序数组的中位数实例详解
2018/12/05 Python
Pandas中DataFrame的分组/分割/合并的实现
2019/07/16 Python
Python sql注入 过滤字符串的非法字符实例
2020/04/03 Python
python进行参数传递的方法
2020/05/12 Python
python不同系统中打开方法
2020/06/23 Python
python中spy++的使用超详细教程
2021/01/29 Python
HTML5 canvas基本绘图之填充样式实现
2016/06/27 HTML / CSS
精彩的英文自荐信
2014/01/30 职场文书
记账会计岗位职责
2014/06/16 职场文书
房屋出售授权委托书
2014/10/12 职场文书
县委党的群众路线教育实践活动工作情况报告
2014/10/25 职场文书
贪污受贿检讨书范文
2014/11/19 职场文书
2015年幼儿园安全工作总结
2015/05/12 职场文书
Java实现简易的分词器功能
2021/06/15 Java/Android
使用goaccess分析nginx日志的详细方法
2021/07/09 Servers