Contoh angularJS digabungkan dengan lukisan kanvas_AngularJS

Di sini saya ingin berkongsi dengan anda contoh angularJS yang digabungkan dengan lukisan kanvas Kesannya sangat bagus.

Salin kod Kod adalah seperti berikut:

   
 


 
   

//Rujuk modul angular.directives-round-progress;
var APP = angular.module('APP', ['angular.directives-round-progress']).
pengawal('MainCtrl', fungsi($skop) {
          $scope.roundProgressData = {
//Ini adalah data yang dimulakan;
label: 11,
peratusan: 0.11
}
//Lukis semula kanvas antara muka dengan mendengar sifat roundProgressData di bawah skop;
$scope.$watch('roundProgressData', fungsi (newValue) {
newValue.percentage = newValue.label / 100;
         }, benar);
});


/*!
* Arahan Kemajuan Bulat AngularJS
*
* Hak Cipta 2013 Stephane Begaudeau
* Dikeluarkan di bawah lesen MIT
*/
angular.module('angular.directives-round-progress', []).directive('angRoundProgress', [function () {
var compilationFunction = fungsi (templateElement, templateAttributes, transclude) {
Jika (templateElement.length === 1) {
//Memulakan model DOM, termasuk memulakan kanvas, dsb.;
var nod = 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('lebar', lebar);
       canvas.setAttribute('height', height);
Canvas.setAttribute('data-round-progress-model', node.getAttribute('data-round-progress-model'));
//Setaraf dengan demo, gantikan elemen asal;
Node.parentNode.replaceChild(kanvas, nod);
//Pelbagai konfigurasi;
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';
Kembali {
            pra: fungsi praPautan(skop, instanceElement, instanceAttributes, pengawal) {
           var expression = canvas.getAttribute('data-round-progress-model');
                                                                                                                                                                                                                                                                                                                                                                                                                                                               // Model pemantauan, O
//Hanya dengar satu atribut; skop.$watch(ungkapan, fungsi (newValue, oldValue) {
                       // Buat kandungan kanvas
            //包括新建和重绘;
            var ctx = canvas.getContext('2d');
            ctx.clearRect(0, 0, lebar, tinggi);
            // Bulatan "latar belakang"
            var x = lebar / 2;
            var y = tinggi / 2;
            ctx.beginPath();
            ctx.arc(x, y, parseInt(outerCircleRadius), 0, Math.PI * 2, false);
            ctx.lineWidth = parseInt(outerCircleWidth);
            ctx.strokeStyle = outerCircleBackgroundColor;
            ctx.stroke();
            // Bulatan dalam
            ctx.beginPath();
            ctx.arc(x, y, parseInt(innerCircleRadius), 0, Math.PI * 2, false);
            ctx.lineWidth = parseInt(innerCircleWidth);
            ctx.strokeStyle = innerCircleColor;
            ctx.stroke();
            // Nombor dalam
            ctx.font = labelFont;
            ctx.textAlign = 'center';
            ctx.textBaseline = 'tengah';
            ctx.fillStyle = labelColor;
            ctx.fillText(newValue.label, x, y);
            // Bulatan "latar depan"
            var startAngle = - (Math.PI / 2);
            var endAngle = ((Math.PI * 2 ) * newValue.percentage) - (Math.PI / 2);
            var lawan jam = palsu;
            ctx.beginPath();
            ctx.arc(x, y, parseInt(outerCircleRadius), startAngle, endAngle, lawan jam);
            ctx.lineWidth = parseInt(outerCircleWidth);
            ctx.strokeStyle = outerCircleForegroundColor;
            ctx.stroke();
          }, benar);
        },
        siaran: fungsi postLink(skop, instanceElement, instanceAttributes, pengawal) {}
      };
    }
  };
  var roundProgress = {
      //compile里面先对dom进行操作, 再对$socpe进行监听;
    compile: compilationFunction,
    gantikan: benar
  };
  kembali pusinganProgress;
}]);

以上就是angularJS结合canvas画图例子的全部代码了，希望大家能够喜欢。