Maison > Article > interface Web > Implémentation d'angularJS combinée avec le dessin sur toile

Implémentation d'angularJS combinée avec le dessin sur toile

不言original: 2018-06-22 14:27:272911parcourir

Cet article présente principalement la méthode d'angularJS combinée avec des exemples de dessin sur toile. Les amis qui en ont besoin peuvent s'y référer.

Ici, je vais partager avec vous un exemple de dessin sur toile. bien. S'il vous plaît, aimez-le d'abord.

<!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元素;
  -->
    <p ang:round:progress data-round-progress-model="roundProgressData"></p>
    <br>
    <input type="number" ng-model="roundProgressData.label"/>
    <script>
                                   //引用angular.directives-round-progress这个模块;
     var APP = angular.module(&#39;APP&#39;, [&#39;angular.directives-round-progress&#39;]).
     controller(&#39;MainCtrl&#39;, function($scope) {
        $scope.roundProgressData = {
          //这个是初始化的数据;
          label: 11,
          percentage: 0.11
        }
        //通过监听scope下的这个roundProgressData属性, 对界面的canvas进行重绘;
        $scope.$watch(&#39;roundProgressData&#39;, 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(&#39;angular.directives-round-progress&#39;, []).directive(&#39;angRoundProgress&#39;, [function () {
  var compilationFunction = function (templateElement, templateAttributes, transclude) {
    if (templateElement.length === 1) {
      //初始化DOM模型, 包括初始化canvas等;
      var node = templateElement[0];
      var width = node.getAttribute(&#39;data-round-progress-width&#39;) || &#39;400&#39;;
      var height = node.getAttribute(&#39;data-round-progress-height&#39;) || &#39;400&#39;;
      var canvas = document.createElement(&#39;canvas&#39;);
      canvas.setAttribute(&#39;width&#39;, width);
      canvas.setAttribute(&#39;height&#39;, height);
      canvas.setAttribute(&#39;data-round-progress-model&#39;, node.getAttribute(&#39;data-round-progress-model&#39;));
        //相当于demo, 替换原来的元素;
      node.parentNode.replaceChild(canvas, node);
        //各种配置;
      var outerCircleWidth = node.getAttribute(&#39;data-round-progress-outer-circle-width&#39;) || &#39;20&#39;;
      var innerCircleWidth = node.getAttribute(&#39;data-round-progress-inner-circle-width&#39;) || &#39;5&#39;;
      var outerCircleBackgroundColor = node.getAttribute(&#39;data-round-progress-outer-circle-background-color&#39;) || &#39;#505769&#39;;
      var outerCircleForegroundColor = node.getAttribute(&#39;data-round-progress-outer-circle-foreground-color&#39;) || &#39;#12eeb9&#39;;
      var innerCircleColor = node.getAttribute(&#39;data-round-progress-inner-circle-color&#39;) || &#39;#505769&#39;;
      var labelColor = node.getAttribute(&#39;data-round-progress-label-color&#39;) || &#39;#12eeb9&#39;;
      var outerCircleRadius = node.getAttribute(&#39;data-round-progress-outer-circle-radius&#39;) || &#39;100&#39;;
      var innerCircleRadius = node.getAttribute(&#39;data-round-progress-inner-circle-radius&#39;) || &#39;70&#39;;
      var labelFont = node.getAttribute(&#39;data-round-progress-label-font&#39;) || &#39;50pt Calibri&#39;;
      return {
        pre: function preLink(scope, instanceElement, instanceAttributes, controller) {
          var expression = canvas.getAttribute(&#39;data-round-progress-model&#39;);
            //监听模型, O了
            //就监听一个属性;
          scope.$watch(expression, function (newValue, oldValue) {
            // Create the content of the canvas
            //包括新建和重绘;
            var ctx = canvas.getContext(&#39;2d&#39;);
            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 = &#39;center&#39;;
            ctx.textBaseline = &#39;middle&#39;;
            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>

Ce qui précède représente l'intégralité du contenu de cet article. J'espère qu'il sera utile à l'étude de chacun. Pour plus de contenu connexe, veuillez faire attention au site Web PHP chinois !

Recommandations associées :

Exemples détaillés de l'utilisation combinée d'angularjs et ajax_AngularJS

Parler de Canvas combiné avec JavaScript pour obtenir une image spéciale effets

Javascript combiné avec Canvas pour implémenter une simple horloge circulaire_javascript skills

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Déclaration：

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Article précédent：Analyse sur le positionnement absolu (absolute) et le positionnement flottant (float)Article suivant：Analyse sur le positionnement absolu (absolute) et le positionnement flottant (float)

Articles Liés

Voir plus