Здесь я поделюсь с вами примером рисования с помощью Angularjs и Canvas. Эффект очень хороший, как это, как это, сначала.
Кода -копия выглядит следующим образом:
<! Doctype html>
<html ng-app = "app">
<голова>
<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">
<!-
Этот элемент интерфейса будет заменен на элемент холста;
->
<div Ang: Round: Progress Data-round-progress-model = "RoundProgressData"> </div>
<br>
<input type = "number" ng-model = "roundprogressdata.label"/>
<Скрипт>
// цитируйте модуль Angular.Directives-раунд-прогресс;
var app = angular.module ('app', ['angular.directives-round-progress']).
Controller ('mainctrl', function ($ scope) {
$ scope.roundprogressdata = {
// это инициализированные данные;
Этикетка: 11,
Процент: 0,11
}
// повторно рисовать холст интерфейса, прослушивая свойство раунд процессдат в рамках;
$ scope. $ watch ('routprogressdata', function (newvalue) {
newValue.percentage = newValue.label / 100;
}, истинный);
});
</script>
<Скрипт>
/**
* Angularjs Dround Progress Directive
*
* Copyright 2013 Стефан Бегадо
* Выпущено по лицензии MIT
*/
angular.module ('angular.directives-sround-progress', []). Директива ('angroundprogress', [function () {
var compilationfunction = function (Templateelement, Templateattributes, Transate) {
if (templateelement.length === 1) {
// Инициализировать модель DOM, включая инициализацию холста и т. Д.;
var node = templateelement [0];
var width = node.getattribute ('Data-раунд-процесс-ширина') || '400';
var height = node.getAttribute ('Data-раунд-прогресс-Height') || '400';
var canvas = document.createElement ('canvas');
canvas.setattribute ('width', width);
canvas.setattribute ('высота', высота);
canvas.setattribute ('Data-раунд-прогресс-модель', node.getAttribute ('Data-раунд-предварительная модель'));
// эквивалентно демонстрации, заменив исходный элемент;
node.parentnode.replacechild (Canvas, Node);
// различные конфигурации;
var outtercirclewidth = node.getattribute ('Data-раунд-прогресс-стержень-цирк-ширина') || '20';
var innerCircleWidth = node.getAttribute ('Data-раунд-прогресс-международный цикл-ширина') || '5';
var outtercirclebackgroundcolor = node.getattribute ('Data-раунд-прогресс-конгресс-цирк-обратный цвет') || '#505769';
var overcircleforegroundcolor = node.getAttribute ('Data-раунд-прогресс-конгресс-цирк-речь '#12EEB9';
var innerCircLecolor = node.getAttribute ('Data-раунд-прогресс-международной цирк-цвета') || '#505769';
var labelcolor = node.getattribute ('Data-раунд-прогресс-лабель-цвета') || '#12EEB9';
var outtercircleradius = node.getAttribute ('Data-раунд-прогресс-стер-цирк-radius') || '100';
var innercircleradius = node.getattribute ('Data-раунд-прогресс-иннерги-цирк-радиус') || '70';
var labelfont = node.getAttribute ('Data-раунд-прогресс-label-font') || '50pt calibri';
возвращаться {
pre: function prelink (область применения, экземпляры, instanceattributes, controller) {
var Express = canvas.getAttribute ('Data-Round-Progress-Model');
// Модель мониторинга, o
// просто послушайте атрибут;
Scope. $ WATCH (выражение, функция (newValue, oldValue)
// Создание содержания холста
// включая новое творение и перераспределение;
var ctx = canvas.getContext ('2d');
ctx.clearrect (0, 0, ширина, высота);
// круг «фона»
var x = ширина / 2;
var y = высота / 2;
ctx.beginpath ();
ctx.arc (x, y, parseint (uptercircleradius), 0, math.pi * 2, false);
ctx.linewidth = parseint (uptercirclewidth);
ctx.strokestyle = overcirclebackgroundcolor;
ctx.stroke ();
// внутренний круг
ctx.beginpath ();
ctx.arc (x, y, parseint (innercircleradius), 0, math.pi * 2, false);
ctx.linewidth = parseint (innercirclewidth);
ctx.strokestyle = innercirclecolor;
ctx.stroke ();
// внутренний номер
ctx.font = labelfont;
ctx.textalign = 'center';
ctx.textbaseline = 'middle';
ctx.fillstyle = labelcolor;
ctx.filltext (newvalue.label, x, y);
// круг "переднего плана"
var startAngle = - (math.pi / 2);
var endangle = ((math.pi * 2) * newvalue.percentage) - (math.pi / 2);
var antoplocklobing = false;
ctx.beginpath ();
ctx.arc (x, y, parseint (uptercircleradius), startangle, endangle, против часовой стрелки);
ctx.linewidth = parseint (uptercirclewidth);
ctx.strokestyle = uptercircleforegroundcolor;
ctx.stroke ();
}, истинный);
},
post: function postlink (racpe, exantemelement, instanceattributes, controller) {}
};
}
};
var RoundProgress = {
// в компиляции, сначала работайте на DOM, а затем прослушайте $ socpe;
компиляция: компиляционная функция,
Заменить: правда
};
вернуть круглую программу;
}]);
</script>
</body>
</html>
Выше приведено весь код Angularjs в сочетании с примерами рисования холста. Я надеюсь, что все это понравится.