집 > 기사 > 웹 프론트엔드 > 캔버스 그리기와 결합된 AngleJS 구현

캔버스 그리기와 결합된 AngleJS 구현

不言원래의: 2018-06-22 14:27:272859검색

이 글에서는 주로AngularJS와 캔버스 그리기 예제를 소개합니다. 필요하신 분들은 참고하세요.

여기서는 캔버스 그리기 예제와 결합된 AngleJS를 먼저 공유하겠습니다. .

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

위 내용은 모두의 학습에 도움이 되기를 바랍니다. 더 많은 관련 내용은 PHP 중국어 홈페이지를 주목해주세요!

캔버스 그리기와 결합된 AngleJS 구현

관련 기사