Aqui vou compartilhar com você um exemplo de desenho com AngularJS e tela. O efeito é muito bom, como primeiro.
A cópia do código é a seguinte:
<! Doctype html>
<html ng-App = "App">
<head>
<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">
<!-
Esse elemento da interface será substituído pelo elemento Canvas;
->
<Div Ang: Rodada: Progresso Data-Round-Progress-Model = "RoundProgressData"> </div>
<br>
<input type = "número" ng-model = "redondprogressdata.label"/>
<Cript>
// cita o módulo Angular.Directives-Round-androgress;
var app = angular.module ('app', ['angular.directives-round-progresso']).
controlador ('malanctrl', função ($ scope) {
$ scope.RoundProgressData = {
// esses são os dados inicializados;
Etiqueta: 11,
Porcentagem: 0,11
}
// re-Draw the Interface Canvas, ouvindo a propriedade RoundProgressData em Scope;
$ SCOPE. $ Watch ('RoundProgressData', função (newValue) {
newValue.Percentage = newValue.label / 100;
}, verdadeiro);
});
</script>
<Cript>
/*!
* Diretiva de Progresso Rodada AngularJS
*
* Copyright 2013 Stephane Begaudau
* Liberado sob a licença do MIT
*/
Angular.Module ('Angular.Directives-Round-Progress', []). Diretiva ('AngroundProgress', [function () {
var compilationFunction = function (modelo, templateattributes, tradução) {
if (templateElement.length === 1) {
// Inicialize o modelo DOM, incluindo a inicialização da tela, etc.;
var node = templateElement [0];
var width = node.getAttribute ('Data-round-and-width') || '400';
var a altura = node.getAttribute ('Data-round-and-tel-tely') || '400';
var canvas = document.createElement ('canvas');
Canvas.setAttribute ('largura', largura);
Canvas.setAttribute ('altura', altura);
canvas.setAttribute ('Data-round-progresso-model', node.getAttribute ('Data-round-androgress-model'));
// equivalente à demonstração, substituindo o elemento original;
node.parentnode.replacechild (tela, node);
// uma variedade de configurações;
var OuterCircleWidth = Node.getAttribute ('Data-round-progresso-outer-circle-width') || '20';
var inercirclewidth = node.getAttribute ('Data-round-and-inner-inner-circle-width') || '5';
var outercirclebackgroundColor = node.getAttribute ('Data-round-androgress-arter-circle-background-color') || '#505769';
var outercircleforegroundColor = node.getAttribute ('Data-round-androgress-arter-circle-Forgryground-cor') || '#12EEB9';
var inercirclecolor = node.getAttribute ('Data-round-and-and-inner-circle-cor') || '#505769';
var labelcolor = node.getAttribute ('Data-round-progresso-label-color') || '#12EEB9';
var outercircleradius = node.getAttribute ('Data-round-progresso-o-circle-radius') || '100';
var inercircleradius = node.getAttribute ('Data-round-and-inner-inner-circle-radius') || '70';
var Labelfont = Node.getAttribute ('Data-round-and-label-font') || '50pt calibri';
retornar {
pré: function prelink (escopo, instanceelement, instanceattributes, controlador) {
var expressão = Canvas.getAttribute ('Data-round-progresso-model');
// O modelo de monitoramento, o
// apenas ouça um atributo;
escopo. $ relógio (expressão, função (newValue, OldValue) {
// Crie o conteúdo da tela
// incluindo nova criação e redesenho;
var ctx = Canvas.getContext ('2D');
ctx.clearrect (0, 0, largura, altura);
// O círculo "fundo"
var x = largura / 2;
var y = altura / 2;
ctx.BeginPath ();
ctx.arc (x, y, parseint (externocircleradius), 0, math.pi * 2, false);
ctx.linewidth = parseint (largura externa);
ctx.strokestyle = OuterCirclebackgroundColor;
ctx.stroke ();
// o círculo interno
ctx.BeginPath ();
ctx.arc (x, y, parseint (inercirclerradius), 0, math.pi * 2, false);
ctx.linewidth = parseint (innercirclewidth);
ctx.strokestyle = inercirclecolor;
ctx.stroke ();
// O número interno
ctx.font = Labelfont;
ctx.TexTalign = 'Center';
ctx.TextBaseline = 'Middle';
ctx.fillstyle = LABELCOLOR;
ctx.fillText (newValue.label, x, y);
// o círculo "em primeiro 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 (externocircleradius), startangle, endangle, no sentido anti -horário);
ctx.linewidth = parseint (largura externa);
ctx.strokestyle = OuterCircleForeRoundColor;
ctx.stroke ();
}, verdadeiro);
},
POST: função postLink (escopo, instanceElement, instanceattributes, controlador) {}
};
}
};
var redondprogress = {
// na compilação, opere no DOM primeiro e depois ouça em $ socpe;
Compilar: CompilationFunção,
Substitua: verdadeiro
};
Retornar RoundProgress;
}]);
</script>
</body>
</html>
O exposto acima é o código inteiro de AngularJS combinado com exemplos de desenho de lona. Espero que todos possam gostar.