图片(旋转缩放翻转)变换效果(ccs3滤镜canvas).docxVIP

图片(旋转/缩放/翻转)变换效果(ccs3/滤镜/canvas) 以前要实现图片的旋转或翻转，只能用ie的滤镜来实现，虽然canvas也实现，但ie不支持而且不是html标准。css3出来后，终于可以用标准的transform来实现变换，而canvas也已成为html5标准的一部分。css3和html5使web变得越来越强大，各种新奇的技术正等待我们发掘。本程序分别通过滤镜(ie)、ccs3和canvas来实现图片的旋转、缩放和翻转变换效果，可以用作图片查看器。有如下特色：1，用滤镜、ccs3和canvas实现相同的变换效果；2，可任意角度旋转；3，可任意角度翻转；4，可扩展滚轮缩放；5，可扩展拖动旋转。兼容：ie6/7/8, firefox 3.6.8, opera 10.6, safari 5.0.1, chrome 5.0 效果预览 ??????? 程序说明 【基本原理】 变换主要是利用css3的变换样式transform的matrix方法来实现。ie不支持css3，但有Matrix滤镜也能实现类似的效果。程序还用canvas，通过画图实现相同的效果。 【模式设置】 程序包含三种模式：css3、filter和canvas，程序初始化时，会根据自定义模式进行模式设置。各个模式相关的属性和方法都存放在ImageTrans.modes中。每个模式对象都包含support属性，表示当前浏览器是否支持该模式，还有几个方法：init：初始化执行程序load：加载图片执行程序show：变换显示程序dispose：销毁程序 使用这样的格式来自定义模式：css3|filter|canvas，判断过程主要在_initMode程序中： 代码 var?modes?=?ImageTrans.modes;this._support?=?$$A.some(?this.options.mode.toLowerCase().split(|),?function(mode){????mode?=?modes[?mode?];????if?(?mode??mode.support?)?{????????...????????return?true;????}},?this?); 程序会按顺序逐个判断，当浏览器支持该模式时就会用该模式的方法设置程序函数。再用_support记录浏览器是否支持指定的模式。 如果浏览器支持，才执行_initContainer容器初始化程序和_init模式初始化程序。 【加载图片】 完成初始化设置后，再执行load方法加载图片。在load方法中，主要对图片进行设置： img.onload?||?(?img.onload?=?this._LOAD?);img.onerror?||?(?img.onerror?=?function(){?oThis.onError(err?image);?}?); 最后设置src加载图片。 图片加载成功后，会执行_LOAD程序，在里面会执行_load加载程序和reset方法。在reset中，会重置变换参数，并执行_show模式画图程序： this._y?=?this._x?=?1;?this._radian?=?0;this._show(); 这时，图片会以初始状态显示。 【图片变换】 图片加载完成后，就可以对图片进行变换。 各种变换方法保存在ImageTrans.transforms中，包括旋转、垂直翻转、水平翻转、缩放等。变换结果是通过_y垂直变换参数、_x水平变换参数和_radian旋转变换参数计算得到的。变换方法就是用来修改这些参数的方法。 一般的翻转是通过把_y或_x取反来实现的，是以图片本身为坐标的翻转。但用户的习惯是按浏览器坐标来翻转的，当图片先旋转变换坐标后再翻转，就不符合用户习惯了。为了能按视觉习惯坐标来翻转，程序使用的方法是先旋转再翻转来实现。例如vertical垂直翻转是图片旋转180度，再进行一般的水平翻转： this._radian?=?Math.PI?-?this._radian;?this._x?*=?-1; 而horizontal水平翻转也类似： this._radian?=?Math.PI?-?this._radian;?this._y?*=?-1; 实际也是利用了一些坐标变换原理。 rotate旋转是以弧度为单位的，直接修改_radian参数。rotatebydegress是以角度为单位的旋转，其实是用degress * Math.PI/180公式把角度转换成弧度。left向左转90度是在原有弧度减Math.PI/2（即90度），而right向右转90度是加Math.PI/2。