面向对象封装--行星旋转案例canvas-konva.js

来源：互联网发布：数据集成编辑：程序博客网时间：2024/05/17 08:52

如图所示案例：

具体讲解：在stage上面绘制一个背景层和一个运动层，背景层保持不变，运动层会随着Animation设置的而运动，而且当鼠标经过运动层的圆圈时，运动速度会明显变慢，鼠标移开后，立马恢复原来运动速度。CSS3和HTML5放入一组中，该所属组顺时针旋转，JS所属组逆时针旋转；字体随着运动，自身反向旋转便能使其永远朝上显示。

html代码：

<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no"><title>webitcast案例</title><style>body {padding: 0;margin: 0;background-color: #f0f0f0;overflow: hidden;}</style><script src="bower_components/konva/konva.min.js"></script><script type="text/javascript" src="js/zxjwebitcast.js"></script></head><body><div id="container"></div><script type="text/javascript">var stage=new Konva.Stage({//创建舞台container:'container',width:window.innerWidth,height:window.innerHeight});//背景层var bgLayer=new Konva.Layer();stage.add(bgLayer);//开始创建圆形//中心点坐标var centX=stage.width()/2;var centY=stage.height()/2;//圆形的半径var innerRadius=126;var outerRadius=220;//虚线圆环var innerCircle=new Konva.Circle({x:centX,y:centY,radius:innerRadius,stroke:'#ccc',strokeWidth:4,dash: [10,4],//虚线});var outerCircle=new Konva.Circle({x:centX,y:centY,radius:outerRadius,stroke:'#ccc',strokeWidth:4,dash: [10,4],});bgLayer.add(innerCircle);bgLayer.add(outerCircle);//中心蓝色的圆圈var cenCircleText=new CircleText({x:centX,y:centY,innerRadius: 70,//内环的半径outerRadius: 88,innerStyle:'#525A82',outerStyle:'#E1E1E1',text:'web全栈',});cenCircleText.addToGroupOrLayer(bgLayer);bgLayer.draw();//创建动画层，这一层会运动var animateLayer=new Konva.Layer();stage.add(animateLayer);//第二层添加黄色和pink色的圆圈//2层的动画var L2Group=new Konva.Group({x:centX,//这样设置后，L2Group的中心坐标为CentX,CentY,因此CSS3的X坐标为innerRadius*……y:centY,});var L2_CircleText_CSS3=new CircleText({x:innerRadius*Math.cos(-60*Math.PI/180),y:innerRadius*Math.sin(-60*Math.PI/180),innerRadius: 30,//内环的半径outerRadius: 40,innerStyle:'orange',outerStyle:'#E1E1E1',text:'CSS3',});L2_CircleText_CSS3.addToGroupOrLayer(L2Group);var L2_CircleText_HTML5=new CircleText({x:innerRadius*Math.cos(180*Math.PI/180),y:innerRadius*Math.sin(180*Math.PI/180),innerRadius: 30,//内环的半径outerRadius: 40,innerStyle:'pink',outerStyle:'#E1E1E1',text:'HTML5',});L2_CircleText_HTML5.addToGroupOrLayer(L2Group);animateLayer.add(L2Group);//第三层的圆圈组装到一个组中var L3Group=new Konva.Group({x:centX,y:centY,});//第3层添加blue色的圆圈var L3_CircleText_JS=new CircleText({x:outerRadius*Math.cos(60*Math.PI/180),y:outerRadius*Math.sin(60*Math.PI/180),innerRadius: 40,//内环的半径outerRadius: 50,innerStyle:'#91BFF8',outerStyle:'#E1E1E1',text:'JS',});L3_CircleText_JS.addToGroupOrLayer(L3Group);//第3层添加blue色的圆圈var L3_CircleText_JQuery=new CircleText({x:outerRadius*Math.cos(240*Math.PI/180),y:outerRadius*Math.sin(240*Math.PI/180),innerRadius: 40,//内环的半径outerRadius: 50,innerStyle:'#DD7FB2',outerStyle:'#E1E1E1',text:'JQuery',});L3_CircleText_JQuery.addToGroupOrLayer(L3Group);animateLayer.add(L3Group);animateLayer.draw();//Konva的帧动画系统var rotateAnglePerSecond=60;//每秒钟旋转的角度var animate=new Konva.Animation(function(frame){//相当于setInterval;每隔一段时间执行该方法；此方法更加智能//计算当前帧需要旋转的角度，var rotateAngle=rotateAnglePerSecond*frame.timeDiff/1000;//timeDiff：两次执行的时间差；是动态变化的，根据浏览器性能变化旋转速度，上一帧和当前帧的时间差// var rotateAngle=2;    //旋转的角度;每一帧旋转的角度    L2Group.rotate(rotateAngle);//    //让2层上面的所有圆自己自我反向旋转，以便字体永远正向朝上    L2Group.getChildren().each(function(item,index){//获得所有子元素    item.rotate(-rotateAngle);    });    L3Group.rotate(-rotateAngle);    L3Group.getChildren().each(function(item,index){    item.rotate(rotateAngle);    });},animateLayer);//此处表示animate.start();//Konva事件系统animateLayer.on('mouseover',function(){rotateAnglePerSecond=10;});animateLayer.on('mouseout',function(){rotateAnglePerSecond=60;})</script></body></html>

封装的JS代码zxjwebitcast.js

function CircleText(option){this._init(option);}CircleText.prototype={_init:function(option){this.x=option.x||0;this.y=option.y||0;this.innerRadius=option.innerRadius||0;//内圆半径this.outerRadius=option.outerRadius||0;//圆环半径this.innerStyle=option.innerStyle||'red';//内部圆颜色this.outerStyle=option.outerStyle||'blue'//圆环颜色this.text=option.text||'canvas';//填充文字                //让内圆，圆环，字体在一个组中，便于管理this.group=new Konva.Group({x:this.x,y:this.y,});//初始化一个内圆var innerCircle=new Konva.Circle({x:0,y:0,radius:this.innerRadius,fill:this.innerStyle,opacity:.7});this.group.add(innerCircle);//初始化一个圆环var outerRing=new Konva.Ring({x:0,y:0,innerRadius:this.innerRadius,outerRadius:this.outerRadius,fill:this.outerStyle,opacity:.4});this.group.add(outerRing);//初始化一个文字var text=new Konva.Text({x:0-this.outerRadius,y:-7,width:this.outerRadius*2,fill:'#fff',text:this.text,align:'center',fontSize:17,fontFamily: '微软雅黑',fontStyle:'bold'});this.group.add(text);},addToGroupOrLayer:function(arg){arg.add(this.group);}}

0 0