Hier werde ich mit Ihnen ein Beispiel für das Zeichnen mit AngularJs und Leinwand teilen. Der Effekt ist sehr gut, so wie es zuerst.
Die Codekopie lautet wie folgt:
<! DocType html>
<html ng-App = "App">
<kopf>
<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">
<!-
Dieses Element der Schnittstelle wird durch das Canvas -Element ersetzt.
->
<Div Ang: Runde: Fortschrittsdatenrunden-progress-model = "RoundProgressData"> </div>
<br>
<input type = "number" ng-model = "RoundProgressData.label"/>
<Script>
// zitieren das angular.directives-Round-Progress-Modul;
var app = angular.module ('App', ['Angular.Directives-Round-Progress']).
Controller ('mainctrl', Funktion ($ scope) {
$ scope.roundProgressData = {{
// Dies sind die initialisierten Daten;
Etikett: 11,
Prozentsatz: 0,11
}
// Die Schnittstellen-Leinwand neu anziehen, indem Sie sich die Rundeprogressdata-Eigenschaft unter dem Umfang anhören.
$ scope. $ watch ('RoundProgressData', Funktion (NewValue) {
newValue.percentage = newValue.label / 100;
}, WAHR);
});
</script>
<Script>
/*!
* AngularJS -Runde Fortschrittsrichtlinie
*
* Copyright 2013 Stephane Begaudeau
* Veröffentlicht unter der MIT -Lizenz
*/
Angular.module ('Angular.Directives-Round-Progress', []). Richtlinie ('AngroundProgress', [function () {
var compilationFunction = Funktion (TemplateLeement, templateattributes, übersetzen) {
if (templateElement.length === 1) {
// Initialisieren Sie das DOM -Modell, einschließlich der Initialisierung von Leinwand usw.;
var node = templateElement [0];
var width = node.getAttribute ('datenrunde-progress-width') || '400';
var height = node.getAttribute ('datenrund-progress-hohe') || '400';
var canvas = document.createelement ('canvas');
canvas.setattribute ('width', width);
canvas.setattribute ('Höhe', Höhe);
canvas.setattribute ('datenrund-progress-modell', node.getAttribute ('data-rund-progress-modell'));
// dem Demo entspricht, das ursprüngliche Element ersetzt;
node.parentnode.replacechild (Canvas, Knoten);
// verschiedene Konfigurationen;
var outercirclewidth = node.getAttribute ('datenrund-progress-outter-circle-Width') || '20';
var Innercirclewidth = node.getAttribute ('Daten-Runden-Programm-Inner-Kreisbreite') || '5';
var outercircleBackgroundcolor = node.getAttribute ('Datenrund-Programm-Outter-Circle-Background-Color') || '#505769';
var outercircleforecroundcolor = node.getAttribute ('datenrund-progress-outter-circle-Forground-Color') || '#12eeb9';
var innercirclecolor = node.getAttribute ('Daten-Runden-Programm-Inner-Circle-Color') || '#505769';
var labelColor = node.getAttribute ('data-rund-progress-label-color') || '#12eeb9';
var outercircleradius = node.getAttribute ('datenrund-progress-outter-circle-radius') || '100';
var Innercircleradius = node.getAttribute ('Daten-Runden-Programm-Inner-Circle-Radius') || '70';
var labelfont = node.getAttribute ('datenrunde-progress-label-font') || '50pt Calibri';
zurückkehren {
Pre: Function Prelink (Umfang, Instanzelement, Instanceattributes, Controller) {
var expression = canvas.getAttribute ('datenrunden-progress-modell');
// das Überwachungsmodell, o
// Hören Sie einfach auf ein Attribut zu;
SCOPE. $ WATCH (Ausdruck, Funktion (NewValue, OldValue) {
// Erstellen Sie den Inhalt der Leinwand
// einschließlich neuer Schöpfung und Neuausziehung;
var ctx = canvas.getContext ('2d');
ctx.clearRect (0, 0, Breite, Höhe);
// der "Hintergrund" Kreis
var x = width / 2;
var y = Höhe / 2;
ctx.beginPath ();
ctx.arc (x, y, parseInt (obercircleradius), 0, math.pi * 2, false);
ctx.linewidth = parseInt (obercirclewidth);
ctx.strokestyle = äußereCircleBackgroundColor;
ctx.stroke ();
// der innere Kreis
ctx.beginPath ();
ctx.arc (x, y, parseInt (Innercircleradius), 0, math.pi * 2, false);
ctx.linewidth = parseInt (Innercirclewidth);
ctx.strokestyle = innerCircleColor;
ctx.stroke ();
// die innere Nummer
ctx.font = labelfont;
ctx.textalign = 'center';
ctx.textbaseline = 'Middle';
Ctx.FillStyle = LabelColor;
Ctx.FillText (newValue.label, x, y);
// der "Vordergrund" Kreis
var startangle = - (math.pi / 2);
var endangle = ((math.pi * 2) * newValue.percentage) - (math.pi / 2);
var gegenüber gegen den Lockwise = false;
ctx.beginPath ();
ctx.arc (x, y, parseInt (obercircleradius), Startangle, Endangle, gegen den Gegenwart);
ctx.linewidth = parseInt (obercirclewidth);
ctx.strokestyle = äußereCircleforegroundColor;
ctx.stroke ();
}, WAHR);
},
Beitrag: Funktion Postlink (Umfang, Instanzelement, Instanceattributes, Controller) {}
};
}
};
var Roundprogress = {
// in kompilieren, zuerst auf dem DOM arbeiten und dann auf $ socpe zuhören;
Kompilierung: CompilationFunction,
Ersetzen: wahr
};
Rücklaufrundprogress;
}]);
</script>
</body>
</html>
Das obige ist der gesamte Code von AngularJs in Kombination mit Beispielen für Leinwandzeichnungen. Ich hoffe, es kann es mögen.