angularJS とキャンバス描画を組み合わせた例_AngularJS

ここでは、angularJS と Canvas 描画を組み合わせた例を紹介します。その効果は非常に優れています。

コードをコピー コードは次のとおりです:

   
 


 
   

<スクリプト>
// モジュール angular.directives-round-progress を参照します;
var APP = angular.module('APP', ['angular.directives-round-progress']).
コントローラー('MainCtrl', function($scope) {
$scope.roundProgressData = {
//これは初期化されたデータです;
ラベル: 11、
パーセンテージ: 0.11
}
//スコープの下のroundProgressDataプロパティをリッスンしてインターフェースのキャンバスを再描画します;
$scope.$watch('roundProgressData', function (newValue) {
newValue.percentage = newValue.label / 100;
}、true);
});

<スクリプト>
/*!
* AngularJS ラウンド進行ディレクティブ
*
* Copyright 2013 Stephane Begaudeau
* MIT ライセンスに基づいてリリース
*/
angular.module('angular.directives-round-progress', []).directive('angRoundProgress', [function () {
var CompilationFunction = 関数 (templateElement、templateAttributes、transclude) {
If (templateElement.length === 1) {
//キャンバスの初期化などを含め、DOM モデルを初期化します;
var ノード = 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('データラウンド進行モデル', Node.getAttribute('データラウンド進行モデル'));
// 元の要素を置き換えたデモと同等;
Node.parentNode.replaceChild(canvas, ノード);
//さまざまな構成;
var innerCircleWidth = node.getAttribute('data-round-progress-outer-circle-width') || '20';
var innerCircleWidth = node.getAttribute('data-round-progress-inner-circle-width') || '5';
var innerCircleBackgroundColor = node.getAttribute('data-round-progress-outer-circle-background-color') '#505769';
var innerCircleForegroundColor = 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 innerCircleRadius = 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) {
varexpression = Canvas.getAttribute('data-round-progress-model');
//監視モデル、o
// 1 つの属性だけを聞きます。 scope.$watch(expression, function (newValue, oldValue) {
// キャンバスのコンテンツを作成します
            // 新建和重绘を含む;
            var ctx = Canvas.getContext('2d');
            ctx.clearRect(0, 0, 幅, 高さ);
            // 「背景」サークル
            var x = 幅 / 2;
            var y = 高さ / 2;
            ctx.beginPath();
            ctx.arc(x, y, parseInt(outerCircleRadius), 0, Math.PI * 2, false);
            ctx.lineWidth = parseInt(outerCircleWidth);
            ctx.ストロークスタイル = innerCircleBackgroundColor;
            ctx.ストローク();
            // 内側の円
            ctx.beginPath();
            ctx.arc(x, y, parseInt(innerCircleRadius), 0, Math.PI * 2, false);
            ctx.lineWidth = parseInt(innerCircleWidth);
            ctx.ストロークスタイル = innerCircleColor;
            ctx.ストローク();
            // 内側の数値
            ctx.font = labelFont;
            ctx.textAlign = 'センター';
            ctx.textBaseline = 'middle';
            ctx.fillStyle = labelColor;
            ctx.fillText(newValue.label, x, y);
            // 「前景」円
            var startAngle = - (Math.PI / 2);
            var endAngle = ((Math.PI * 2 ) * newValue.percentage) - (Math.PI / 2);
            var反時計回り = false;
            ctx.beginPath();
            ctx.arc(x, y, parseInt(outerCircleRadius), startAngle, endAngle, 反時計回り);
            ctx.lineWidth = parseInt(outerCircleWidth);
            ctx.ストロークスタイル = innerCircleForegroundColor;
            ctx.ストローク();
          }, true);
        }、
        post: function postLink(scope,instanceElement,instanceAttributes,controller) {}
      };
    }
  };
  varroundProgress = {
      //compile ここで先对dom 操作を実行し、再度 $socpe を実行します;
    コンパイル: コンパイル関数、
    置換: true
  };
  ラウンド進行状況を返します;
}]);

以上は angularJS 結合canvas 画の例のすべてのコードです、希望大家が喜欢できます。