هنا سوف أشارككم مثالًا على الرسم باستخدام AngularJs و Canvas. التأثير جيد جدًا ، مثله أولاً.
نسخة الكود كما يلي:
<! 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">
<!-
سيتم استبدال عنصر الواجهة هذا بعنصر قماش ؛
->
<Div Ang: Round: Progress-Round-Round-Progress-Model = "RoundProgressData"> </viv>
<br>
<type type = "number" ng-model = "RoundProgressData.label"/>
<script>
// Cite the Angular.Directives-Round-Progress Module ؛
var app = Angular.Module ('app' ، ['Angular.Directives-Round-Progress']).
وحدة التحكم ('mainctrl' ، وظيفة (نطاق $) {
$ SCOPE.ROUNDPROGERGDATA = {
// هذه هي البيانات المهيئة ؛
التسمية: 11 ،
النسبة المئوية: 0.11
}
// إعادة سحب قماش الواجهة من خلال الاستماع إلى خاصية RoundProgressData تحت النطاق ؛
$ scope. $ watch ('RoundProgressData' ، function (newValue) {
newvalue.percentage = newValue.label / 100 ؛
}، حقيقي)؛
}) ؛
</script>
<script>
/*!
* AngularJS Round Progress Directive
*
* حقوق الطبع والنشر 2013 ستيفان بيغودو
* تم إصداره تحت رخصة معهد ماساتشوستس للتكنولوجيا
*/
Angular.Module ('Angular.Directives-Round-Progress' ، []). التوجيه ('angroundprogress' ، [function () {
var compilationFunction = function (templateElement ، templateattributes ، Translate) {
if (templateElement.length === 1) {
// تهيئة نموذج DOM ، بما في ذلك تهيئة القماش ، وما إلى ذلك ؛
var node = templateElement [0] ؛
var width = node.getAttribute ('Data-Round-Progress-Width') || "400" ؛
var height = node.getattribute ('Data-Round-Progress-Leight') || "400" ؛
var canvas = document.createElement ('canvas') ؛
canvas.setattribute ("العرض" ، العرض) ؛
canvas.setAttribute ('الارتفاع' ، الارتفاع) ؛
canvas.setattribute ('Data-Round-Progress-Model' ، node.getAttribute ('Data-Round-Progress-Model')) ؛
// ما يعادل العرض التوضيحي ، واستبدال العنصر الأصلي ؛
node.parentnode.replacechild (canvas ، node) ؛
// مجموعة متنوعة من التكوينات ؛
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 innercirclecolor = node.getAttribute ('Data-Round-Progress-Inner-Circle-Color') || '#505769' ؛
var labelcolor = node.getattribute ('data-round-progress-label-color') || '#12eeb9' ؛
var outercircleradius = node.getAttribute ('Data-Round-Progress-Outer-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' ؛
يعود {
Pre: Function Prelink (Scope ، extaryelement ، InstanceAttributes ، Controller) {
var expression = canvas.getAttribute ('Data-Round-Progress-Model') ؛
// نموذج المراقبة ، س
// فقط استمع للحصول على سمة ؛
النطاق. ساعة $ (التعبير ، الوظيفة (newValue ، Oldvalue) {
// إنشاء محتوى القماش
// بما في ذلك إنشاء جديد وإعادة رسم ؛
var ctx = canvas.getContext ('2d') ؛
ctx.clearrect (0 ، 0 ، العرض ، الارتفاع) ؛
// دائرة "الخلفية"
var x = width / 2 ؛
var y = الارتفاع / 2 ؛
ctx.beginpath () ؛
ctx.arc (x ، y ، parseint (OuterCircleradius) ، 0 ، math.pi * 2 ، false) ؛
ctx.linewidth = parseint (OuterCircleWidth) ؛
ctx.strokestyle = OuterCircleBackgroundColor ؛
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 anticlockwise = false ؛
ctx.beginpath () ؛
ctx.arc (x ، y ، parseint (OuterCircleradius) ، startnangle ، indangle ، anticlockwise) ؛
ctx.linewidth = parseint (OuterCircleWidth) ؛
ctx.strokestyle = OuterCircleForeGroundColor ؛
ctx.stroke () ؛
}، حقيقي)؛
} ،
POST: وظيفة postlink (النطاق ، مثيل ، instanceattributes ، وحدة التحكم) {}
} ؛
}
} ؛
var roundprogress = {
// في التجميع ، تعمل على DOM أولاً ، ثم استمع إلى $ socpe ؛
ترجمة: compilationFunction ،
استبدال: صحيح
} ؛
إرجاع RoundProgress ؛
}]) ؛
</script>
</body>
</html>
ما سبق هو رمز AngularJs بالكامل مع أمثلة رسم قماش. أتمنى أن يحبها الجميع.