angular的canvas画图例子
发布时间：2020-12-17 09:24:57 所属栏目：安全 来源：网络整理
导读：angular的例子： 运行下面代码 650) this.width=650;" src="http://img.jb51.cc/vcimg/static/loading.png" alt="复制代码" style="margin:0px;float:left;border:none;" src="http://common.cnblogs.com/images/copycode.gif"> !DOCTYPEhtmlhtmlng-app="APP
|
angular的例子： 运行下面代码
<!DOCTYPEhtml><htmlng-app="APP"><head>
<metacharset="UTF-8">
<scriptsrc="http://cdn.bootcss.com/angular.js/1.3.0-beta.12/angular.min.js"></script>
</head><bodyng-controller="MainCtrl">
<!--
界面的这个元素会被替换成canvas元素;-->
<divang:round:progressdata-round-progress-model="roundProgressData"></div>
<br>
<inputtype="number"ng-model="roundProgressData.label"/>
<script>
//引用angular.directives-round-progress这个模块;
varAPP=angular.module('APP',['angular.directives-round-progress']).
controller('MainCtrl',function($scope){
$scope.roundProgressData={//这个是初始化的数据;label:11,percentage:0.11
}//通过监听scope下的这个roundProgressData属性,对界面的canvas进行重绘;$scope.$watch('roundProgressData',function(newValue){
newValue.percentage=newValue.label/100;
},true);
});</script>
<script>
/*!
*AngularJSRoundProgressDirective
*
*Copyright2013StephaneBegaudeau
*ReleasedundertheMITlicense*/angular.module('angular.directives-round-progress',[]).directive('angRoundProgress',[function(){varcompilationFunction=function(templateElement,templateAttributes,transclude){if(templateElement.length===1){//初始化DOM模型,包括初始化canvas等;
varnode=templateElement[0];varwidth=node.getAttribute('data-round-progress-width')||'400';varheight=node.getAttribute('data-round-progress-height')||'400';varcanvas=document.createElement('canvas');
canvas.setAttribute('width',width);
canvas.setAttribute('height',height);
canvas.setAttribute('data-round-progress-model',node.getAttribute('data-round-progress-model'));//相当于demo,替换原来的元素;node.parentNode.replaceChild(canvas,node);//各种配置;
varouterCircleWidth=node.getAttribute('data-round-progress-outer-circle-width')||'20';varinnerCircleWidth=node.getAttribute('data-round-progress-inner-circle-width')||'5';varouterCircleBackgroundColor=node.getAttribute('data-round-progress-outer-circle-background-color')||'#505769';varouterCircleForegroundColor=node.getAttribute('data-round-progress-outer-circle-foreground-color')||'#12eeb9';varinnerCircleColor=node.getAttribute('data-round-progress-inner-circle-color')||'#505769';varlabelColor=node.getAttribute('data-round-progress-label-color')||'#12eeb9';varouterCircleRadius=node.getAttribute('data-round-progress-outer-circle-radius')||'100';varinnerCircleRadius=node.getAttribute('data-round-progress-inner-circle-radius')||'70';varlabelFont=node.getAttribute('data-round-progress-label-font')||'50ptCalibri';return{
pre:functionpreLink(scope,instanceElement,instanceAttributes,controller){varexpression=canvas.getAttribute('data-round-progress-model');//监听模型,O了
//就监听一个属性;scope.$watch(expression,function(newValue,oldValue){//Createthecontentofthecanvas
//包括新建和重绘;
varctx=canvas.getContext('2d');
ctx.clearRect(0,width,height);//The"background"circle
varx=width/2;vary=height/2;
ctx.beginPath();
ctx.arc(x,y,parseInt(outerCircleRadius),Math.PI*2,false);
ctx.lineWidth=parseInt(outerCircleWidth);
ctx.strokeStyle=outerCircleBackgroundColor;
ctx.stroke();//Theinnercirclectx.beginPath();
ctx.arc(x,parseInt(innerCircleRadius),false);
ctx.lineWidth=parseInt(innerCircleWidth);
ctx.strokeStyle=innerCircleColor;
ctx.stroke();//Theinnernumberctx.font=labelFont;
ctx.textAlign='center';
ctx.textBaseline='middle';
ctx.fillStyle=labelColor;
ctx.fillText(newValue.label,x,y);//The"foreground"circle
varstartAngle=-(Math.PI/2);varendAngle=((Math.PI*2)*newValue.percentage)-(Math.PI/2);varanticlockwise=false;
ctx.beginPath();
ctx.arc(x,startAngle,endAngle,anticlockwise);
ctx.lineWidth=parseInt(outerCircleWidth);
ctx.strokeStyle=outerCircleForegroundColor;
ctx.stroke();
},true);
},post:functionpostLink(scope,controller){}
};
}
};varroundProgress={//compile里面先对dom进行操作,再对$socpe进行监听;compile:compilationFunction,replace:true
};returnroundProgress;
}]);</script></body></html>
（编辑：李大同） 【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容! |
