ここでは、AngularjsとCanvasで描画の例を共有します。最初のように、その効果は非常に良いです。
コードコピーは次のとおりです。
<!doctype html>
<html ng-app = "app">
<head>
<メタcharset = "utf-8">
<スクリプト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>
<入力型= "number" ng-model = "roundprogressdata.label"/>
<スクリプト>
// Angular.Directives-Round-Progressモジュールを引用します。
var app = angular.module( 'app'、['angular.directives-round-progress'])。
コントローラー( 'mainctrl'、function($ scope){
$ scope.roundprogressdata = {
//これは初期化されたデータです。
ラベル:11、
パーセンテージ:0.11
}
//スコープの下でRoundProgressDataプロパティを聞くことにより、インターフェイスキャンバスを再描画します。
$ scope。$ watch( 'roundprogressdata'、function(newValue){
newValue.Percentage = newValue.Label / 100;
}、 真実);
});
</script>
<スクリプト>
/*!
* AngularJSラウンド進行指令
*
* Copyright 2013 Stephane Begaudeau
* MITライセンスの下でリリースされました
*/
angular.module( 'angular.directives-round-progress'、[])。ディレクティブ( 'angoundprogress'、[function(){{
var compilationfunction = function(templateElement、templateattributes、translate){
if(templateElement.length === 1){
//キャンバスなどを初期化するなど、DOMモデルを初期化します。
var node = templateElement [0];
var width = node.getAttribute( 'round-progress-width')|| 「400」;
var height = node.getAttribute( 'round-progress-height')|| 「400」;
var canvas = document.createelement( 'canvas');
canvas.setattribute( 'width'、width);
canvas.setattribute( 'height'、height);
canvas.setattribute( 'round-progress-model'、node.getattribute( 'round-progress-model'));
//デモに相当し、元の要素を置き換えます。
node.parentnode.replacechild(canvas、node);
//さまざまな構成。
var outourcirclewidth = node.getAttribute( 'Data-Round-Progress-Outer-Circle-Width')|| '20';
var innercirclewidth = node.getAttribute( 'データラウンドプログレス-inner-circle-width')|| '5';
var outercirclebackgroundcolor = node.getAttribute( 'Data-Round-Progress-Outer-Circle-Background-Color')|| '#505769';
var outourcircleforegroundcolor = node.getattribute( 'data-round-progress-outer-circle-foreground-color')|| '#12eeb9';
var innercirclecolor = node.getAttribute( 'データラウンドプログレス-inner-color')|| '#505769';
var labelcolor = node.getAttribute( 'round-progress-label-color')|| '#12eeb9';
var outourcircleradius = node.getAttribute( 'Data-Round-Progress-Outer-Circle-Radius')|| 「100」;
var innercircleradius = node.getAttribute( 'Data-Round-Progress-Inner-Circle-Radius')|| '70';
var Labelfont = node.getAttribute( 'round-progress-label-font')|| '50pt calibri';
戻る {
pre:function prelink(scope、instancelement、instanceattributes、controller){
var expression = canvas.getAttribute( 'Data-Round-Progress-Model');
//監視モデル、o
//属性を聞くだけです。
scope。$ watch(expression、function(newValue、oldValue){
//キャンバスのコンテンツを作成します
//新しい作成と再描画を含む。
var ctx = canvas.getContext( '2d');
ctx.ClearRect(0、0、幅、高さ);
//「背景」円
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();
//内側の円
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)、startangle、endangle、anticlockwise);
ctx.linewidth = parseint(outercirclewidth);
ctx.strokestyle = outercircleforegroundcolor;
ctx.stroke();
}、 真実);
}、
投稿:function postlink(scope、instancelement、instanceattributes、controller){}
};
}
};
var roundprogress = {
//コンパイルで、最初にDOMで操作してから、$ socpeで聞きます。
コンパイル:compilationfunction、
交換:true
};
rundprogressを返します。
}]);
</script>
</body>
</html>
上記は、AngularJのコード全体とCanvasの描画例です。誰もがそれを好きになることを願っています。