功能说明：

通过鼠标移动，实时绘制出3d旋转的线条。

兼容IE 5 6 7 8 9 10 firefox chrome

效果预览：

请按着鼠标左键，在画板上拖动绘制

 

 

 

实现原理：

　　在上一篇文章《javascript椭圆旋转相册》中，通过图片绕椭圆轨迹移动实现视觉上的3d旋转，之前在某个网站中看到过这种效果，于是我想到其实我们也可以用同样原理，通过把点绕不同椭圆轨迹的运动实现任意线的3d旋转。当按下鼠标左键在画板上绘制时，每个点根据初始位置，确定其椭圆轨迹大小，以相同的速率改变每个点的位置，从而实现整条曲线的3d旋转。

代码分析：

init:function(id,options){
   //初始化函数                 options=options||{}; this.container=document.getElementById(id||'container'); this.centerLeft=this.container.clientWidth/2;//原点的left值 this.centerTop=this.container.clientHeight/2;    //原点的top值 this.maxA=options.maxA||300;//旋转椭圆轨迹的横半轴长                 this.maxB=options.maxB||1;//旋转椭圆轨迹的竖半轴长                 this.ballMargin=options.ballMargin||20;//绘画时小球与小球间间的距离                 this.arr=[];//保存画板上所有小球的数组                 this._id;//计时器Id                 this.containerPos=getContainerPos(this.container);//容器位置                                 bindHandler.call(this); this.run();             }

　

　先看初始化需要哪些值，要使所有点实现椭圆旋转，首先确定椭圆圆心的left和top值，这里椭圆圆心取容器的中点位置。之后确定的是椭圆轨迹的横半轴和竖半轴长，还有绘制时小球与小球之间的距离（ballMargin），距离越大，每个小球之间间隙越宽。另外我们需要获取容器的位置，为获取鼠标在容器内的位置打下基础。

 

var getContainerPos=function(container){
   //获取容器位置         var left=0; var top=0; while(container.offsetParent){
                   left+=container.offsetLeft;                 top+=container.offsetTop;                 container=container.offsetParent;             } return [left,top];         }

 

　　该方法在很多时候都会需要用到，它循环获取有定位的父对象，累计出容器在页面的位置，返回结果。注意offsetParent是有定位的父对象，而不是单纯的父对象，没有的话就为window。该方法作为私有方法存在。

 

var bindHandler = function() {
   //绑定容器的事件处理程序                 var self = this; this.container.onmousedown = function(eve) {
                       add = true;                 } this.container.onmousemove = function(eve) {
                       window.getSelection ? window.getSelection().removeAllRanges() : document.selection.empty(); //取消浏览器图片选择                     if (add === true) {
                           eve = eve || window.event; var pageX = eve.pageX || eve.clientX + document.documentElement.scrollLeft - document.documentElement.clientLeft; var pageY = eve.pageY || eve.clientY + document.documentElement.scrollTop - document.documentElement.clientTop; var mouseX = pageX - self.containerPos[0] - self.centerLeft; var mouseY = -(pageY - self.containerPos[1]) + self.centerTop; if (Math.abs(mouseX - preX) > self.ballMargin || Math.abs(mouseY - preY) > self.ballMargin) {
                               self.addElem(mouseX, mouseY, 'ball/ball2.gif');                             preX = mouseX;                             preY = mouseY;                         }                     }                 } this.container.onmouseup = function(eve) {
                       add = false;                     preX = 0;                     preY = 0;                 }             };

　　之后要实现鼠标拖动绘制，必须为鼠标按下，鼠标移动，鼠标松开都绑定事件处理程序。主要讲讲mousemove里的处理，首先由于在鼠标拖动时浏览器会默认选择图片（使图片上面有一层蓝色），所以我们通过removeAllRanges或empty方法取消选择，使我们的图片显示正常。之后，如果鼠标是按下状态（add句柄为true），则再判断上一次绘制小球的位置，如果位置大于我们之前设定的小球间隔，则绘制小球，并保存本次绘制小球的位置，为下次绘制所用。这样就使小球之间保持适当间隔而不至于太密。

 

addElem:function(initX,initY,src){
   //添加小球                 var newElem=new Image();                 newElem.src=src; var self=this;                 self.container.appendChild(newElem); if(newElem.complete){;                     imgLoad.call(this,newElem,initX,initY)();                 } else{
                       newElem.οnlοad=imgLoad.call(this,newElem,initX,initY);                 }         },

 

　　绘制小球的时候，会调用addElem方法，该方法生成小球对象，添加到文档。注意在IE8及以下版本，由于浏览器的缓存原因，只设置图片的onload的话，会不能执行onload处理程序（参考这里：http://apps.hi.baidu.com/share/detail/21688582），解决方法是通过complete方法先判断是否已再缓存中，如果是立刻执行处理程序，如果不在再绑定onload处理程序。

 

var imgLoad=function(newElem,initX,initY){
   //图片加载完成事件处理程序             var self=this; return function(){
                   initX<0?newElem.angle=Math.PI:newElem.angle=0;//小球被添加的位置，如果小球被添加在负区域，初始旋转角度为pai，否则为0                 newElem._x=newElem._initX=initX;                 newElem._y=newElem._initY=initY;                 newElem._preSin=0;                                                newElem._a=Math.abs(initX);                        //该小球旋转轨迹的a值                 newElem._b=self.maxB;                            //该小球旋转轨迹的b值                     //根据小球初始位置和上一个小球的位置，设置小球的层级                 var preElem=self.arr[self.arr.length-1]; if(preElem){
   var preZin=parseInt(preElem.style.zIndex); var preX=preElem._initX;                     preX>=initX?newElem.style.zIndex=preZin+1:newElem.style.zIndex=preZin-1;                 } else{
                       newElem.style.zIndex=zIn;                 }                 newElem._initWidth=newElem.clientWidth;                 newElem._initHeight=newElem.clientHeight;                 self.arr.push(newElem);             }         };

 

　　现在看看图片加载完成的事件处理程序，每个小球根据其初始位置设置旋转的横轴长和初始角度，横轴长为小球x值的绝对值，竖轴长则全部一样，这里建议竖轴长设置为较小值，使小球运动轨迹的上下浮动不至于过大，保证视觉上的合理性。另外需要重点注意的是，每个小球添加时的zIndex值和该小球初始的x坐标值以及上一次添加的小球的x坐标值有关。如果添加的小球x值比上次小球添加时的x值小，则证明该小球更接近原点，因此视觉上应该更靠前，zIndex比上个小球的zIndex增加1，同理，若比上次小球x值大，则小球的zIndex值减少1.如果是第一个小球，则取默认zIndex（代码中的zIn）。

 

 

run:(function(){
   var updatePos=function(elem,angle,a,b,centerLeft,centerTop){
   //update每次小球位置 参数：小球对象，增加的角度，小球轨迹a值，小球轨迹b值                 elem.angle+=angle;                 (elem.angle>2*Math.PI)&&(elem.angle-=2*Math.PI);//使小球角度介于0-pai之间，方便计算                 elem._x=a*Math.cos(elem.angle);                //根据角度计算x值                 elem._y=b*Math.sin(elem.angle)+elem._initY;//根据角度计算y值                                 elem.style.left=elem._x+centerLeft-elem._initWidth/2+'px';                 elem.style.top=-elem._y+centerTop-elem._initHeight/2+'px'; //与小球上次的sin值比较，如果与本次sin值互为正负，则小球zIndex值取反（这样的目的是每次经过x轴时使小球的层级取反）                 if(Math.sin(elem.angle)*elem._preSin<0){                                            elem.style.zIndex*=-1;                 }                 elem._preSin=Math.sin(elem.angle);    //记录小球每次的sin值，用于下次小球层级计算                         } return function(){
   var self=this; this._id=window.setTimeout(function(){
   for(var i=0,len=self.arr.length;i

 

　　当一张张图片被添加之后，我们就要通过定时器，不断改变小球位置，使它们以不同的椭圆轨迹，以相同的角速度旋转。关于椭圆轨迹的计算问题，上一篇文章《椭圆旋转相册》中描述过，现在再简短描述一次。椭圆的标准方程为：（），由于需要处理的是旋转，所以我们希望把对x，y的处理转换成对旋转角度的处理，因此x,y坐标可以表示为：x=a*cosα ， y=b*sinα 。所以我们每次增加角速度α，就可以映射到xy直角坐标系中，实现旋转。还需要注意的是由于小球每次经过x轴，小球的层级就会相反（意思是原来小球A在B前面，经过x轴后，B在A前面），于是我们需要记录小球上一次的位置的sin值，并和本次的sin值比较，如果相乘小于0，则表示小球正在经过x轴，此时就取反小球的层级zIndex。run方法调用后，每次遍历数组，更新小球位置。

 

var r3d=new rotate3dDraw();

　　最后是调用方法，不传值的话都取默认值。

 

所有源代码：

欢迎转载，请标明出处：