欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

angularJS結(jié)合canvas畫圖例子

 更新時(shí)間:2015年02月09日 15:23:31   投稿:hebedich  
這篇文章主要介紹了angularJS結(jié)合canvas畫圖例子的方法,需要的朋友可以參考下

這里給大家分享一個(gè)angularJS結(jié)合canvas畫圖例子,效果非常不錯(cuò),贊一個(gè)先。

復(fù)制代碼 代碼如下:

<!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">
  <!--
    界面的這個(gè)元素會(huì)被替換成canvas元素;
  -->
    <div ang:round:progress data-round-progress-model="roundProgressData"></div>
    <br>
    <input type="number" ng-model="roundProgressData.label"/>
    <script>
                                   //引用angular.directives-round-progress這個(gè)模塊;
     var APP = angular.module('APP', ['angular.directives-round-progress']).
     controller('MainCtrl', function($scope) {
        $scope.roundProgressData = {
          //這個(gè)是初始化的數(shù)據(jù);
          label: 11,
          percentage: 0.11
        }
        //通過監(jiān)聽scope下的這個(gè)roundProgressData屬性, 對(duì)界面的canvas進(jìn)行重繪;
        $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'));
        //相當(dāng)于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');
            //監(jiān)聽模型, O了
            //就監(jiān)聽一個(gè)屬性;
          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里面先對(duì)dom進(jìn)行操作, 再對(duì)$socpe進(jìn)行監(jiān)聽;
    compile: compilationFunction,
    replace: true
  };
  return roundProgress;
}]);
</script>
</body>
</html>

以上就是angularJS結(jié)合canvas畫圖例子的全部代碼了,希望大家能夠喜歡。

相關(guān)文章

  • angularjs自定義ng-model標(biāo)簽的屬性

    angularjs自定義ng-model標(biāo)簽的屬性

    這篇文章主要介紹了angularjs自定義ng-model標(biāo)簽的屬性的相關(guān)資料,需要的朋友可以參考下
    2016-01-01
  • webapp框架AngularUI的demo改造之路

    webapp框架AngularUI的demo改造之路

    這篇文章主要介紹了webapp框架AngularUI的demo改造之路,需要的朋友可以參考下
    2014-12-12
  • Angular5.1新功能分享

    Angular5.1新功能分享

    這篇文章主要介紹了Angular5.1新功能以及相關(guān)的用法,需要的朋友參考學(xué)習(xí)下吧。
    2017-12-12
  • 基于angular中的重要指令詳解($eval,$parse和$compile)

    基于angular中的重要指令詳解($eval,$parse和$compile)

    下面小編就為大家?guī)硪黄赼ngular中的重要指令詳解($eval,$parse和$compile)。小編覺得挺不錯(cuò)的,現(xiàn)在就分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧
    2016-10-10
  • Angular4 組件通訊方法大全(推薦)

    Angular4 組件通訊方法大全(推薦)

    這篇文章主要介紹了Angular4 組件通訊方法大全(推薦),小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧
    2018-07-07
  • 淺析Angular19 自定義表單控件

    淺析Angular19 自定義表單控件

    這篇文章主要介紹了Angular19 自定義表單控件的相關(guān)資料,非常不錯(cuò),具有參考借鑒價(jià)值,需要的朋友可以參考下
    2018-01-01
  • Angular 4依賴注入學(xué)習(xí)教程之FactoryProvider配置依賴對(duì)象(五)

    Angular 4依賴注入學(xué)習(xí)教程之FactoryProvider配置依賴對(duì)象(五)

    這篇文章主要給大家介紹了關(guān)于Angular 4依賴注入之FactoryProvider配置依賴對(duì)象的相關(guān)資料,文中介紹的非常詳細(xì),對(duì)大家具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面來一起看看吧。
    2017-06-06
  • angular inputNumber指令輸入框只能輸入數(shù)字的實(shí)現(xiàn)

    angular inputNumber指令輸入框只能輸入數(shù)字的實(shí)現(xiàn)

    這篇文章主要介紹了angular inputNumber指令輸入框只能輸入數(shù)字的實(shí)現(xiàn),文中通過示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
    2019-12-12
  • 利用Angularjs實(shí)現(xiàn)幻燈片效果

    利用Angularjs實(shí)現(xiàn)幻燈片效果

    AngularJS是Google開發(fā)的純客戶端JavaScript技術(shù)的WEB框架,用于擴(kuò)展、增強(qiáng)HTML功能,它專為構(gòu)建強(qiáng)大的WEB應(yīng)用而設(shè)計(jì)。下面這篇文章我們來分享如何利用Angularjs實(shí)現(xiàn)幻燈片效果。
    2016-09-09
  • Angular中懶加載模塊初始化技術(shù)實(shí)例解析

    Angular中懶加載模塊初始化技術(shù)實(shí)例解析

    這篇文章主要為大家介紹了Angular中懶加載模塊初始化技術(shù)實(shí)例解析,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪
    2023-10-10

最新評(píng)論