Aquí compartiré con ustedes un ejemplo de dibujo con angularjs y lienzo. El efecto es muy bueno, como este primero.
La copia del código es la siguiente:
<! Doctype html>
<html ng-app = "app">
<Evista>
<meta charset = "utf-8">
<script src = "http://cdn.bootcss.com/angular.js/1.3.0-beta.12/angular.min.js"> </script>
</ablo>
<Body Ng-Controller = "MainCtrl">
<!-
Este elemento de la interfaz se reemplazará con el elemento de lona;
->
<Div Ang: Round: Progress Data-Round-Progress-Model = "RoundProgressData"> </div>
<br>
<input type = "number" ng-model = "redondeprogressData.label"/>
<script>
// cita el módulo angular. Directives-Round-Progress;
var app = angular.module ('app', ['angular.Directives-Round-Progress']).
controlador ('mainctrl', function ($ scope) {
$ Scope.roundProgressData = {
// Estos son los datos inicializados;
Etiqueta: 11,
Porcentaje: 0.11
}
// Vuelva a dibujar el lienzo de la interfaz escuchando la propiedad RoundProgressData bajo el alcance;
$ Scope. $ Watch ('RoundProgressData', function (NewValue) {
newValue.Percentage = newValue.label / 100;
}, verdadero);
});
</script>
<script>
/*!
* Directiva de progreso redondo de AngularJS
*
* Copyright 2013 Stephane Begaudeau
* Lanzado bajo la licencia MIT
*/
Angular.module ('Angular.Directives-Round-Progress', []). Directiva ('AngroundProgress', [function () {
VAR CompilationFunction = function (TemplateElement, TempleTeAtTributes, traducir) {
if (TemplateElement.length === 1) {
// Inicializar el modelo DOM, incluida la inicialización de lienzos, etc.;
var nodo = TemplateElement [0];
var width = node.getAttribute ('Data-Round-Progress-width') || '400';
var hight = node.getAttribute ('Data-Round-Progress-Height') || '400';
var lienvas = document.createElement ('Canvas');
Canvas.SetAttribute ('ancho', ancho);
Canvas.SetAttribute ('altura', altura);
Canvas.SetAttribute ('Data-Round-Progress-Model', Node.getAttribute ('Data-Round-Progress-Model'));
// equivalente a la demostración, reemplazando el elemento original;
node.parentnode.replaceChild (Canvas, nodo);
// una variedad de configuraciones;
var ourtercirclewidth = node.getAttribute ('data-rondeund-progrese -uter-circle-width') || '20';
var innerCircleWidth = node.getAttribute ('Data-Round-Progress-Inner-Circle-Width') || '5';
var ourterCirclebackgroundColor = node.getAttribute ('data-ronde-progrese -uter-circle-background-color') || '#505769';
var ourcircleforegroundColor = node.getAttribute ('Data-Round-Progress-Uuter-Circle-Forebround-Color') || '#12EEB9';
var innerCirClecolor = node.getAttribute ('Data-Round-Progress-Inner-Circle-Color') || '#505769';
var LabelColor = node.getAttribute ('Data-Round-Progress-Label-Color') || '#12EEB9';
var ourterCircleradius = node.getAttribute ('Data-Round-Progress-Uuter-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';
devolver {
Pre: function prelink (alcance, instanceElement, instanceattributes, controlador) {
VAR Expression = Canvas.getAttribute ('Data-Round-Progress-Model');
// El modelo de monitoreo, o
// solo escucha un atributo;
alcance. $ watch (expresión, función (newValue, OldValue) {
// Crear el contenido del lienzo
// incluyendo nueva creación y redibujado;
var ctx = canvas.getContext ('2d');
ctx.ClearRect (0, 0, ancho, altura);
// El círculo de "fondo"
var x = ancho / 2;
var y = altura / 2;
ctx.beginpath ();
ctx.arc (x, y, parseint (ourtercircleradius), 0, math.pi * 2, falso);
ctx.linewidth = parseInt (externacirclewidth);
ctx.Strokestyle = OuterCircleBackgroundColor;
ctx.stroke ();
// El círculo interior
ctx.beginpath ();
ctx.arc (x, y, parseint (innercircleradius), 0, math.pi * 2, falso);
ctx.linewidth = parseInt (innercirclewidth);
ctx.Strokestyle = innerCirCleColor;
ctx.stroke ();
// el número interno
ctx.font = Labelfont;
ctx.textalign = 'Center';
ctx.TextBaseline = 'Middle';
ctx.fillStyle = LabelColor;
ctx.FillText (newValue.label, x, y);
// el círculo de "primer plano"
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 (ourtercircleradius), startangle, endangle, en sentido antihorario);
ctx.linewidth = parseInt (externacirclewidth);
ctx.Strokestyle = OuterCircleForeGroundColor;
ctx.stroke ();
}, verdadero);
},
POST: FUNCIÓN POSTLINK (ELCOPE, INSTANCEELEMENT, INSTANCEATTRIBUTES, CONTROLOR) {}
};
}
};
var redondeprogress = {
// En compilar, opere en el DOM primero y luego escuche en $ Socpe;
Compilar: Funciones de compilación,
Reemplazar: Verdadero
};
devolver el progreso redondo;
}]);
</script>
</body>
</html>
Lo anterior es todo el código de angularjs combinado con ejemplos de dibujo de lienzo. Espero que a todos les guste.