suchen

Heim  >  Artikel  >  Web-Frontend  >  Implementierung von AngularJS kombiniert mit Canvas-Zeichnung

Implementierung von AngularJS kombiniert mit Canvas-Zeichnung

不言
不言Original
2018-06-22 14:27:272916Durchsuche

In diesem Artikel wird hauptsächlich die Methode von AngularJS in Kombination mit Beispielen für Leinwandzeichnungen vorgestellt.

Hier werde ich ein Beispiel für AngularJS in Kombination mit Leinwandzeichnungen vorstellen Gut. Bitte gefällt es dir zuerst. 

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

Das Obige ist der gesamte Inhalt dieses Artikels. Ich hoffe, er wird für das Studium aller hilfreich sein. Weitere verwandte Inhalte finden Sie auf der chinesischen PHP-Website.

Verwandte Empfehlungen:

Detaillierte Beispiele für die kombinierte Verwendung von AngularJS und Ajax_AngularJS

Erzählen Sie von Canvas in Kombination mit JavaScript, um ein besonderes Bild zu erzielen Effekte

Javascript kombiniert mit Canvas zur Implementierung einer einfachen kreisförmigen Uhr_Javascript-Fähigkeiten

Das obige ist der detaillierte Inhalt vonImplementierung von AngularJS kombiniert mit Canvas-Zeichnung. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Stellungnahme：
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel：Analyse zur absoluten Positionierung (absolut) und schwebenden Positionierung (float)Nächster Artikel：Analyse zur absoluten Positionierung (absolut) und schwebenden Positionierung (float)

In Verbindung stehende Artikel

Mehr sehen