图片(旋转/缩放/翻转)变换效果(ccs3/滤镜/canvas)原文：http://www.cnblogs.com/cloudgamer/archive/2010/0
图片(旋转/缩放/翻转)变换效果(ccs3/滤镜/canvas)
原文：http://www.cnblogs.com/cloudgamer/archive/2010/08/16/ImageTrans.html
?
以前要实现图片的旋转或翻转，只能用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
效果预览
#idContainer { border: 1px solid rgb(0, 0, 0); width: 600px; height: 500px; background: none no-repeat scroll center center rgb(255, 255, 255); }
程序说明
【基本原理】
变换主要是利用css3的变换样式transform的matrix方法来实现。
ie不支持css3，但有Matrix滤镜也能实现类似的效果。
程序还用canvas，通过画图实现相同的效果。
【模式设置】
程序包含三种模式：css3、filter和canvas，程序初始化时，会根据自定义模式进行模式设置。
各个模式相关的属性和方法都存放在ImageTrans.modes中。
每个模式对象都包含support属性，表示当前浏览器是否支持该模式，还有几个方法：
init：初始化执行程序
load：加载图片执行程序
show：变换显示程序
dispose：销毁程序
使用这样的格式来自定义模式："css3|filter|canvas"，判断过程主要在_initMode程序中：
var?ImageTrans?=?function(container,?options){
????this._initialize(?container,?options?);
????this._initMode();
????if?(?this._support?)?{
????????this._initContainer();
????????this._init();
????}?else?{//模式不支持
????????this.onError("not?support");
????}
};
ImageTrans.prototype?=?{
??//初始化程序
??_initialize:?function(container,?options)?{
????var?container?=?this._container?=?$$(container);
????this._clientWidth?=?container.clientWidth;//变换区域宽度
????this._clientHeight?=?container.clientHeight;//变换区域高度
????this._img?=?new?Image();//图片对象
????this._style?=?{};//备份样式
????this._x?=?this._y?=?1;//水平/垂直变换参数
????this._radian?=?0;//旋转变换参数
????this._support?=?false;//是否支持变换
????this._init?=?this._load?=?this._show?=?this._dispose?=?$$.emptyFunction;
????
????var?opt?=?this._setOptions(options);
????
????this._zoom?=?opt.zoom;
????
????this.onPreLoad?=?opt.onPreLoad;
????this.onLoad?=?opt.onLoad;
????this.onError?=?opt.onError;
????
????this._LOAD?=?$$F.bind(?function(){
????????this.onLoad();?this._load();?this.reset();
????????this._img.style.visibility?=?"visible";
????},?this?);
????
????$$CE.fireEvent(?this,?"init"?);
??},
??//设置默认属性
??_setOptions:?function(options)?{
????this.options?=?{//默认值
????????mode:????????"css3|filter|canvas",
????????zoom:????????.1,//缩放比率
????????onPreLoad:????function(){},//图片加载前执行
????????onLoad:????????function(){},//图片加载后执行
????????onError:????function(err){}//出错时执行
????};
????return?$$.extend(this.options,?options?||?{});
??},
??//模式设置
??_initMode:?function()?{
????var?modes?=?ImageTrans.modes;
????this._support?=?$$A.some(?this.options.mode.toLowerCase().split("|"),?function(mode){
????????mode?=?modes[?mode?];
????????if?(?mode?&&?mode.support?)?{
????????????mode.init?&&?(this._init?=?mode.init);//初始化执行程序
????????????mode.load?&&?(this._load?=?mode.load);//加载图片执行程序
????????????mode.show?&&?(this._show?=?mode.show);//变换显示程序
????????????mode.dispose?&&?(this._dispose?=?mode.dispose);//销毁程序
????????????//扩展变换方法
????????????$$A.forEach(?ImageTrans.transforms,?function(transform,?name){
????????????????this[?name?]?=?function(){
????????????????????transform.apply(?this,?[].slice.call(arguments)?);
????????????????????this._show();
????????????????}
????????????},?this?);
????????????return?true;
????????}
????},?this?);
??},
??//初始化容器对象
??_initContainer:?function()?{
????var?container?=?this._container,?style?=?container.style,?position?=?$$D.getStyle(?container,?"position"?);
????this._style?=?{?"position":?style.position,?"overflow":?style.overflow?};//备份样式
????if?(?position?!=?"relative"?&&?position?!=?"absolute"?)?{?style.position?=?"relative";?}
????style.overflow?=?"hidden";
????$$CE.fireEvent(?this,?"initContainer"?);
??},
??//加载图片
??load:?function(src)?{
????if?(?this._support?)?{
????????var?img?=?this._img,?oThis?=?this;
????????img.onload?||?(?img.onload?=<span st
