javascript椭圆旋转相册实现代码_图象特效_脚本之家

成效表明: 1.支撑电动和手动三种方式:自动格局下活动旋转展现,手动方式下通过鼠标选择当前图片,或通过提供的接口接收上一张/下一张图纸。 2.可自行加多旋转的缓动情势,暗许形式为:匀速,先快后慢,先慢后快。 3.可自定义旋转轨迹的宽和高。 4.援助IE6 7 8 9 10 firefox chrome等浏览器。 效果预览: 得以达成原理: 依据对图片在椭圆轨迹上的运动,动态改动缩放大小,达成立体的视觉效果。 代码解析: 复制代码 代码如下: init:function{ var defaultOptions={ width:600, //容器宽 height:200, //容器高 imgWidth:100, //图片宽 imgHeight:60, //图片高 maxScale:1.5, //最大缩放倍数 minScale:0.5, //最小缩放倍数 rotateSpeed:10 //运行速度 } options=util.extend(defaultOptions,options卡塔尔(英语:State of Qatar);//参数设置 this.container=util.$; this.width=options.width; this.height=options.height; imgWidth=this.imgWidth=options.imgWidth; imgHeight=this.imgHeight=options.imgHeight; this.maxScale=options.maxScale; this.minScale=options.minScale; scaleMargin=this.maxScale-this.minScale; this.rotateSpeed=options.rotateSpeed; this.imgs=util.$$; this.setContainerSize(this.width,this.height卡塔尔(قطر‎; initImgRC; } 首先是开端化函数,里面有defaultOptions作为暗中认可值,客商也足以流传自定义的值,那个参数值包蕴:容器宽、容器高、图片宽、图片高、最大缩放倍数,最小缩放倍数,旋转速度等。起始化之后,调用setContainerSize函数。 复制代码 代码如下: /* 设置容器尺寸 */ setContainerSize:function{ width=width||this.width; height=height||this.height; this.container.style.position='relative'; this.container.style.width=width+'px'; this.container.style.height=height+'px'; changeRotateWH.call;//退换容器尺寸后改成旋转轨迹 }, setContainerSize函数设置了容器的尺码,容器尺寸的大小决定了旋转轨迹的朗朗上口,举个例子当大家设置容器的高级于宽时,轨迹造成一个圆形。容器尺寸设定后,调用函数changeRotateWH。 复制代码 代码如下: /* 改换椭圆旋转轨迹的横半轴长,竖半轴长*/ var changeRotateWH=function{ var halfScale=(this.maxScale-this.minScale卡塔尔(قطر‎/2;//旋转到中游地点时的图样的缩放大小 rotate={}; rotate.originX=width/2;//旋转原点X轴坐标 rotate.originY=height/2;//旋转原点Y轴坐标 rotate.halfRotateWidth=/2; //旋转横半轴长 rotate.halfRotateHeight=(height-this.imgHeight卡塔尔(英语:State of Qatar)/2; //旋转竖半轴长 } changeRotateWH函数的效果是基于容器的尺寸,设定椭圆旋转轨迹的横半轴长和竖半轴长(程序里面的halfRotateWidth和halfRotateHeight,具体育项目检验算形式为:轨迹高=/2,轨迹宽=,在高级中学数学中,大家学过椭圆的规范方程:(),这里的横半轴和竖半轴分别对应椭圆方程的a和b。由于此处是横轴较长的扁圆形,所以a>b。 复制代码 代码如下: /* 设置图片旋转角和早先地点,大小 */ var initImgRC=function{ var len=imgs.length; con=/len; for{ imgs[i].RC=i*con; imgs[i].style.width=imgWidth+'px'; imgs[i].style.height=imgHeight+'px'; setImgPositionAndSize; } } 设置好椭圆的着力坐标系之后,我们能够遵照图片的数额,把图纸排列成七个椭圆的形象,首先大家能够通过 2π/图片数量 求得图片之间间隔所占的角度,然后把图片平均布满在椭圆轨迹上,当时具备图片就围成了一个椭圆的样子,到那边图片的发轫布满意况就出去了,接下去的天职正是内需使图片沿着那个轨迹动起来。 复制代码 代码如下: /* 设置图片地点和尺寸的匀速变化 *真钱捕鱼 ,/ var setImgPositionAndSize=function{ direction=direction||'CW'; var dir=direction=='CW'?-1:1; img.RC+=; modifyImgAngle; } 该函数依照每张图片位置的不如,设置图片对应的尺码,别的大家还需求传入四个参数:direction,之后经过不停追加图片的RC属性,使图片匀速自动旋转,这个时候自动旋转的旋转方式就ok了。 复制代码 代码如下: /* 改善图片旋转角度 */ var modifyImgAngle=function{ &&; &&; } 在图片旋转早前,大家得以对每张图纸的角度做贰个超小改正,把旋转角限制在0-2π之间,方便后续的乘除。 复制代码 代码如下: /* 设置图片大小和岗位 */ var setImgSize=function{ var left=rotate.originX+rotate.halfRotateWidth*Math.cos-imgWidth/2; var top=rotate.originY-rotate.halfRotateHeight*Math.sin-imgHeight/2; var scale=minScale+scaleMargin*(rotate.halfRotateHeight-rotate.halfRotateHeight*Math.sin/(2*rotate.halfRotateHeight卡塔尔;//图片在该时刻的缩放比 img.style.cssText='position:absolute;left:'+left+'px;' +'top:'+top+'px;' +'width:'+imgWidth*scale+'px;' +'height:'+imgHeight*scale+'px;' +'z-index:'+Math.round; } 如何通过改换旋转角使图片按椭圆的轨道旋转呢?咱们得以再回眸看前边的扁圆形方程:(),由于必要管理的是旋转,所以大家期望把对x,y的拍卖转变到对旋转角度的管理,由此x,y坐标能够代表为:x=a*cosα , y=b*sinα 。图片的X坐标表示为:rotate.originX+rotate.halfRotateWidth*Math.cos-imgWidth/2(rotate.originX为原点X坐标,这里取容器的大旨点),Y轴同理。在此之前说过图片缩放大小的依赖是图片所处的岗位,因而缩放比例scale的值则基于y坐标所占竖轴的长度举办总结。此外,层级关系z-index则基于scale的值举行总括,尺寸大得层级高,展现在日前。 复制代码 代码如下: /* 设置旋转情势*/ setPattern:function{ option=option||{}; this.pattern=patternName; var rotateSpeed=option.rotateSpeed||10; this.path=Math.PI/1000*rotateSpeed; (typeof timeId!='undefined'卡塔尔(英语:State of Qatar)&&window.clearInterval; if{//自动方式可传唱旋转方向:option.rotateDir 旋转速度:option.rotateSpeed var self=this; var direction=option.rotateDir||'CW';//顺时针:CW 逆时针:ACW removeImgsHandler; timeId=window.setInterval{ for(var i=0,len=self.imgs.length;i复制代码 代码如下: var Tween = {//缓动类 暗中认可提供三种缓动方式:linear easein easeout linear: function{ return c*t/d*dir + b; }, easeIn: function{ return c**t*dir + b; }, easeOut: function{ return -c **dir + b; } }; 以上正是缓动格局类,暗中同意的几个形式分别为:匀速 先慢后快 先快后慢。客户能够调用addTweenFunction方法加多本人的缓动情势。 更加多关于缓动的话题能够参照这两篇文章: 复制代码 代码如下: /* 增多缓动格局 */ addTweenFunction:function{ if(typeof func=='Function'||typeof func=='Object'){ Tween[name]=func; } }, 增加缓动形式的参数可感到目的或方式,二回性增添同类型的风华正茂组缓动格局提出使用对象增加。 复制代码 代码如下: /* 为图片绑定点击事件管理程序 */ var bindHandlerForImgs=function{ for(var i=0,len=imgs.length;i复制代码 代码如下: /* 图片选择事件管理程序 */ var imgSelectedHandler=function(imgs,path,tween,onSelected){ return function{ eve=eve||window.event; var dir; var angle; var target=eve.target||eve.srcElement; var RC=target.RC; if(RC>=Math.PI/2&&RC<=Math.PI*3/2){ dir='ACW'; angle=3*Math.PI/2-RC; } else{ dir='CW'; Math.sin>=0?angle=Math.PI/2+RC:angle=RC-3*Math.PI/2; } (typeof timeId!='undefined'卡塔尔&&window.clearInterval; rotateAngle(imgs,angle,dir,tween,onSelected卡塔尔; } } 再看看手动格局下的骨干函数,该函数作为事件管理程序,在点击接受图片后进行。首先判断所点击图片处在椭圆轨迹的侧边依然侧面,要是是右边手,则旋转方向为逆时针,侧面则为顺时针,之后调用 rotateAngle使图片移动相应角度。 复制代码 代码如下: /* 旋转钦赐角度 */ var rotateAngle=function(imgs,angle,dir,tween,onSelected卡塔尔{ var duration=1000; var start提姆e=; dir=='CW'?dir=-1:dir=1; for(var i=0,len=imgs.length;i=duration卡塔尔(قطر‎{ window.clearInterval; timeId=undefined; onSelected=onSelected||util.emptyFunction; onSelected(卡塔尔(英语:State of Qatar);//触发回调函数; } for(var i=0,len=imgs.length;i复制代码 代码如下: /* 采纳上风姿浪漫幅图片 */ prePho:function{ if{ onSelected=onSelected||util.emptyFunction; var tween=tween||Tween['easeOut']; if(typeof timeId!='undefined'){ return; }else{ rotateAngle(this.imgs,con,'ACW',tween,onSelected); } } }, /* 选择下意气风发幅图片 */ nextPho:function{ if{ onSelected=onSelected||util.emptyFunction; var tween=tween||Tween['easeOut']; if(typeof timeId!='undefined'卡塔尔(英语:State of Qatar){ return; }else{ rotateAngle(this.imgs,con,'CW',tween,onSelected卡塔尔(英语:State of Qatar); } } }, 别的在手动方式下,提供选择上一张图片和下一张图片的接口,原理正是使全体图片的旋转角度为图片之间的夹角,上一张图纸和下一张图纸的团团转方向分别安装为逆时针和顺时针。 复制代码 代码如下: var rp=new rotatePhos; rp.setPattern('auto',{rotateSpeed:10}卡塔尔国;//自动格局 旋转速度为10 rp.setPattern;//手动形式 最终是调用方法开端化后必要安装旋转的情势。 说了一大堆不了然说理解了并未有,这里提供全数源码,有意思味的童鞋能够看看哈~ 源代码: html: 复制代码 代码如下:

【四、Canvas开采库封装】

真钱捕鱼 1 真钱捕鱼 2 真钱捕鱼 3 真钱捕鱼 4 真钱捕鱼 5 真钱捕鱼 6 真钱捕鱼 7 真钱捕鱼 8 真钱捕鱼 9 真钱捕鱼 10 真钱捕鱼 11 真钱捕鱼 12

《4.1封装常用的绘图函数》

手动格局: 自动格局:

4.1.1封装八个矩形

JS: 复制代码 代码如下: var util = { $: function { return document.getElementById; }, $$:function{parent=parent||document; return parent.getElementsByTagName;}, add伊芙ntHandler: function { if (elem.add伊芙ntListener卡塔尔 { elem.add伊芙ntListener; } else { elem.attachEvent; } }, removeEventHandler: function { if (elem.remove伊芙ntListener卡塔尔 { elem.removeEventListener; } else { elem.detach伊夫nt; } }, getComputedStyle: function { if return elem.currentStyle; else { return document.defaultView.getComputedStyle; } }, getElementsByClassName: function(className, parentElement卡塔尔 { var elems = (parentElement || document.body卡塔尔(قطر‎.getElementsByTagName; var result = []; for (i = 0; j = elems[i]; i++) { if ((" " + j.className

//思忖:我们用到的矩形须要什么样绘制的东西呢?

  • " ").indexOf(" " + className + " ") != -1) { result.push; } } return result; }, extend: function { for { destination[name] = source[name]; } return destination; }, emptyFunction:function(卡塔尔(英语:State of Qatar){} }; var rotatePhos={ var rp=function{ this.init;//开头化 } rp.prototype={ var rotate; var imgWidth; var imgHeight; var scaleMargin; var con; var handler; var minScale; var Tween = {//缓动类 私下认可提供二种缓动情势:linear easein easeout linear: function{ return c*t/d*dir + b; }, easeIn: function{ return c**t*dir + b; }, easeOut: function{ return -c **dir + b; } }; /* 退换椭圆旋转轨迹的横半轴长,竖半轴长*/ var changeRotateWH=function{ var halfScale=(this.maxScale-this.minScale卡塔尔(قطر‎/2;//旋转到中游地点时的图样的缩放大小 rotate={}; rotate.originX=width/2;//旋转原点X轴坐标 rotate.originY=height/2;//旋转原点Y轴坐标 rotate.halfRotateWidth=/2; //旋转横半轴长 rotate.halfRotateHeight=(height-this.imgHeight卡塔尔/2; //旋转竖半轴长 } /* 设置图片旋转角和起初地方,大小 */ var initImgRC=function{ var len=imgs.length; con=/len; for{ imgs[i].RC=i*con; imgs[i].style.width=imgWidth+'px'; imgs[i].style.height=imgHeight+'px'; setImgPositionAndSize; } } /* 设置图片大小和职责 */ var setImgSize=function{ var left=rotate.originX+rotate.halfRotateWidth*Math.cos-imgWidth/2; var top=rotate.originY-rotate.halfRotateHeight*Math.sin-imgHeight/2; var scale=minScale+scaleMargin*(rotate.halfRotateHeight-rotate.halfRotateHeight*Math.sin/(2*rotate.halfRotateHeight卡塔尔国;//图片在该时刻的缩放比 img.style.cssText='position:absolute;left:'+left+'px;' +'top:'+top+'px;' +'width:'+imgWidth*scale+'px;' +'height:'+imgHeight*scale+'px;' +'z-index:'+Math.round; } /* 设置图片地方和分寸的匀速变化 */ var setImgPositionAndSize=function{ direction=direction||'CW'; var dir=direction=='CW'?-1:1; img.RC+=; modifyImgAngle; } /* 纠正图片旋转角度 */ var modifyImgAngle=function{ &&; &&; } /* 设置图片的新岗位 */ var setPos=function{ img.RC=path; modifyImgAngle; var left=rotate.originX+rotate.halfRotateWidth*Math.cos-imgWidth/2; var top=rotate.originY-rotate.halfRotateHeight*Math.sin-imgHeight/2; var scale=0.5+scaleMargin*(rotate.halfRotateHeight-rotate.halfRotateHeight*Math.sin/(2*rotate.halfRotateHeight卡塔尔(قطر‎;//图片在该时刻的缩放比 img.style.cssText='position:absolute;left:'+left+'px;' +'top:'+top+'px;' +'width:'+imgWidth*scale+'px;' +'height:'+imgHeight*scale+'px;' +'z-index:'+Math.round; } /* 旋转钦命角度 */ var rotateAngle=function(imgs,angle,dir,tween,onSelected卡塔尔{ var duration=1000; var startTime=; dir=='CW'?dir=-1:dir=1; for(var i=0,len=imgs.length;i=duration卡塔尔{ window.clearInterval; timeId=undefined; onSelected=onSelected||util.emptyFunction; onSelected(卡塔尔(قطر‎;//触发回调函数; } for(var i=0,len=imgs.length;i=Math.PI/2&&RC<=Math.PI*3/2){ dir='ACW'; angle=3*Math.PI/2-RC; } else{ dir='CW'; Math.sin>=0?angle=Math.PI/2+RC:angle=RC-3*Math.PI/2; } (typeof timeId!='undefined')&&window.clearInterval; rotateAngle(imgs,angle,dir,tween,onSelected); } } /* 为图片绑定点击事件管理程序 */ var bindHandlerForImgs=function{ for(var i=0,len=imgs.length;i完整的落到实处代码:复制代码 代码如下:

1、矩形的x、y坐标

真钱捕鱼 13 真钱捕鱼 14 真钱捕鱼 15 真钱捕鱼 16 真钱捕鱼 17 真钱捕鱼 18 真钱捕鱼 19 真钱捕鱼 20 真钱捕鱼 21 真钱捕鱼 22 真钱捕鱼 23 真钱捕鱼 24

2、矩形的宽高

手动情势: 自动形式:

3、矩形的边框的线条样式、线条宽度

4、矩形填充的体制

5、矩形的转动角度

6、矩形的降低放大

//下边是把上边装有的效果与利益扩充打包的代码:

function XMGRect( option 卡塔尔(قطر‎ {//矩形布局函数

this._init(option);

}

XMGRect.prototype = {  //矩形的原型对象

_init: function( option 卡塔尔(英语:State of Qatar) {  //开首化方法

option = option || {};

this.x = option.x === 0 ? 0 : option.x || 100;

this.y = option.y === 0 ? 0 : option.y || 100;

this.w = option.w || 100;

this.h = option.h || 100;

this.angle = option.angle === 0 ? 0 : option.angle || 0;

this.fillStyle = option.fillStyle || 'silver';

this.strokeStyle = option.strokeStyle || 'red';

this.strokeWidth = option.strokeWidth || 4;

this.scaleX = option.scaleX || 1;

this.scaleY = option.Y || 1;

},

render: function( ctx 卡塔尔国 {//把矩形渲染到canvas中

ctx.save();

ctx.translate( this.x, this.y 卡塔尔(قطر‎;//位移画布

ctx.rotate( this.angle * Math.PI / 180 卡塔尔(英语:State of Qatar);//旋转角度

ctx.scale( this.scaleX, this.scaleY );//缩放

ctx.fillStyle = this.fillStyle;

ctx.fillRect( 0, 0, this.w, this.h 卡塔尔; //填充矩形

ctx.lineWidth = this.strokeWidth;     //线宽

ctx.strokeStyle = this.strokeStyle;   //填充样式

ctx.strokeRect( 0,0,this.w,this.h 卡塔尔(英语:State of Qatar);  //描边样式

ctx.restore();

},

constructor: XMGRect

};

4.1.2功课:尝试着包裹四个圆形?

function XMGCircle( option ) {

this._init( option );

}

XMGCircle.prototype = {

_init: function( option ) {

option = option || {};

this.x = option.x === 0 ? 0 : option.x || 100;

this.y = option.y === 0 ? 0 : option.y || 100;

this.w = option.w || 100;

this.h = option.h || 100;

this.angle = option.angle === 0 ? 0 : option.angle || 0;

this.fillStyle = option.fillStyle || 'silver';

this.strokeStyle = option.strokeStyle || 'red';

this.strokeWidth = option.strokeWidth || 4;

this.scaleX = option.scaleX || 1;

this.scaleY = option.Y || 1;

this.opactity = option.opactity || 1;

this.counterclockwise =

option.counterclockwise === true ? true : option.counterclockwise || false;

this.startAngle = option.startAngle == 0 ? 0 : option.startAngle || 0;

this.endAngle = option.endAngle == 0 ? 0 : option.endAngle || 0;

this.startAngle = this.startAngle * Math.PI/180;

this.endAngle = this.endAngle * Math.PI / 180;

this.r = option.r || 100;

},

render: function( ctx ) {

ctx.save();

ctx.translate( this.x, this.y);

ctx.scale( this.scaleX, this.scaleY );

ctx.rotate( this.agnle * Math.PI / 180 );

ctx.globalAlpha = this.opacity;

ctx.fillStyle = this.fillStyle;

ctx.strokeStyle = this.strokeStyle;

ctx.moveTo(0, 0);

ctx.arc( 0, 0, this.r, this.startAngle, this.endAngle, this.counterclockwise);

ctx.fill();

ctx.stroke();

ctx.restore();

},

constructor: XMGCircle

};

《4.2 第三方库》

百度的echart

http://echarts.baidu.com/echarts2/doc/example.html

国产的egret引擎

正如火的3d引擎:treejs

FABRIC.JS   oCanvas    RGraph

【Konva】

官网:

http://konvajs.github.io/

特点:

*Mini、使用方便、相符移动端和pc端

*辅助增加的事件管理操作

*扶助相通JQuery的操作方式

*开源,能够随意退换

*社区更新相比活跃,github托管源码

*性子也不错

【五、Konva的采纳高效上手】

《5.1Konva的欧洲经济共同体理念》

舞台:

整个视图看做是一个舞台stage

舞新北能够绘制很三个层layer

layer上面能够有成都百货上千的group

group上边能够有 矩形、图片、别的形状等

Stage

|

+------+------+

|             |

Layer         Layer

|             |

+-----+-----+     Shape

|           |

Group       Group

|           |

+       +---+---+

|       |       |

Shape   Group    Shape

|

+

|

Shape

《5.2 Konva矩形案例》

5.2.1 创制叁个矩形: Konva.Rect(option卡塔尔(قطر‎;

//Konva使用的基本案例

//第一步:创造舞台

var stage = new Konva.Stage({

container: 'container',     //要求贮存舞台的Dom容器

width: window.innerWidth,   //设置全屏

height: window.innerHeight

});

//第二步:创建层

var layer = new Konva.Layer(卡塔尔国;  //创制七个层

stage.add(layer);//把层加多到舞台

//第三步: 创制矩形

var rect = new Konva.Rect({     //创制二个矩形

x: 100,                     //矩形的x坐标,相对其父容器的坐标

y: 100,

width: 100,                 //矩形的宽窄

height: 100,                //矩形中度

fill: 'gold',               //矩形填充的颜料

stroke: 'navy',             //矩形描边的颜料

strokeWidth: 4,             //填充宽度

opactity: .2,               //矩形的光滑度

scale: 1.2,                 //矩形的缩放1:原本大小

rotation: 30,               //旋转的角度,是deg不是弧度。

cornerRadius: 10,           //圆角的深浅(像素)

id: 'rect1',                //id属性,类似dom的id属性

name: 'rect',

draggable: true             //是或不是足以开展拖拽

});

//成立二个组

var group = new Konva.Group({

x: 40,

y: 40,

});

group.add( rect 卡塔尔;  //把矩形增添到组中

//第四步: 把形状放到层中

layer.add( group 卡塔尔; //把组加多到层中

layer.draw(卡塔尔国;       //绘制层到舞台上

《5.3 Konva的动漫片系统》

5.3.1 tween对象(重点)

tween,Hungary语意思:两个之间, 英[twiːn]美[twin]

tween是调整Konva对象实行动漫的大旨目的。

tween能够调控全部数字类型的习性实行动漫管理,举例:x, y, rotation, width, height, radius, strokeWidth, opacity, scaleX等

//案例:

var tween = new Konva.Tween({

node: rect,             //要开展动漫的Konva对象

x: 300,                 //要拓宽动漫的习性

opacity: .8,

duration: 1,            //持续时间

easing: Konva.Easings.EaseIn, //动漫的卡通效果

yoyo: true,             //是不是开展巡回播放的设置

返回列表