JavaScript 图片3D展示空间(3DRoom)-阿里云开发者社区

开发者社区> 航空母舰> 正文

JavaScript 图片3D展示空间(3DRoom)

简介:
+关注继续查看

一般的平面效果,通过改变水平和垂直坐标就能实现,再加上深度,就能在视觉上的产生3D(三维)的效果。 
程序就是模拟这样一个三维空间,里面的图片会根据三维坐标显示在这个空间。 
很久以前就看过一个3DRoom 效果,是用复杂的计算实现的。 
在上一篇图片变换 研究过css3的transform之后,就想到一个更简单的方法来实现。 





在线效果预览 

程序说明 

【实现原理】 

3D效果的关键,是深度的实现。 
把3D容器看成一个由多个不同深度的层组成的空间,这些层的尺寸默认跟容器一样。 
层里面放了该深度的图片,并且各个层会根据深度的变化做缩放变换,从视觉上产生深度差。 
缩放变换的比例按照最近点为1,最远点为0,逐渐变化。 
关键的地方是层里面图片的尺寸和坐标必须跟着层同时变换,这个通过css3的transform很简单就能实现。 
这样图片只需设置好尺寸再相对层定好位就行了,避免了随深度变化要不断调整图片尺寸和定位的麻烦。 


【图片加载】 

在程序初始化之后,就可以调用add方法来添加图片。 
add方法有两个参数:图片地址和参数对象,还会返回一个图片操作对象。 
操作对象包含以下属性和方法,方便对图片进行操作: 
img: 图片元素 
src: 图片地址 
options: 参数对象 
show: 显示图片方法 
remove: 移除图片方法 
其中options可以设置如下属性: 
属性:    默认值//说明 
x: 0,//水平位移 
y: 0,//垂直位移 
z: 0,//深度 
width: 0,//宽度 
height: 0,//高度 
scaleW: 1,//宽度缩放比例 
scaleH: 1//高度缩放比例 
其中x、y分别是水平和垂直坐标的位移参数,坐标原点在容器底部中间,水平坐标向右,纵坐标向上,单位是px。 
而z是深度,用于比例的计算,方向由近点到原点。 
坐标系如下图: 


图片加载成功后,就会执行_load图片加载程序。 
首先根据参数设置图片样式:

Js代码
Java代码  收藏代码
  1. img.style.cssText = "position:absolute;border:0;padding:0;margin:0;-ms-interpolation-mode:nearest-neighbor;"  
  2.     + "z-index:" + (99999 - z) + ";width:" + width + "px;height:" + height + "px;"  
  3.     + "left:" + (((clientWidth - width) / 2 + opt.x) / clientWidth * 100).toFixed(5) + "%;"  
  4.     + "top:" + ((clientHeight - height - opt.y) / clientHeight * 100).toFixed(5) + "%;";  
Js代码  收藏代码
  1. img.style.cssText = "position:absolute;border:0;padding:0;margin:0;-ms-interpolation-mode:nearest-neighbor;"  
  2.     + "z-index:" + (99999 - z) + ";width:" + width + "px;height:" + height + "px;"  
  3.     + "left:" + (((clientWidth - width) / 2 + opt.x) / clientWidth * 100).toFixed(5) + "%;"  
  4.     + "top:" + ((clientHeight - height - opt.y) / clientHeight * 100).toFixed(5) + "%;";  

绝对定位是必须的,宽度和高度根据参数设置就行。 
left和top根据坐标参数计算,这里需要用百分比的形式表示,后面再详细说明。 
还要给图片增加一个_z属性记录深度,方便调用。 
最后插入对应z的层,并重新显示该层。 


【层变换】 

图片加载后,会用_insertLayer程序把图片插入到对应的层中。 
_insertLayer有两个参数:图片元素和z深度。 
程序用_layers对象,以z为关键字记录对应的层元素。 
如果在该深度还没有创建层,会自动创建一个:

Js代码
Java代码  收藏代码
  1. layer = document.createElement("div");  
  2. layer.style.cssText = "position:absolute;border:0;padding:0;margin:0;left:0;top:0;visibility:hidden;background:transparent;width:" + this._clientWidth + "px;height:" + this._clientHeight + "px;";  
 
Js代码  收藏代码
  1. layer = document.createElement("div");  
  2. layer.style.cssText = "position:absolute;border:0;padding:0;margin:0;left:0;top:0;visibility:hidden;background:transparent;width:" + this._clientWidth + "px;height:" + this._clientHeight + "px;";  

层的坐标和尺寸要跟容器一致,因为插入图片的坐标是相对容器来定义的,这样使用起来比较方便。 
还会添加一个_count属性,记录层包含的图片数,最后插入到容器并记录到_layers对象中。 
获取层对象后,就把图片插入层中,并把_count计数加1。 

接着就可以通过_showLayer程序根据深度显示对应的层。 
程序包含三个坐标属性:_x、_y、_z,表示容器的三维坐标的偏移量。 
首先通过_getScale获取比例方法得到z深度的缩放比例scale。 
比例大于1,说明图片在视觉深度的后面,理论上应该看不到,所以隐藏;小于0,就是小到看不到了也隐藏。 

而_x和_y偏移量也需要根据深度来重新计算,程序有两种偏移方式:远点固定和近点固定。 
远点固定的意思是平面位移偏移量随着深度逐渐变小,产生以最远点为固定点移动方向的效果,近点固定就刚好相反。 
要实现这个效果,只要位移偏移量也跟着比例变化就行了,即远点固定时偏移量跟比例成正比,远点固定时是反比:

Js代码
Js代码  收藏代码
  1. var moveScale = this.fixedFar ? scale : (1 - scale);  
Java代码  收藏代码
  1. var moveScale = this.fixedFar ? scale : (1 - scale);  
 

然后把这些参数交给_show程序来处理,并显示效果。 

为了最大限度地利用层元素,程序会在_remove图片移除程序中,把没有图片的层放到_invalid废弃层集合中,在需要插入层时,优先从_invalid中获取。 


【缩放比例】 

上面已经说了,缩放比例应该按照最近点为1,最远点为0,逐渐变化。 
程序默认是通过下面的公式计算:

Js代码
Java代码  收藏代码
  1. function(z){ return 1 - z / 1000; }  
 

但用这个公式实现3DRoom效果的时候,会发现比例变化太急速,并不像这个3DRoom 那样平稳。 

研究代码后发现,原来它用的公式是这样的:

Js代码
Java代码  收藏代码
  1. this.r = FL / (FL + (z * Z));  
 其中FL和Z是一个常量来的,即公式可表示成:
Js代码  收藏代码
  1. this.r = FL / (FL + (z * Z));  
Js代码
Java代码  收藏代码
  1. function(z){ return 1/(1+z/常量); }  

那按照这个公式,深度为0时比例为1,深度为常量时比例为0.5,深度为无穷大时比例为0。 

变化效果可以参考这里的公式演示程序 。 
可以看出,缩放比例在默认公式是均匀变化的,而3DRoom公式是先快后慢,而且是逐渐变慢,所以有那种平稳的感觉。 
那按照实际,还可以自己设计适合的公式,只要符合从1到0变化就行。 


【css3模式】 

程序中有三种缩放变换方式:css3、zoom和base,模式的程序结构跟上一篇图片变换 类似。 
缩放变换的目的是根据传递过来的比例和位置偏移量,把缩放效果显示出来,实现最终的3D效果。 

css3模式使用的是css3的transform,在上一篇已经介绍过用transform的matrix做缩放和旋转,这次还需要后面两个参数做位置变换。 
后面两个参数要注意单位的设置,在MDC的-moz-transform 有说明: 
Gecko (Firefox) accepts a <length> value for tx and ty. 
Safari (WebKit) and Opera currently support a unitless <number> for tx and ty. 
意思是位移参数tx和ty,在Firefox需要带单位,而WebKit和Opera只需要数字(不带单位,默认px)。 
程序会根据浏览器设置单位。 

使用css3模式,还可以通过修改_r弧度属性进行旋转。 
最后设置matrix实现变换:

Js代码
Js代码  收藏代码
  1. layer.style[ css3Transform ] = "matrix("  
  2.     + ( Cos * scale).toFixed(5) + "," + (Sin * scale).toFixed(5) + ","  
  3.     + (-Sin * scale).toFixed(5) + "," + (Cos * scale).toFixed(5) + ", "  
  4.     + Math.round(x) + unit + ", " + Math.round(y) + unit + ")";  
Java代码  收藏代码
  1. layer.style[ css3Transform ] = "matrix("  
  2.     + ( Cos * scale).toFixed(5) + "," + (Sin * scale).toFixed(5) + ","  
  3.     + (-Sin * scale).toFixed(5) + "," + (Cos * scale).toFixed(5) + ", "  
  4.     + Math.round(x) + unit + ", " + Math.round(y) + unit + ")";  
 

这里还要注意一个问题,计算得到的比例可能是一个很长的小数,在拼字符时会出问题。 
例如执行:alert(0.0000001),会得到“1e-7”,js会用这个结果来拼字符,得到错误的结果。 
所以在做数字和字符的拼接时,能用整数的应该先转成整数,小数的话也要用toFixed转换一下。 


【zoom模式】 

ie还不支持transform,但有一个zoom样式能实现类似的效果。 
由于zoom后,尺寸会发生变化,所以需要修正left和top移动到正确的位置。 

除了ie,webkit(chrome/safari)也支持zoom,不过ie6/7、ie8和webkit的实现并不完全相同。 
测试以下代码:

Js代码
Java代码  收藏代码
  1. <style>  
  2. .inner{ width:100px; height:100px; position:absolute; background:#0CF; zoom:0.5; top:50px; left:50px;}  
  3. .inner div{ width:50px; height:50px;position:absolute; left:25px;background:#CCC;}  
  4. </style>  
  5. <div style="width:150px;height:150px; border:1px solid #000; position:relative;">  
  6. <div class="inner" id="t"><div>test</div></div>  
  7. </div>  
 

在ie6/7实现了想要的效果,但在webkit显示的位置错了。 
原因是使用zoom后,元素的left和top也会随着缩放,那只要按比例重新计算就行。 
像上面的例子,只要把left和top改成50/0.5,即100就正确了。 

ie8就更麻烦,里面的内容是按zoom缩放了,但left和top还是原来的大小。 
被这个问题困扰了很久,最后发现通过用百分比定位就可以解决,在图片加载时left和top要用百分比就是这个原因。 
例如在例子中,修正left和top,并把最里面的div的left改成25%就可以了。 
在ie8还看到一个问题,在zoom后,内容是缩小了,容器和内部元素的尺寸却没有变化,还好这不会影响到图片的显示,定位也要用left和top,免得麻烦。 
还有,如果zoom的元素的尺寸用百分比设置,那元素的尺寸就不会根据zoom缩放了。 

在计算时还要注意一个问题,上面提到在webkit和ie8,left和top都需要除以scale来修正,当scale接近0到一定程度,结果会变成Infinity(无穷大)。 
用Infinity进行运算会出错,需要修正这个问题:

Js代码
Java代码  收藏代码
  1. left = Math.min(MAX, Math.max( -MAX, left )) | 0;  
  2. top = Math.min(MAX, Math.max( -MAX, top )) | 0;  
 

其中MAX是Number.MAX_VALUE(js能表达的最大数)。 


【base模式】 

还有兼容全部浏览器的base模式,用的是传统的方法,即根据缩放比例,计算并设置每个图片的尺寸和位置。 
每次显示时,历遍层里面的图片,再逐个计算设置。 
计算需要图片的原始位置和尺寸,在第一次计算时会把数据保存在_original属性中:

Js代码
Java代码  收藏代码
  1. var original = img._original = img._original || {  
  2.     width: img.offsetWidth, height: img.offsetHeight,  
  3.     left: img.offsetLeft,   top: img.offsetTop  
  4. };  
 

尺寸只要根据比例缩放就行,位置除了计算相对层的缩放还要加上相对容器的位移,这个跟zoom模式的计算是一样的。 
理解了层变换的方式后,再理解这个就不难了。 


【zIndex】 

深度除了要缩放和定位,还需要合理的前后遮盖。 
前后遮盖需要用zIndex 来实现,可以在图片或层上设置。 

首先最简单的方法是在层上设置:

Js代码
Java代码  收藏代码
  1. <style>  
  2. div,img{width:200px;height:200px;position:absolute;left:0;top:0;}  
  3. img{width:150px;height:150px;}  
  4. </style>  
  5. <div style="z-index:300;">  
  6.     <img style="background:#0C9;" alt="300" onclick="alert(300)">  
  7. </div>  
  8. <div style="z-index:100;">  
  9.     <img style="background:#396;left:50px;top:50px;" alt="100" onclick="alert(100)">  
  10. </div>  
 
Js代码  收藏代码
  1. <style>  
  2. div,img{width:200px;height:200px;position:absolute;left:0;top:0;}  
  3. img{width:150px;height:150px;}  
  4. </style>  
  5. <div style="z-index:300;">  
  6.     <img style="background:#0C9;" alt="300" onclick="alert(300)">  
  7. </div>  
  8. <div style="z-index:100;">  
  9.     <img style="background:#396;left:50px;top:50px;" alt="100" onclick="alert(100)">  
  10. </div>  

实现一般的3D效果可以这样设置。 
但点击测试,在ff和webkit前面的能触发后面的不能触发,而ie和opera就前后都可以触发。 
ps:如果img换成div,那么ie和opera后面的元素也不能触发,原因还不清楚。 
这样要想像3DRoom那样触发图片事件的话就不能在层设置zIndex。 

还可以在图片上设置:

Js代码
Js代码  收藏代码
  1. <style>  
  2. div,img{width:200px;height:200px;position:absolute;left:0;top:0;}  
  3. img{width:150px;height:150px;}  
  4. </style>  
  5. <div>  
  6.     <img style="background:#0C9;z-index:300;" alt="300" onclick="alert(300)">  
  7. </div>  
  8. <div>  
  9.     <img style="background:#396;left:50px;top:50px;z-index:100;" alt="100" onclick="alert(100)">  
  10. </div>  
Java代码  收藏代码
  1. <style>  
  2. div,img{width:200px;height:200px;position:absolute;left:0;top:0;}  
  3. img{width:150px;height:150px;}  
  4. </style>  
  5. <div>  
  6.     <img style="background:#0C9;z-index:300;" alt="300" onclick="alert(300)">  
  7. </div>  
  8. <div>  
  9.     <img style="background:#396;left:50px;top:50px;z-index:100;" alt="100" onclick="alert(100)">  
  10. </div>  
 

这样图片在所有浏览器都能正常触发,但在ie6/7层叠的效果失效了,看来在ie6/7只能在层用zIndex。 
还有一个问题,如果给div加上变换效果:

Js代码
Java代码  收藏代码
  1. div{-moz-transform:scale(1);-webkit-transform:scale(1);-o-transform:scale(1);}  
 那图片上的zIndex就会失效,那css3模式就只能在层设置zIndex了。
Js代码  收藏代码
  1. div{-moz-transform:scale(1);-webkit-transform:scale(1);-o-transform:scale(1);}  


总结一下: 
在css3模式肯定要在层设置zIndex,但图片也不能触发事件。 
在zoom和base模式,应该在图片设置zIndex,但在ie6/7就要在层设置。 
这样至少在base模式层叠和图片触发事件都是正常的。 


【msInterpolationMode】 

开始做的时候,效果在ie8下会很卡,但这个3DRoom 却不会卡,最后发现是使用了-ms-interpolation-mode。 
这个东西在aoao 的文章中看过,但没想到可以用在这里。 

在MSDN有msInterpolationMode 的介绍: 
Gets or sets the interpolation (resampling) method used to stretch images. 
即获取或设置用于拉伸图像的插值(重采样)方法。 
它有两个值: 
nearest-neighbor:使用近邻插值模式。 
bicubic:使用高品质的双三次插值模式。 
这些名词比较专业,我们只要知道使用nearest-neighbor效率高但效果差,而bicubic效果好效率低就够了。 
程序把它设为nearest-neighbor提高效率,这样在ie8中也不会卡了。 


【拖动方向变换/滚轮深度变换】 

程序扩展了拖动视觉变换和滚轮深度变换。 
拖动和滚动的做法跟上一个的做法差不多,这里拖动是实现方向的变换,滚轮是实现深度的变换。 
移动是通过修改_x和_y属性来实现,缩放是通过修改_z来实现。 
修改属性之后再调用show方法显示效果。 


使用技巧 

【3DRoom】 

在3DRoom效果中,因为要实现图片的触发事件,所以不能用css3模式,原因是上面提到的层叠问题。 
上面也提到在ie8被zoom的元素尺寸不会改变,导致触发范围错误,所以也不用zoom模式。 
使用base模式就不会有问题了。 

在点击图片时,视觉会移动到图片上面,这个通过点击图片后根据本身的三维参数修改_x/_y/_z来实现:

Js代码
Js代码  收藏代码
  1. img.onclick = function(){  
  2.     i3D._z = -options.z | 0;  
  3.     i3D._x = -options.x | 0;  
  4.     i3D._y = options.y | 0;  
  5.     i3D.show();  
  6. }  
Java代码  收藏代码
  1. img.onclick = function(){  
  2.     i3D._z = -options.z | 0;  
  3.     i3D._x = -options.x | 0;  
  4.     i3D._y = options.y | 0;  
  5.     i3D.show();  
  6. }  
 

图片在mouseover时会显示一个边框,为了让图片加边框后不发生位移,加了一个"-1px"的margin,mouseout时再去掉。 
这里3DRoom跟参考的效果还是有差距,本文主要还是对3D效果的实现和研究。 

【模式选择】 

css3模式稳定,大部分浏览器都支持,除了ie。 
zoom模式兼容性不好,但ie支持。 
base最慢,但兼容性好,而且没有bug。 
一般情况下应优先使用css3模式,然后是zoom,最后base,但像3DRoom那样的情况就要按实际选择了。 
设计的时候,ie是打算用Matrix滤镜的,但开发中发现一些问题,效率又太低,就不考虑了。 


使用说明 

实例化时,必须有容器作为参数:

Js代码
Java代码  收藏代码
  1. var i3D = new Image3D( container, options );    
 
Js代码  收藏代码
  1. var i3D = new Image3D( container, options );  


然后调用i3D方法添加图片:

Js代
Java代码  收藏代码
  1. i3D.add( src, options );    
Js代码  收藏代码
  1. i3D.add( src, options );  

可选参数用来设置系统的默认属性,包括: 
属性:   默认值//说明 
mode: "css3|zoom|base",//模式 
x: 0,//水平偏移值 
y: 0,//垂直偏移值 
z: 0,//深度偏移值 
r: 0,//旋转角度(css3支持) 
fixedFar: false,//是否远点固定 
getScale: function(z){ return 1 - z / 1000; },//获取比例方法 
onError: function(err){}//出错时执行 

add方法的可选参数在图片加载中已经说明。 

还提供了以下方法: 
add:添加图片; 
show:显示效果; 
reset:重置默认状态; 
dispose:销毁程序。 

加入拖动方向变换或滚轮深度变换扩展后,可通过设置相关参数定义变换范围。

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
JavaScript实现图片之间切换
手动图像切换 var image; var current = 0; var images = new Array(5); function init(){ for(var i=0;i=4){ return false; }else{ current++; ...
574 0
阿里云服务器怎么设置密码?怎么停机?怎么重启服务器?
如果在创建实例时没有设置密码,或者密码丢失,您可以在控制台上重新设置实例的登录密码。本文仅描述如何在 ECS 管理控制台上修改实例登录密码。
4072 0
Scrapy下载图片(下,图片中文字识别)
这里增加应用场景,让图片下载结合自动识别,实现识别转换图片中的电话号码。 背景 在爬取广西人才网的过程当中,发现广西人才网企业联系电话那里不是str,而是将电话生成了一张图片,遇到这种情况,通常有三种不同的处理办法: 将图片地址保存下来,只存url ...
1504 0
C# 模拟PrintScreen 和 Alt+PrintScreen截取屏幕图片
C# 模拟PrintScreen 和 Alt+PrintScreen截取屏幕图片 keybd_event API 函数功能:该函数合成一次击键事件。系统可使用这种合成的击键事件来产生WM_KEYUP或WM_KEYDOWN消息,键盘驱动程序的中断处理程序调用keybd_event函数。
660 0
阿里云服务器端口号设置
阿里云服务器初级使用者可能面临的问题之一. 使用tomcat或者其他服务器软件设置端口号后,比如 一些不是默认的, mysql的 3306, mssql的1433,有时候打不开网页, 原因是没有在ecs安全组去设置这个端口号. 解决: 点击ecs下网络和安全下的安全组 在弹出的安全组中,如果没有就新建安全组,然后点击配置规则 最后如上图点击添加...或快速创建.   have fun!  将编程看作是一门艺术,而不单单是个技术。
4503 0
使用JCrop进行图片裁剪,裁剪js说明,裁剪预览,裁剪上传,裁剪设计的图片处理的工具类和代码
 1.要想制作图片裁剪功能,可以使用网上的裁剪工具JCrop,网址是:https://github.com/tapmodo/Jcrop/ 案例效果如下: 2.引入JCrop的js代码,具体要引入那些js可以参考JCrop案例: 3.编写的html代码如下: &lt;div id="light" class="white_content"&gt;        &lt
2279 0
AntiModerate – 渐进式图片加载的 JavaScript 库
  AntiModerate 是一个渐进式图片加载的 JavaScript 库。我们多数看到的图片显示模式,都是从上到下逐渐显示的,这是“标准式”图像;而有的图片是先出现一个很低分辨率的图像轮廓,类似加了马赛克的模糊样子,当图片完全加载完毕时,图片就由模糊变得清晰了,这就是“渐进式”图像。
693 0
关于Android加载图片OOM的思考
大家都知道,使用Android加载图片时,一般来说加载几个图片都容易OOM,但是Android手机的相册似乎没有这个问题。 思索了很久没有找到办法,和一个哥们讨论次问题时他给出个解决办法: (下面的文字转自:http://blog.sina.com.cn/s/blog_7139b0e30100xklb.html,所以本博文属于转载) 写Android代码也有那么三四个月的时间了,也一直都是菜鸟,很多东西都只是拿来就用,也没有想太多的细节问题。
666 0
+关注
514
文章
0
问答
文章排行榜
最热
最新
相关电子书
更多
文娱运维技术
立即下载
《SaaS模式云原生数据仓库应用场景实践》
立即下载
《看见新力量:二》电子书
立即下载