Ici, je partagerai avec vous un exemple de dessin avec AngularJS et Canvas. L'effet est très bon, comme ça en premier.
La copie de code est la suivante:
<! Doctype html>
<html ng-app = "app">
<adal>
<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">
<! -
Cet élément de l'interface sera remplacé par l'élément Canvas;
->
<div ang: Round: Progress Data-Round-Progress-Model = "RoundProgressData"> </div>
<br>
<input type = "nombre" ng-model = "RoundProgressData.Label" />
<cript>
// cite le module angulaire.directives-ronde-progress;
var app = angular.module ('app', ['angular.directives-rond-progress']).
contrôleur ('mainctrl', fonction ($ scope) {
$ scope.roundProgressData = {
// Ce sont les données initialisées;
Étiquette: 11,
pourcentage: 0,11
}
// Reprenez le canevas d'interface en écoutant la propriété RoundProgressData sous portée;
$ scope. $ watch ('RoundProgressData', fonction (newValue) {
newValue.Percentage = newValue.Label / 100;
}, vrai);
});
</cript>
<cript>
/ *!
* Directive AngularJs Round Progress
*
* Copyright 2013 Stephane Begaudeau
* Libéré sous la licence MIT
* /
angular.module ('angular.directives-round-progress', []). directive ('angroundprogress', [function () {
var compilationFunction = function (matteaLelement, templateAtTributes, tradlate) {
if (templateElement.length === 1) {
// initialise le modèle DOM, y compris l'initialisation du canevas, etc.;
var node = mattlateElement [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 («largeur», largeur);
canvas.setAttribute («hauteur», hauteur);
canvas.setAttribute («Data-Round-Progress-model», node.getAttribute («Data-Round-Progress-model»));
// équivalent à la démo, en remplaçant l'élément d'origine;
Node.parentNode.replaceChild (Canvas, Node);
// une variété de configurations;
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 InnerCirleColor = node.getAttribute ('Data-Round-Progress-inner-Circle-Color') || «# 505769»;
var labelcolor = node.getAttribute ('Data-Round-Progress-Label-Color') || «# 12EEB9»;
var outerricrleradius = node.getAttribute ('data-roun-progress-youter-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»;
retour {
pre: fonction prelink (scope, instanceElement, instanceAttributes, contrôleur) {
var expression = canvas.getAttribute ('data-roun-progress-model');
// le modèle de surveillance, o
// Écoutez simplement un attribut;
Scope. $ watch (expression, fonction (newValue, oldValue) {
// Créer le contenu de la toile
// y compris la nouvelle création et redémarrer;
var ctx = canvas.getContext ('2d');
ctx.ClearRect (0, 0, largeur, hauteur);
// le cercle "arrière-plan"
var x = largeur / 2;
var y = hauteur / 2;
ctx.beginPath ();
ctx.arc (x, y, parseInt (OuterCircleradius), 0, math.pi * 2, false);
ctx.lineWidth = paSeInt (OuterCircleWidth);
ctx.strokestyle = OuterCircleBackgroundColor;
ctx.stroke ();
// le cercle intérieur
ctx.beginPath ();
ctx.arc (x, y, parseInt (Innercircleradius), 0, math.pi * 2, false);
ctx.linewidth = parseInt (InnerCircleWidth);
ctx.strokestyle = InnerCircleColor;
ctx.stroke ();
// le numéro intérieur
ctx.font = Labelfont;
ctx.textalign = 'Centre';
ctx.textBaseline = 'middle';
CTX.FillStyle = LabelColor;
ctx.fillText (newValue.Label, x, y);
// le cercle "de premier plan"
var startangle = - (math.pi / 2);
var endangle = ((math.pi * 2) * newValue.percentage) - (math.pi / 2);
var dans le sens anticipé = false;
ctx.beginPath ();
ctx.arc (x, y, parseInt (Outercircleradius), startangle, endangle, dans le sens anticipé);
ctx.lineWidth = paSeInt (OuterCircleWidth);
ctx.strokestyle = OuterCircleforeFublingColor;
ctx.stroke ();
}, vrai);
},
POST: fonction postLink (étendue, instance, une instance InstanceAttributes, contrôleur) {}
};
}
};
var rondProgress = {
// Dans compiler, opérer d'abord sur le DOM, puis écouter $ socpe;
compiler: compilationfunction,
Remplacer: vrai
};
Retour RoundProgress;
}]);
</cript>
</docy>
</html>
Ce qui précède est le code entier d'AngularJS combiné avec des exemples de dessin de toile. J'espère que tout le monde pourra l'aimer.