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

jiangsha

原文：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程序中：
<div class="cnblogs_code">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  );