注册登录

【angularJS】angularJS结合canvas画图例子-canvas

时间:2016-02-17 21:53 来源: 我爱IT技术网作者:佚名

欢迎您访问我爱IT技术网，今天小编为你分享的javascript教程：【angularJS结合canvas画图例子】，下面是详细的讲解！

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">

    <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>

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画图例子的用户互动如下：

　　相关问题：有没结合使用AngularJS和spring前后端分离开发的例...

　　答：java端完全弃用jsp改为开发api，返回json数据，然后view就独立出一个res文件夹存放angular项目，实际上是纯前端，可以放在任何地方跨域运行，两端协商好api就可以了。 >>详细

　　相关问题：angularJS关于依赖和模块与amd/cmd的区别，分享下...

　　答：双向绑定，可测试性的代码结构，模型视图分离的一个前端MV*框架其中angular也提供了模型的概念和依赖管理，不过这个依赖都是要在js对象都已经定义的前提下，没有像amd/cmd提供按需加载。我个人比较喜欢cmd(seajs)，它对顶级作用域window的使用... >>详细

　　相关问题：angularjs 可不可通过元素id来个变元素样式？如果...

　　答：jqLite in angularjs angular.element("#element-id") 这是一个DOM操作。Angular不会帮助你获得DOM的某个属性。你需要使用的是DOM选择器，不管是原生的也好或者像jQuery这样的库也好。获取ID的目标地是为了操作DOM, Angular的设计思想不是这样... >>详细

评论列表（网友评论仅供网友表达个人看法，并不表明本站同意其观点或证实其描述）

【angularJS】angularJS结合canvas画图例子-canvas

angularJS结合canvas画图例子

关于angularJS结合canvas画图例子的用户互动如下：

第一章 JavaScript （基础）

第二章 JavaScript（高级）