ที่นี่ฉันจะแบ่งปันตัวอย่างการวาดด้วย 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">
-
องค์ประกอบของอินเทอร์เฟซนี้จะถูกแทนที่ด้วยองค์ประกอบ Canvas;
-
<Div Ang: Round: ความคืบหน้าของข้อมูล-ความคืบหน้า-โมเดล = "RoundProgressData"> </div>
<br>
<อินพุต type = "number" ng-model = "RoundProgressData.label"/>>>>>
<script>
// อ้างถึงโมดูล Angular.directives-Round-Progress;
var app = angular.module ('app', ['angular.directives-round-progress'])
คอนโทรลเลอร์ ('mainctrl', ฟังก์ชั่น ($ scope) {
$ scope.roundprogressData = {
// นี่คือข้อมูลที่เริ่มต้น;
ฉลาก: 11,
เปอร์เซ็นต์: 0.11
-
// การวาดภาพผืนผ้าใบอินเทอร์เฟซอีกครั้งโดยการฟังคุณสมบัติ RoundProgressData ภายใต้ขอบเขต;
$ SCOPE. $ WATCH ('RoundProgressData', ฟังก์ชั่น (newValue) {
newValue.percentage = newValue.label / 100;
}, จริง);
-
</script>
<script>
-
* คำสั่งความคืบหน้ารอบ Angularjs
-
* ลิขสิทธิ์ 2013 Stephane Begaudeau
* ปล่อยภายใต้ใบอนุญาต MIT
-
Angular.module ('Angular.directives-Round-Progress', []). Directive ('AngroundProgress', [function () {
var compilationFunction = function (memplatelement, templateattributes, แปล) {
if (templateElement.length === 1) {
// เริ่มต้นโมเดล DOM รวมถึงการเริ่มต้นผ้าใบ ฯลฯ ;
var node = templatelement [0];
var width = node.getAttribute ('data-round-progress-ความกว้าง') || '400';
var height = node.getAttribute ('data-round-progress-height') || '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-color-color') || '#505769';
var labelcolor = node.getAttribute ('data-round-progress-label-color') || '#12EEB9';
var outercircleradius = node.getAttribute ('data-progress-outer-circle-radius') || '100';
var innercircleradius = node.getAttribute ('ข้อมูลรอบพัฒนา-วงกลม-วงกลม-วงกลม') || '70';
var labelfont = node.getAttribute ('data-round-progress-label-font') || '50pt Calibri';
กลับ {
ก่อน: ฟังก์ชั่น prelink (ขอบเขต, อินสแตนซ์, instanceattributes, คอนโทรลเลอร์) {
var expression = canvas.getAttribute ('data-round-progress-model');
// รูปแบบการตรวจสอบ o
// เพียงแค่ฟังแอตทริบิวต์;
ขอบเขต. $ 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 (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 = innercirclecleclecleclor;
ctx.stroke ();
// หมายเลขภายใน
ctx.font = labelfont;
ctx.textalign = 'center';
ctx.textbaseline = 'กลาง';
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), starmangle, endangle, anticlockwise);
ctx.lineWidth = parseInt (OuterCircleWidth);
ctx.strokestyle = outercircleforegroundcolor;
ctx.stroke ();
}, จริง);
-
โพสต์: ฟังก์ชั่น postlink (ขอบเขต, อินสแตนซ์, instanceattributes, คอนโทรลเลอร์) {}
-
-
-
var roundProgress = {
// ในการคอมไพล์ทำงานบน DOM ก่อนจากนั้นฟัง $ SOCPE;
คอมไพล์: CompilityFunction,
แทนที่: จริง
-
กลับมาร่ำรวย;
-
</script>
</body>
</html>
ด้านบนเป็นรหัสทั้งหมดของ AngularJs รวมกับตัวอย่างการวาดภาพผ้าใบ ฉันหวังว่าทุกคนจะชอบมัน