AngularJS, combined with the canvas drawing example, angularjscanvas
I would like to share with you an example of angularJS drawing with canvas, which has a very good effect.
Copy codeThe Code is as follows:
<! 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">
<! --
This element of the interface will be replaced with the canvas element;
-->
<Div ang: round: progress data-round-progress-model = "roundProgressData"> </div>
<Br>
<Input type = "number" ng-model = "roundProgressData. label"/>
<Script>
// Reference angular. directives-round-progress;
Var APP = angular. module ('app', ['angular. ctictives-round-SS ']).
Controller ('mainctrl ', function ($ scope ){
$ Scope. roundProgressData = {
// This is the initial data;
Label: 11,
Percentage: 0.11
}
// Re-paint the canvas of the interface by listening to the roundProgressData attribute under the scope;
$ Scope. $ watch ('roundprogressdata', function (newValue ){
NewValue. percentage = newValue. labels/100;
}, True );
});
</Script>
<Script>
/*!
* AngularJS Round Progress direve ve
*
* Copyright 2013 steane Begaudeau
* Released under the MIT license
*/
Angular. module ('angular. ctictives-round-SS ', []). direve ve ('angroundprogress', [function (){
Var compilationFunction = function (templateElement, templateAttributes, transclude ){
If (templateElement. length = 1 ){
// Initialize the DOM model, including canvas initialization;
Var node = templateElement [0];
Var width = node. getAttribute ('data-round-SS-width') | '123 ';
Var height = node. getAttribute ('data-round-SS-height') | '123 ';
Var canvas = document. createElement ('canvas ');
Canvas. setAttribute ('width', width );
Canvas. setAttribute ('height', height );
Canvas. setAttribute ('data-round-SS-model', node. getAttribute ('data-round-progress-model '));
// Equivalent to demo, replacing the original element;
Node. parentNode. replaceChild (canvas, node );
// Various configurations;
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 ') | '123 ';
Var innerCircleRadius = node. getAttribute ('data-round-progress-inner-circle-radius ') | '70 ';
Var labelFont = node. getAttribute ('data-round-progress-label-font') | '50pt Calibri ';
Return {
Pre: function preLink (scope, instanceElement, instanceAttributes, controller ){
Var expression = canvas. getAttribute ('data-round-progress-model ');
// Listening model, O
// Listen to an attribute;
Scope. $ watch (expression, function (newValue, oldValue ){
// Create the content of the canvas
// Including creating and re-painting;
Var ctx = canvas. getContext ('2d ');
Ctx. clearRect (0, 0, width, height );
// The "background" circle
Var x = width/2;
Var y = height/2;
Ctx. beginPath ();
Ctx. arc (x, y, parseInt (outerCircleRadius), 0, Math. PI * 2, false );
Ctx. lineWidth = parseInt (outerCircleWidth );
Ctx. strokeStyle = outerCircleBackgroundColor;
Ctx. stroke ();
// The inner circle
Ctx. beginPath ();
Ctx. arc (x, y, parseInt (innerCircleRadius), 0, Math. PI * 2, false );
Ctx. lineWidth = parseInt (innerCircleWidth );
Ctx. strokeStyle = innerCircleColor;
Ctx. stroke ();
// The inner number
Ctx. font = labelFont;
Ctx. textAlign = 'center ';
Ctx. textBaseline = 'middle ';
Ctx. fillStyle = labelColor;
Ctx. fillText (newValue. label, x, y );
// The "foreground" circle
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), startAngle, endAngle, anticlockwise );
Ctx. lineWidth = parseInt (outerCircleWidth );
Ctx. strokeStyle = outerCircleForegroundColor;
Ctx. stroke ();
}, True );
},
Post: function postLink (scope, instanceElement, instanceAttributes, controller ){}
};
}
};
Var roundProgress = {
// Perform dom operations in compile and then listen on $ socpe;
Compile: compilationFunction,
Replace: true
};
Return roundProgress;
}]);
</Script>
</Body>
</Html>
The above is all the code of the angularJS drawing example combined with canvas. I hope you will like it.