Di sini saya akan berbagi dengan Anda contoh menggambar dengan AngularJS dan kanvas. Efeknya sangat bagus, seperti dulu.
Salinan kode adalah sebagai berikut:
<! Doctype html>
<html ng-app = "app">
<head>
<meta charset = "UTF-8">
<skrip src = "http://cdn.bootcss.com/angular.js/1.3.0-beta.12/angular.min.js"> </script>
</head>
<body ng-controller = "mainctrl">
<!-
Elemen antarmuka ini akan diganti dengan elemen kanvas;
->
<Div Ang: Round: Kemajuan Data-Round-Progress-Model = "RoundProgressData"> </div>
<br>
<input type = "number" ng-model = "roundprogressdata.label"/>
<script>
// mengutip modul Angular.Directives-round-progress;
var app = angular.module ('app', ['angular.directives-round-progress']).
controller ('mainctrl', function ($ scope) {
$ scope.roundprogressData = {
// Ini adalah data yang diinisialisasi;
Label: 11,
Persentase: 0,11
}
// Kunjungi kembali kanvas antarmuka dengan mendengarkan properti RoundProgressData di bawah cakupan;
$ scope. $ watch ('roundprogressdata', function (newValue) {
newValue.percentage = newValue.label / 100;
}, BENAR);
});
</script>
<script>
/*!
* Petunjuk Round Progress AngularJS
*
* Hak Cipta 2013 Stephane Bagaaudeau
* Dirilis di bawah lisensi MIT
*/
angular.module ('angular.directives-round-progress', []). Directive ('Angroundprogress', [function () {
var compilationFunction = function (templateElement, templateattributes, translate) {
if (templateelement.length === 1) {
// menginisialisasi model DOM, termasuk menginisialisasi kanvas, dll.;
var node = 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 ('tinggi', tinggi);
canvas.setAttribute ('Data-round-progress-Model', node.getAttribute ('Data-round-progress-Model')));
// setara dengan demo, mengganti elemen asli;
node.parentnode.replacechild (canvas, node);
// berbagai konfigurasi;
var outercirclewidth = node.getAttribute ('data-round-progress-outer-circle-width') || '20';
var innercirclewidth = node.getAttribute ('data-round-progress-inner-circle-width') || '5';
var OutcirclebackgroundColor = node.getAttribute ('Data-round-progress-Outter-circle-background-color') || '#505769';
var OutcircleforeGroundColor = node.getAttribute ('data-round-progress-outer-circle-foreground-color') || '#12Eeb9';
var innercirclecolor = node.getAttribute ('data-progress-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 {
Pre: Function Prelink (SCOPE, INSTOMNELEMENT, INSTANCEATTRIBUTES, CONTROLER) {
var ekspresi = canvas.getAttribute ('Data-round-progress-model');
// Model pemantauan, o
// Dengarkan saja atribut;
scope. $ watch (ekspresi, fungsi (newValue, oldvalue) {
// Buat konten kanvas
// termasuk kreasi baru dan menggambar ulang;
var ctx = canvas.getContext ('2d');
ctx.clearrect (0, 0, lebar, tinggi);
// lingkaran "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 ();
// Lingkaran Dalam
ctx.beginpath ();
ctx.arc (x, y, parseint (innercircleradius), 0, math.pi * 2, false);
ctx.linewidth = parseInt (innercirclewidth);
ctx.strokestyle = innercirclecolor;
ctx.stroke ();
// nomor bagian dalam
ctx.font = LaBelfont;
ctx.textAlign = 'center';
ctx.textBaseline = 'tengah';
ctx.fillstyle = labelColor;
ctx.filltext (newValue.label, x, y);
// Lingkaran "latar depan"
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, antiklockwise);
ctx.linewidth = parseInt (outercirclewidth);
ctx.strokestyle = OutercircleforeGroundColor;
ctx.stroke ();
}, BENAR);
},
Posting: fungsi postlink (lingkup, instanceElement, instanceattributes, controller) {}
};
}
};
var roundprogress = {
// dalam kompilasi, beroperasi di DOM terlebih dahulu, dan kemudian dengarkan di $ Socpe;
Kompilasi: Fungsi Kompilasi,
Ganti: Benar
};
Kembali Progress Round;
}]);
</script>
</body>
</html>
Di atas adalah seluruh kode AngularJS dikombinasikan dengan contoh gambar kanvas. Saya harap semua orang bisa menyukainya.