利用filter进行图片的旋转

在高级浏览器里面可以利用css3实现图片的旋转,可是对于IE来讲,需要利用filter属性。。

利用filter进行旋转:

(1)如果只用旋转90度,那么可以直接用BasicImage(rotation=参数)来实现,其中参数为:

        0:不旋转;1:90 ;2:180度;3:270

        例子,旋转-90度,那么代码如下:

        IE: filter:progid:DXImageTransform.Microsoft.BasicImage(rotation=3);

        支持CSS3的:-webkit-transform:rotate(-90deg); -moz-transform:rotate(-90deg); -o-transform:rotate(-90deg);

(2)如果旋转的角度任意,那么需要利用Matrix,设置其中的M11,M12,M21,M22四个值,他们分别表示水平旋转和垂直旋转的值。按照图片旋转的算法原理,

   M11 = cos(度数) ,M12 = -sin(度数),M13= sin(度数),M14=cos(度数)

         <script>

          var deg2radians = Math.PI / 180; //(度数与弧度的转化)
          var rad = deg * deg2radians; //deg是需要旋转的度数
          var sin = Math.sin(rad);
          var cos = Math.cos(rad);

          //设置css属性

         

          obj.css({
                'filter':[
        'progid:DXImageTransform.Microsoft.Matrix(M11="',
              cos,
            '", M12="',
              -sin,
            '", M21="',
              sin,
            '", M22="',
              cos,
            '", sizingMethod="auto expand")'
        ].join(''),
     'left': l+(w-h)/2+'px',
     'top':t-(w-h)/2+'px'
    });

         </script>

其中红色的两行是针对IE浏览器做的对图片的调整(ie6,7,8,9通过测试),由于filter在做图片旋转的时候,坐标取的是图片坐标系,即为图片的左上角,而CSS3的rotate进行了转换,最后看到的图片是按数学坐标系,即图片的中心位置进行的旋转。所以为了保证在所有浏览器中的效果一直,需要在IE中,进行图片的移动。

l:对象的left值(相对于父元素)

t:对象的top值(相对于父元素)

w:对象的宽度

h:对象的高度

由于利用了left,top来进行图片的移动,所以进行旋转的图片需要设置position:absolute属性。这样才能使得left值和top值有效。

最后script代码中的css的设置方法利用了QWrap提供的接口。

 

ps:

图片在窗口边缘时,旋转会导致图片溢出窗口,例如

 

 旋转后:

 

 PS:

在ie 中,每旋转一次,得到的图片宽度和高度都会随着图片的旋转而变化。如果需要连续的旋转,就需要考虑到这点。

例如,一个正常的图片宽:500px,高:400px。在ff,chrom浏览器中,用css3旋转,不管旋转多少度,得到的图片的宽度依然是500px,高度是400px

而在ie中,旋转90度以后,重新获得图片的高度为500px,宽度为400px。这就造成上面介绍的在filter中重新设置图片的l,t值出现误差,最后的解决方法是

/*比较原始图片的宽度和高度值得大小,从而设置不同的left和top值*/

var w = img.w;//每次旋转重新得到图片的宽度

var h = img.h;//每次旋转重新得到图片的高度

var ll = W > H ? l+(w-h)/2+'px': l-Math.abs((w-h)/2)+'px';//W:图片的原始宽度,H图片的原始高度

var tt = W > H ? t-Math.abs((w-h)/2)+'px': t-(w-h)/2+'px';

 'left': ll,

'top': tt,
'filter':[
  'progid:DXImageTransform.Microsoft.Matrix(M11="',
  cos,
    '", M12="',
  -sin,
    '", M21="',
  sin,
    '", M22="',
  cos,
    '", sizingMethod="auto expand")'
  ].join('')

posted @ 2012-02-20 15:52  hlily  阅读(2057)  评论(2编辑  收藏  举报