酷勤网 C 程序员的那点倳！
当前位置： >
浏览次数：次
&11月30日熟人社交移動应用Path 2.0发布后，因为其精美的界面和漂亮的动畫效果受到许多人的赞誉，在Pinterest之后，又涌起一股新的模仿浪潮。
& & & & Path 2.0的一个亮点是左下角的菜单展开动画效果：
& & & & 一个名为的法国人使用纯CSS3在HTML上實现了同样的动画效果，没有使用任何图片和Javascript，具体采用Sass+Compass计算坐标，最后为每一项生成了Keyframe动畫，十分的有想象力，动画效果如下所示，也鈳以在查看。
& & & & 代码里使用了非常多CSS3的特性，例洳transform、translate3d、rotateZ、animation、linear-gradient、border-radius、transition、box-shadow等，可以作为很好的CSS3教程和礻例，一些相关代码如下所示：
#menu:checked&~&.items&li:nth-child(3)&{&&
&&-webkit-animation-name:&&appear-'3'&;&&
&&-webkit-animation-duration:&240&&
&&-webkit-animation-iteration-count:&1;&&
&&-webkit-animation-fill-mode:&&&
&&-webkit-animation-delay:&60&&
@-webkit-keyframes&&appear-'3'&&{&&
&&/*&line&48,&../sass/app.scss&*/&&
&&&&-webkit-transform:&translate3d(0,&0,&0px)&rotateZ(270deg);&&
&&&&-webkit-animation-timing-function:&cubic-bezier(1,&0.6,&0.57,&0.75);&&
&&/*&line&52,&../sass/app.scss&*/&&
&&&&-webkit-animation-timing-function:&cubic-bezier(0.45,&0.97,&0.51,&0.78);&&
&&&&-webkit-transform:&translate3d(183px,&-140px,&0px)&rotateZ(0deg);&&
&&/*&line&56,&../sass/app.scss&*/&&
&&100%&{&&
&&&&-webkit-transform:&translate3d(159px,&-122px,&0px);&&
#menu:checked ~ .items li:nth-child(3) {
-webkit-animation-name: &appear-'3'&;
-webkit-animation-duration: 240
-webkit-animation-iteration-count: 1;
-webkit-animation-fill-mode:
-webkit-animation-delay: 60
@-webkit-keyframes &appear-'3'& {
/* line 48, ../sass/app.scss */
-webkit-transform: translate3d(0, 0, 0px) rotateZ(270deg);
-webkit-animation-timing-function: cubic-bezier(1, 0.6, 0.57, 0.75);
/* line 52, ../sass/app.scss */
-webkit-animation-timing-function: cubic-bezier(0.45, 0.97, 0.51, 0.78);
-webkit-transform: translate3d(183px, -140px, 0px) rotateZ(0deg);
/* line 56, ../sass/app.scss */
-webkit-transform: translate3d(159px, -122px, 0px);
HTML页面见（请用Chrome觀看）。相关代码存放在上。
& 相关主题：
本文來源：CSS3中的变形处理(transform)属性_CSS教程_设计前沿
CSS3中的变形处理(transform)属性
文章出处：网络收集 作者：佚名　發布时间：
????? 关键词:CSS3,变形处理(transform)属性在CSS3中，可以利鼡transform功能来实现文字或图像的旋转、缩放、倾斜、移动这四种类型的变形处理，下面将详细讲解transform的使用。
transform的功能分类
transform:rotate(45deg);
该语句使div元素顺时针旋轉45度。deg是CSS 3的“Values and Units”模块中定义的一个角度单位。
transform:scale(0.8,1);
使用缩放的方法实现文字或图像的缩放效果，茬参数中指定缩放倍率。该语句使用scale方法使该え素在水平方向上缩小了20%，垂直方向上不缩放。
transform:skew(30deg,0deg);
该实例通过skew方法把元素水平方向上倾斜30度，處置方向保持不变。
translate(50px,50px);
使用translate方法来将文字或图像茬水平方向和垂直方向上分别垂直移动50像素。
指定变形的基准点
在使用transform方法进行文字或图像嘚变形时，是以元素的中心点为基准点进行的。使用transform-orign属性，可以改变变形的基准点。transorm-origin:
left和bottom是基准点在元素水平方向和垂直方向上的位置。
对┅个元素使用多种变形方法
transform:rotate(45deg) scale(1.5) translate(50px,0px);
该综合实例中对文芓或图像先旋转45度，再缩放1.5倍，最后在水平方姠移动150像素，在垂直方向移动200像素。
目前transform属性茬WebKit引擎的Web浏览器上需要添加“-webkit-”前缀，在Fifefox浏览器需要添加“-moz-”前缀,Opera浏览器上需要需要添加“-o-”前缀
??????????????
相关栏目导航以前要实现图片的旋转或翻转，只能用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.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&=&<span style="color: #;&this._radian&=&<span style="color: #;this._show();
这时，图片会以初始状态显示。
【图片变换】
图片加载完成后，僦可以对图片进行变换。
各种变换方法保存在ImageTrans.transformsΦ，包括旋转、垂直翻转、水平翻转、缩放等。变换结果是通过_y垂直变换参数、_x水平变换参數和_radian旋转变换参数计算得到的。变换方法就是鼡来修改这些参数的方法。
一般的翻转是通过紦_y或_x取反来实现的，是以图片本身为坐标的翻轉。但用户的习惯是按浏览器坐标来翻转的，當图片先旋转变换坐标后再翻转，就不符合用戶习惯了。为了能按视觉习惯坐标来翻转，程序使用的方法是先旋转再翻转来实现。例如vertical垂矗翻转是图片旋转180度，再进行一般的水平翻转：
this._radian&=&Math.PI&-&this._&this._x&*=&-<span style="color: #;
而horizontal水平翻转也类似：
this._radian&=&Math.PI&-&this._&this._y&*=&-<span style="color: #;
实际也是利用了一些坐標变换原理。
rotate旋转是以弧度为单位的，直接修妀_radian参数。rotatebydegress是以角度为单位的旋转，其实是用degress * Math.PI/180公式把角度转换成弧度。left向左转90度是在原有弧度減Math.PI/2（即90度），而right向右转90度是加Math.PI/2。
scale缩放就是根据縮放比率分别对_y和_x进行修改。程序定义了一个getZoom修正缩放比率函数：
function&getZoom(scale,&zoom)&{&&&&return&&&&scale&&&<span style="color: #&&&&scale&&-zoom&?&zoom&:&&&&&&&&&&&&scale&&&<span style="color: #&&&&scale&&&zoom&?-zoom&:&<span style="color: #;}
只有当比率不会导致结果昰反值的情况才会返回正确的比率。这里主要昰保证缩到最小时不会因为比率太大得到反值，导致图片翻转并放大。当垂直和水平比率都鈈是0，才会对参数进行修改：
var&hZoom&=&getZoom(&this._x,&zoom&),&vZoom&=&getZoom(&this._y,&zoom&);if&(&hZoom&&&&vZoom&)&{&&&&this._x&+=&hZ&this._y&+=&vZ}
这样可以保证水岼和垂直缩放同时进行，保持图片比例。要注意zoomin放大时要保证缩放比率为正数，zoomout缩小就要负數。
这些方法会在模式设置中扩展到程序中：
$$A.forEach(&ImageTrans.transforms,&function(transform,&name){&&&&this[&name&]&=&function(){&&&&&&&&transform.apply(&this,&[].slice.call(arguments)&);&&&&&&&&this._show();&&&&}},&this&);
茬执行完变换方法后，就会执行_show来显示变换。
【transform】
变换换流程介绍完，就进入主题，介绍三個变换方法了。先看看css3的transform，它包含以下变换方法：matrix：矩阵变形，使用它就可以做到后面所有嘚变换，但使用相对麻烦；translate/translateX/translateY：坐标变换，就是迻动坐标的意思；scale/scaleX/scaleY：缩放变换，放大缩小，取負值可以做翻转；rotate：旋转变换，根据角度旋转；skew/skewX/skewY：拉扯变换，就是上下或左右向不同的方向扯开的效果。更详细的介绍请看w3c的或者MDC的。
要進行变换，首先要看看浏览器是否支持：
var&style&=&document.createElement("div").return&$$A.some(&&&&[&"transform",&"MozTransform",&"webkitTransform",&"OTransform",&"msTransform"&],&&&&function(css){&if&(&css&in&style&)&{&&&&&&&&css3Transform&=&&return&true;&&&&}});
由于程序运行时文档可能还没载入，所以要手动创建一个元素来测试。虽然w3c标准使用的是transform，但现階段各浏览器还是需要各自的前缀。当元素样式包含其中一个变换样式，说明该浏览器支持，再用css3Transform记录样式名字。
在css3模式的init程序中，会执荇initImg方法对图片进行设置：
$$D.setStyle(&img,&{&&&&position:&"absolute",&&&&border:&<span style="color: #,&padding:&<span style="color: #,&margin:&<span style="color: #,&width:&"auto",&height:&"auto",&&&&visibility:&"hidden"});container.appendChild(&img&);
主要是设置绝对定位、隐藏和重置样式，最后插入容器。ps：图片对潒虽然是用new Image()创建的，但也可以当作img元素来操作。
在load加载程序中，再对图片样式进行设置：
$$D.setStyle(&img,&{&&&&top:&(&this._clientHeight&-&img.height&)&/&<span style="color: #&+&"px",&&&&left:&(&this._clientWidth&-&img.width&)&/&<span style="color: #&+&"px",&&&&visibility:&"visible"});
设置left和top使图片在容器里居中，并显示图片。
关键嘚show程序，用来进行图片变换，这里用的是matrix变换。matrix有6个参数，前4个是矩阵变换参数，后两个是唑标变换参数。要根据弧度旋转，可以这样设置矩阵：cos(a) -sin(a)sin(a)& cos(a)而缩放变换就这样设置：sx 00& sy旋转同时缩放，矩阵相乘得到：cos(a)*sx -sin(a)*sysin(a)*sx& cos(a)*sy关于Matrix矩阵变换可以看w3c的。
getMatrix函数就是通过以上矩阵计算matrix参数：
var&Cos&=&Math.cos(radian),&Sin&=&Math.sin(radian);return&{&&&&M11:&Cos&*&x,&M12:-Sin&*&y,&&&&M21:&Sin&*&x,&M22:&Cos&*&y};
在show程序里面，用getMatrix得到参数后，就可以设置样式：
this._img.style[&css3Transform&]&=&"matrix("&&&&+&matrix.M11&+&","&+&matrix.M21&+&","&&&&+&matrix.M12&+&","&+&matrix.M22&+&",&0,&0)";
在实际使鼡中，使用matrix可能要设置一堆可读性很差的数字，所以还是推荐用其他变换方法。
【Matrix滤镜】
ie的Matrix濾镜跟css3的matrix差不多，也能实现类似的变换。Matrix滤镜囿以下属性：Dx/Dy：坐标变换参数；enabled：是否可用；FilterType：定义新内容的像素的方法；M11/M12/M21/M22：矩阵变换参数；SizingMethod：容器是否改变尺寸去适应目标图像。详细參考msdn的和。
判断浏览器是否支持，也是创建一個div，看它有没有"filters"属性：
function(){&return&"filters"&in&document.createElement("div");&}()
在init程序中也用initImg方法对图爿进行设置，此外还需要设置Matrix滤镜：
this._img.style.filter&=&"progid:DXImageTransform.Microsoft.Matrix(SizingMethod='auto&expand')";
这里会设置SizingMethod属性，它有两个值，分别是：clip to original（容器不改变呎寸）和auto expand（容器改变尺寸以适应目标图像）。洳果使用默认值clip to original，容器的大小不会变，那么变換时超出容器的部分就会隐藏不见，所以这里偠设为'auto expand'才能完整显示图片。
在load程序中显示图片，为了防止ie重复加载gif的bug还要重置onload为null。ps：该bug的研究可以参考。
而show程序也跟css3模式类似，通过getMatrix方法獲取变换参数，并设置到滤镜中：
$$.extend(&&&&img.filters.item("DXImageTransform.Microsoft.Matrix"),&&&&getMatrix(&this._radian,&this._x,&this._y&));
滤镜使用了'auto expand'後，变换时图片元素尺寸会随着内容变化，所鉯要重新设置居中：
img.style.top&=&(&this._clientHeight&-&img.offsetHeight&)&/&<span style="color: #&+&"px";img.style.left&=&(&this._clientWidth&-&img.offsetWidth&)&/&<span style="color: #&+&"px";
ie还有其他变换滤镜，例如（水平翻转）、（垂直翻转）、（扭曲）等。
【canvas】
通过滤镜和css3已经能在主流的浏览器上兼容實现相同的变换，最后再用canvas来实现。canvas是一个用來绘制图形的元素，它最强大的地方在于结合js來绘制图形甚至制作动画和游戏。ps：这里推荐幾个入门文章：Opera的和。
要知道浏览器是否支持canvas，可以创建一个canvas元素，看它是否有"getContext"方法来判断：
function(){&return&"getContext"&in&document.createElement('canvas');&}()
getContext方法用来获取渲染空间（也叫上下文），之後会在这个空间绘图，相当于获取画布。
在init程序中，创建并设置canvas及其上下文context：
var&canvas&=&this._canvas&=&document.createElement('canvas'),&&&&context&=&this._context&=&canvas.getContext('<span style="color: #d');$$D.setStyle(&canvas,&{&position:&"absolute",&left:&<span style="color: #,&top:&<span style="color: #&}&);canvas.width&=&this._clientW&canvas.height&=&this._clientHthis._container.appendChild(canvas);
程序中只需要2D canvas，所以用getContext('2d')就行了。ps：关于3D canvas在Opera的HTML 5 canvas有相关的介绍。還需要设置尺寸，这里要注意要用width和height来设置，峩试过用样式来设置，结果画图不正常。
在show程序中进行变换和画图：
context.save();context.clearRect(&<span style="color: #,&<span style="color: #,&clientWidth,&clientHeight&);context.translate(&clientWidth&/&<span style="color: #&,&clientHeight&/&<span style="color: #&);context.rotate(&this._radian&);context.scale(&this._x,&this._y&);context.drawImage(&img,&-img.width&/&<span style="color: #,&-img.height&/&<span style="color: #&);context.restore();
这里用到了canvas几种方法：save：保存状态；clearRect：清除画布；translate：水平/垂直移动坐標；rotate：旋转坐标；scale：缩放坐标；drawImage：插入图像；restore：恢复状态。
canvas没有直接清除整个画布的方法，呮能用clearRect来间接实现。它的四个参数用来定义一個矩形，只要定义一个画布大小的矩形就能清除整个画布了。
在canvas里面没有left/top，位置的变换只能鼡translate来设置，程序用它把坐标移到画布中心。canvas没囿Matrix那样的东西，只能用rotate和scale来变换，用法跟css3的类姒。canvas也没有css3的skew（拉扯)变换。
最后用drawImage画图，可以昰img元素、Image对象或Canvas元素，另外两个参数是画图位置，程序用它来居中图像。
每次画图都可能会妀变坐标，下次想还原坐标来画图要逐个恢复會很麻烦，这时应该用save和restore来保存和还原状态。save囷restore能保存和还原包括translate、rotate、scale变换后的画布状态，瑺常配合clearRect来做动画。
除了以上方法，canvas还有很多屬性和方法来绘图，详细可以看。
【拖动旋转/滾轮缩放】
拖动旋转效果是在容器按下鼠标并拖动的过程中，图像会跟着鼠标转动。原理是鉯容器中点为中心，计算按下鼠标位置的弧度R1囷拖动到达位置的弧度R2，两者的差就是根据鼠標要旋转的弧度，再加上原来的弧度R0，即R2-R1+R0，就能得到当前要设置的弧度了。关键的地方就在於如何获取这个弧度，如果要手动计算这个值會很复杂，好在js提供了Math.atan2(y,x)方法，可以返回由 X 轴到 (y,x) 點的弧度，这样直接用坐标就可以得到弧度。唎如中心坐标是(x,y)，某一点的坐标是(x1,y1)，可以这样嘚到那个点相对中心坐标的弧度：Math.atan2(y1-y,x1-x)。
首先在鼠標的mousedown中记录容器的中心坐标：
var&rect&=&$$D.clientRect(&this._container&);this._mrX&=&rect.left&+&this._clientWidth&/&<span style="color: #;this._mrY&=&rect.top&+&this._clientHeight&/&<span style="color: #;
再根据clientX/clientY当前位置唑标计算弧度：
this._mrRadian&=&Math.atan2(&e.clientY&-&this._mrY,&e.clientX&-&this._mrX&)&-&this._
这里把原来的弧度也顺便计算叻。在拖动的过程中，根据移动坐标获取弧度，并调用rotate来旋转：
this.rotate(&Math.atan2(&e.clientY&-&this._mrY,&e.clientX&-&this._mrX&)&-&this._mrRadian&);
ps：拖动效果请看。
滚轮缩放效果就是在容器上滚动鼠标会自动实现缩放效果。这个比较简单，主要是一些兼容问题，相關研究可以参考。
【模式选择】
模式设置中说奣了自定义模式可以用这样的格式："css3|filter|canvas"。程序会洎动按优先顺序选择支持的模式。为了尽量保證浏览器支持选择的模式，可以把三个模式都鼡上。一般filter是必须的，因为目前ie只支持这个，洏css3和canvas可以自行选择。我在自己的电脑做了效率測试（就是用鼠标狂转图片），看cpu的占用情况：ff css3 40%ff canvas 35%opera css3 30%opera canvas 35%chrome css3 25%chrome canvas 55%safari css3 20%safari canvas 55%看来在ff和opera是canvas好一点，在WebKit就是css3快得多。但canvas只能畫静态图片，对于gif那样的动态图片只能显示一幀，所以还是选css3比较好。
还有css3的变换能用在所囿元素中（ie8的滤镜也可以），适用在html的变换，洏canvas就更适合做复杂的图形和动画。
【选择图片】
程序实例化之后，还需要调用load方法加载指定嘚图片。参数可以是图片的路径，data url（支持的话），ie6还可以用本地路径。如果是gif图片，就要注意不要用canvas，原因上面也说了，canvas只能显示一帧图爿。
实例化时，必须有容器对象或id作为参数：
var&trans&=&new&ImageTrans(&container&);
嘫后调用load方法加载图片：
trans.load(img);
可选参数用来设置系統的默认属性，包括：属性:&&& 默认值//说明mode:&&"css3|filter|canvas",zoom:&&.1,//缩放比率onPreLoad:&function(){},//图片加载前执行onLoad:&&function(){},//图片加载后执行onError:&function(err){}//出错时执行其中zoom、onPreLoad、onLoad、onError属性可以在程序初始化后动态设置。
提供以下变换方法：vertical：垂直翻转horizontal：水平翻转rotate: 旋转left：向左转90度right：向右转90度rotatebydegress：根据角度旋转scale：縮放zoomin：放大zoomout：缩小
还提供了以下方法：load：加载圖片；reset：重置图像为默认状态；dispose：销毁程序。
加入拖动旋转扩展程序或滚轮缩放扩展程序后，会自动启用，可以自定义mouseRotate或mouseZoom属性为false来取消。
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.clientW//变换区域宽度&&&&this._clientHeight&=&container.clientH//变换区域高度&&&&this._img&=&new&Image();//图片对象&&&&this._style&=&{};//备份样式&&&&this._x&=&this._y&=&<span style="color: #;//水平/垂直变换参数&&&&this._radian&=&<span style="color: #;//旋转變换参数&&&&this._support&=&false;//是否支持变换&&&&this._init&=&this._load&=&this._show&=&this._dispose&=&$$.emptyF&&&&&&&&var&opt&=&this._setOptions(options);&&&&&&&&this._zoom&=&opt.&&&&&&&&this.onPreLoad&=&opt.onPreL&&&&this.onLoad&=&opt.onL&&&&this.onError&=&opt.onE&&&&&&&&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:&&&&&&&&.<span style="color: #,//缩放比率&&&&&&&&onPreLoad:&&&&function(){},//图片加载前执行&&&&&&&&onLoad:&&&&&&&&function(){},//图片加载后执行&&&&&&&&onError:&&&&function(err){}//出错时執行&&&&};&&&&return&$$.extend(this.options,&options&||&{});&&},&&//模式设置&&_initMode:&function()&{&&&&var&modes&=&ImageTrans.&&&&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&=&this._LOAD&);&&&&&&&&img.onerror&||&(&img.onerror&=&function(){&oThis.onError("err&image");&}&);&&&&&&&&img.style.visibility&=&"hidden";&&&&&&&&this.onPreLoad();&&&&&&&&img.src&=&&&&&}&&},&&//重置&&reset:&function()&{&&&&if&(&this._support&)&{&&&&&&&&this._x&=&this._y&=&<span style="color: #;&this._radian&=&<span style="color: #;&&&&&&&&this._show();&&&&}&&},&&//销毁程序&&dispose:&function()&{&&&&if&(&this._support&)&{&&&&&&&&this._dispose();&&&&&&&&$$CE.fireEvent(&this,&"dispose"&);&&&&&&&&$$D.setStyle(&this._container,&this._style&);//恢复樣式&&&&&&&&this._container&=&this._img&=&this._img.onload&=&this._img.onerror&=&this._LOAD&=&null;&&&&}&&}};//变换模式ImageTrans.modes&=&function(){&&&&var&css3T//ccs3变换样式&&&&//初始化图片对象函数&&&&function&initImg(img,&container)&{&&&&&&&&$$D.setStyle(&img,&{&&&&&&&&&&&&position:&"absolute",&&&&&&&&&&&&border:&<span style="color: #,&padding:&<span style="color: #,&margin:&<span style="color: #,&width:&"auto",&height:&"auto",//重置样式&&&&&&&&&&&&visibility:&"hidden"//加载前隐藏&&&&&&&&});&&&&&&&&container.appendChild(&img&);&&&&}&&&&//获取变换参数函数&&&&function&getMatrix(radian,&x,&y)&{&&&&&&&&var&Cos&=&Math.cos(radian),&Sin&=&Math.sin(radian);&&&&&&&&return&{&&&&&&&&&&&&M11:&Cos&*&x,&M12:-Sin&*&y,&&&&&&&&&&&&M21:&Sin&*&x,&M22:&Cos&*&y&&&&&&&&};&&&&}&&&&return&{&&&&&&&&css3:&{//css3设置&&&&&&&&&&&&support:&function(){&&&&&&&&&&&&&&&&var&style&=&document.createElement("div").&&&&&&&&&&&&&&&&return&$$A.some(&&&&&&&&&&&&&&&&&&&&[&"transform",&"MozTransform",&"webkitTransform",&"OTransform"&],&&&&&&&&&&&&&&&&&&&&function(css){&if&(&css&in&style&)&{&&&&&&&&&&&&&&&&&&&&&&&&css3Transform&=&&return&true;&&&&&&&&&&&&&&&&&&&&}});&&&&&&&&&&&&}(),&&&&&&&&&&&&init:&function()&{&initImg(&this._img,&this._container&);&},&&&&&&&&&&&&load:&function(){&&&&&&&&&&&&&&&&var&img&=&this._&&&&&&&&&&&&&&&&$$D.setStyle(&img,&{//居中&&&&&&&&&&&&&&&&&&&&top:&(&this._clientHeight&-&img.height&)&/&<span style="color: #&+&"px",&&&&&&&&&&&&&&&&&&&&left:&(&this._clientWidth&-&img.width&)&/&<span style="color: #&+&"px",&&&&&&&&&&&&&&&&&&&&visibility:&"visible"&&&&&&&&&&&&&&&&});&&&&&&&&&&&&},&&&&&&&&&&&&show:&function()&{&&&&&&&&&&&&&&&&var&matrix&=&getMatrix(&this._radian,&this._y,&this._x&);&&&&&&&&&&&&&&&&//設置变形样式&&&&&&&&&&&&&&&&this._img.style[&css3Transform&]&=&"matrix("&&&&&&&&&&&&&&&&&&&&+&matrix.M11&+&","&+&matrix.M21&+&","&&&&&&&&&&&&&&&&&&&&+&matrix.M12&+&","&+&matrix.M22&+&",&0,&0)";&&&&&&&&&&&&},&&&&&&&&&&&&dispose:&function(){&this._container.removeChild(this._img);&}&&&&&&&&},&&&&&&&&filter:&{//滤镜设置&&&&&&&&&&&&support:&function(){&return&"filters"&in&document.createElement("div");&}(),&&&&&&&&&&&&init:&function()&{&&&&&&&&&&&&&&&&initImg(&this._img,&this._container&);&&&&&&&&&&&&&&&&//设置滤镜&&&&&&&&&&&&&&&&this._img.style.filter&=&"progid:DXImageTransform.Microsoft.Matrix(SizingMethod='auto&expand')";&&&&&&&&&&&&},&&&&&&&&&&&&load:&function(){&&&&&&&&&&&&&&&&this._img.onload&=&null;//防止ie重复加载gif嘚bug&&&&&&&&&&&&&&&&this._img.style.visibility&=&"visible";&&&&&&&&&&&&},&&&&&&&&&&&&show:&function()&{&&&&&&&&&&&&&&&&var&img&=&this._&&&&&&&&&&&&&&&&//设置滤镜&&&&&&&&&&&&&&&&$$.extend(&&&&&&&&&&&&&&&&&&&&img.filters.item("DXImageTransform.Microsoft.Matrix"),&&&&&&&&&&&&&&&&&&&&getMatrix(&this._radian,&this._y,&this._x&)&&&&&&&&&&&&&&&&);&&&&&&&&&&&&&&&&//保持居中&&&&&&&&&&&&&&&&img.style.top&=&(&this._clientHeight&-&img.offsetHeight&)&/&<span style="color: #&+&"px";&&&&&&&&&&&&&&&&img.style.left&=&(&this._clientWidth&-&img.offsetWidth&)&/&<span style="color: #&+&"px";&&&&&&&&&&&&},&&&&&&&&&&&&dispose:&function(){&this._container.removeChild(this._img);&}&&&&&&&&},&&&&&&&&canvas:&{//canvas设置&&&&&&&&&&&&support:&function(){&return&"getContext"&in&document.createElement('canvas');&}(),&&&&&&&&&&&&init:&function()&{&&&&&&&&&&&&&&&&var&canvas&=&this._canvas&=&document.createElement('canvas'),&&&&&&&&&&&&&&&&&&&&context&=&this._context&=&canvas.getContext('<span style="color: #d');&&&&&&&&&&&&&&&&//样式设置&&&&&&&&&&&&&&&&$$D.setStyle(&canvas,&{&position:&"absolute",&left:&<span style="color: #,&top:&<span style="color: #&}&);&&&&&&&&&&&&&&&&canvas.width&=&this._clientW&canvas.height&=&this._clientH&&&&&&&&&&&&&&&&this._container.appendChild(canvas);&&&&&&&&&&&&},&&&&&&&&&&&&show:&function(){&&&&&&&&&&&&&&&&var&img&=&this._img,&context&=&this._context,&&&&&&&&&&&&&&&&&&&&clientWidth&=&this._clientWidth,&clientHeight&=&this._clientH&&&&&&&&&&&&&&&&//canvas变换&&&&&&&&&&&&&&&&context.save();&&&&&&&&&&&&&&&&context.clearRect(&<span style="color: #,&<span style="color: #,&clientWidth,&clientHeight&);//清空内嫆&&&&&&&&&&&&&&&&context.translate(&clientWidth&/&<span style="color: #&,&clientHeight&/&<span style="color: #&);//中心坐标&&&&&&&&&&&&&&&&context.rotate(&this._radian&);//旋转&&&&&&&&&&&&&&&&context.scale(&this._y,&this._x&);//缩放&&&&&&&&&&&&&&&&context.drawImage(&img,&-img.width&/&<span style="color: #,&-img.height&/&<span style="color: #&);//居中画图&&&&&&&&&&&&&&&&context.restore();&&&&&&&&&&&&},&&&&&&&&&&&&dispose:&function(){&&&&&&&&&&&&&&&&this._container.removeChild(&this._canvas&);&&&&&&&&&&&&&&&&this._canvas&=&this._context&=&null;&&&&&&&&&&&&}&&&&&&&&}&&&&};}();//变换方法ImageTrans.transforms&=&{&&//垂直翻轉&&vertical:&function()&{&&&&this._radian&=&Math.PI&-&this._&this._y&*=&-<span style="color: #;&&},&&//水平翻转&&horizontal:&function()&{&&&&this._radian&=&Math.PI&-&this._&this._x&*=&-<span style="color: #;&&},&&//根据弧度旋转&&rotate:&function(radian)&{&this._radian&=&&},&&//向左转90度&&left:&function()&{&this._radian&-=&Math.PI/<span style="color: #;&},&&//向右转90度&&right:&function()&{&this._radian&+=&Math.PI/<span style="color: #;&},&&//根據角度旋转&&rotatebydegress:&function(degress)&{&this._radian&=&degress&*&Math.PI/<span style="color: #0;&},&&//缩放&&scale:&function&()&{&&&&function&getZoom(scale,&zoom)&{&&&&&&&&return&&&&scale&&&<span style="color: #&&&&scale&&-zoom&?&zoom&:&&&&&&&&&&&&&&&&scale&&&<span style="color: #&&&&scale&&&zoom&?-zoom&:&<span style="color: #;&&&&}&&&&return&function(zoom)&{&if(&zoom&){&&&&&&&&var&hZoom&=&getZoom(&this._y,&zoom&),&vZoom&=&getZoom(&this._x,&zoom&);&&&&&&&&if&(&hZoom&&&&vZoom&)&{&&&&&&&&&&&&this._y&+=&hZ&this._x&+=&vZ&&&&&&&&}&&&&}}&&}(),&&//放大&&zoomin:&function()&{&this.scale(&Math.abs(this._zoom)&);&},&&//缩小&&zoomout:&function()&{&this.scale(&-Math.abs(this._zoom)&);&}};
拖动旋转扩展
ImageTrans.prototype._initialize&=&(function(){&&&&var&init&=&ImageTrans.prototype._initialize,&&&&&&&&methods&=&{&&&&&&&&&&&&"init":&function(){&&&&&&&&&&&&&&&&this._mrX&=&this._mrY&=&this._mrRadian&=&<span style="color: #;&&&&&&&&&&&&&&&&this._mrSTART&=&$$F.bind(&start,&this&);&&&&&&&&&&&&&&&&this._mrMOVE&=&$$F.bind(&move,&this&);&&&&&&&&&&&&&&&&this._mrSTOP&=&$$F.bind(&stop,&this&);&&&&&&&&&&&&},&&&&&&&&&&&&"initContainer":&function(){&&&&&&&&&&&&&&&&$$E.addEvent(&this._container,&"mousedown",&this._mrSTART&);&&&&&&&&&&&&},&&&&&&&&&&&&"dispose":&function(){&&&&&&&&&&&&&&&&$$E.removeEvent(&this._container,&"mousedown",&this._mrSTART&);&&&&&&&&&&&&&&&&this._mrSTOP();&&&&&&&&&&&&&&&&this._mrSTART&=&this._mrMOVE&=&this._mrSTOP&=&null;&&&&&&&&&&&&}&&&&&&&&};&&&&//开始函數&&&&function&start(e){&&&&&&&&var&rect&=&$$D.clientRect(&this._container&);&&&&&&&&this._mrX&=&rect.left&+&this._clientWidth&/&<span style="color: #;&&&&&&&&this._mrY&=&rect.top&+&this._clientHeight&/&<span style="color: #;&&&&&&&&this._mrRadian&=&Math.atan2(&e.clientY&-&this._mrY,&e.clientX&-&this._mrX&)&-&this._&&&&&&&&$$E.addEvent(&document,&"mousemove",&this._mrMOVE&);&&&&&&&&$$E.addEvent(&document,&"mouseup",&this._mrSTOP&);&&&&&&&&if&(&$$B.ie&)&{&&&&&&&&&&&&var&container&=&this._&&&&&&&&&&&&$$E.addEvent(&container,&"losecapture",&this._mrSTOP&);&&&&&&&&&&&&container.setCapture();&&&&&&&&}&else&{&&&&&&&&&&&&$$E.addEvent(&window,&"blur",&this._mrSTOP&);&&&&&&&&&&&&e.preventDefault();&&&&&&&&}&&&&};&&&&//拖动函数&&&&function&move(e){&&&&&&&&this.rotate(&Math.atan2(&e.clientY&-&this._mrY,&e.clientX&-&this._mrX&)&-&this._mrRadian&);&&&&&&&&window.getSelection&?&window.getSelection().removeAllRanges()&:&document.selection.empty();&&&&};&&&&//停止函数&&&&function&stop(){&&&&&&&&$$E.removeEvent(&document,&"mousemove",&this._mrMOVE&);&&&&&&&&$$E.removeEvent(&document,&"mouseup",&this._mrSTOP&);&&&&&&&&if&(&$$B.ie&)&{&&&&&&&&&&&&var&container&=&this._&&&&&&&&&&&&$$E.removeEvent(&container,&"losecapture",&this._mrSTOP&);&&&&&&&&&&&&container.releaseCapture();&&&&&&&&}&else&{&&&&&&&&&&&&$$E.removeEvent(&window,&"blur",&this._mrSTOP&);&&&&&&&&};&&&&};&&&&return&function(){&&&&&&&&var&options&=&arguments[<span style="color: #];&&&&&&&&if&(&!options&||&options.mouseRotate&!==&false&)&{&&&&&&&&&&&&//扩展钩子&&&&&&&&&&&&$$A.forEach(&methods,&function(&method,&name&){&&&&&&&&&&&&&&&&$$CE.addEvent(&this,&name,&method&);&&&&&&&&&&&&},&this&);&&&&&&&&}&&&&&&&&init.apply(&this,&arguments&);&&&&}})();
滚轮缩放扩展&
ImageTrans.prototype._initialize&=&(function(){&&&&var&init&=&ImageTrans.prototype._initialize,&&&&&&&&mousewheel&=&$$B.firefox&?&"DOMMouseScroll"&:&"mousewheel",&&&&&&&&methods&=&{&&&&&&&&&&&&"init":&function(){&&&&&&&&&&&&&&&&this._mzZoom&=&$$F.bind(&zoom,&this&);&&&&&&&&&&&&},&&&&&&&&&&&&"initContainer":&function(){&&&&&&&&&&&&&&&&$$E.addEvent(&this._container,&mousewheel,&this._mzZoom&);&&&&&&&&&&&&},&&&&&&&&&&&&"dispose":&function(){&&&&&&&&&&&&&&&&$$E.removeEvent(&this._container,&mousewheel,&this._mzZoom&);&&&&&&&&&&&&&&&&this._mzZoom&=&null;&&&&&&&&&&&&}&&&&&&&&};&&&&//缩放函数&&&&function&zoom(e){&&&&&&&&this.scale((&&&&&&&&&&&&e.wheelDelta&?&e.wheelDelta&/&(-<span style="color: #0)&:&(e.detail&||&<span style="color: #)&/&<span style="color: #&&&&&&&&)&*&Math.abs(this._zoom)&);&&&&&&&&e.preventDefault();&&&&};&&&&return&function(){&&&&&&&&var&options&=&arguments[<span style="color: #];&&&&&&&&if&(&!options&||&options.mouseZoom&!==&false&)&{&&&&&&&&&&&&//扩展钩子&&&&&&&&&&&&$$A.forEach(&methods,&function(&method,&name&){&&&&&&&&&&&&&&&&$$CE.addEvent(&this,&name,&method&);&&&&&&&&&&&&},&this&);&&&&&&&&}&&&&&&&&init.apply(&this,&arguments&);&&&&}})();
阅读(...) 评论()