首页 > 代码库 > IE下及标准浏览器下的图片旋转(一)——滤镜,CSS3

IE下及标准浏览器下的图片旋转(一)——滤镜,CSS3

 

       关于图片的旋转,一般来说有3种解决方案:(1)滤镜 (2)css3 (3)canvas。接下来逐一讲解。

为了方便理解,我们主要以90度整倍数讲解,兼顾其他角度。

 

1. 滤镜(IE专属)

 

    1.1 旋转滤镜

 

    语法如下:

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

    rotation取值0(0或360度),1(90度),2(180度),3(270度)。取其他数无效。

 

    旋转90度示例:

    css:

    #box {
        width: 100px;
        height: 200px;
        background: #e678cc;
        filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=1);
    }

 

    html:

    <div id="box">我倒了</div>

 

    效果如图:

 

 

 

    1.2 矩阵滤镜Matrix

 

    语法如下:

    filter: progid:DXImageTransform.Microsoft.Matrix( enabled= bEnabled , SizingMethod= sMethod , FilterType= sType , Dx= fDx , Dy= fDy , M11= fM11 , M12= fM12 , M21= fM21 , M22= fM22 )

 

    以上是完整参数,我们只要关注其中几个就可以了,简化下:

 

    filter:progid:DXImageTransform.Microsoft.Matrix(M11=cos(roation),M12=-sin(roation),M21=sin(roation),M22=cos(roation),SizingMethod=‘auto expand‘);

 

       SizingMethod取值有两个:clip to original(默认,容器不改变尺寸,超出裁切)和auto expand(容器改变尺寸以适应目标图像),一般我们会使用auto expand。

 

       M11,M12,M21,M22组成一个2×2的矩阵,通过计算着四个值可以进行任意角度旋转,并且旋转放大都由这四个参数控制。当然不用纠结到底是怎么回事,因为我也不懂,数学没学好,呵呵,我们要做的就是用旋转角度替换roation就可以了,需要注意的是,这个旋转角度不是角度数,而是弧度数,所以我们需要将旋转的角度度数乘以 0.017453293 (2PI/360)再套进去。例如旋转45度,M11=cos(45*0.017453293),M12=-sin(45*0.017453293),M21=sin(45*0.017453293,M22=cos(45*0.017453293)。

 

    示例:

    css:

    #box {
        width: 100px;
        height: 200px;
        background: #e678cc;
        filter:progid:DXImageTransform.Microsoft.Matrix(M11=0.7071067659112366,M12=-0.7071067964618581,M21=0.7071067964618581,M22=0.7071067659112366,SizingMethod=‘auto expand‘);
    }

 

    html:

    <div id="box">我倒了</div>

 

    效果如图:

 

 

 

       如果我们去掉SizingMethod属性,也就是使用默认clip to original,超出的部分会被裁切掉,如下图:

 

 

       如果我们想要在原基础上放大一倍,只需要将M11,M12,M21,M22的值乘以2(M11=1.414,M12=-1.414,M21=1.414,M22=1.414),反之除以2(M11=0.354,M12=-0.354,M21=0.354,M22=0.354)即可。

 

       滤镜的特性:

 

       1. 旋转贴着原轮廓的上边和左边,如下图:

 

 

       能不能围绕中心旋转呢?当然可以,我们看到完整的Matrix参数中有Dx= fDx , Dy= fDy这两项,这两个值描述了一个点,图形围绕这个点进行旋转。理论上我们可以指定任一点为原点,不过考虑到实际需要和大多数同学数学都不大好,我们只要知道围绕中心点旋转就好了。公式如下:

 

       dx=-width/2*cos(roation)+height/2*sin(roation)+width/2,
       dy=-width/2*sin(roation)-height/2*cos(roation)+height/2

 

       滤镜写法如下:

       filter: progid:DXImageTransform.Microsoft.Matrix( Dx= fDx , Dy= fDy , M11= fM11 , M12= fM12 , M21= fM21 , M22= fM22 );


       m11,m12,m21,m22的算法与前面说的一样。

 

       注:我们看到没有设置SizingMethod值,因为微软官方说明当SizingMethod值为auto expand时Dx Dy失效。并且旋转后超出的原大小的部分会被隐藏掉,如果想要全部显示,我们需要对旋转后的图像进行缩放,或者留出足够的空间。

 

       比如我们对一个图像进行90旋转:

 

       (1) 将90度转化为弧度

          90 * (2 * Math.PI / 360) = 1.5707963267948966

 

       (2) 计算cos(roation)和sin(roation)的值

         cos(1.5707963267948966)= 6.123233995736766e-17

         sin(1.5707963267948966)= 6.123233995736766e-17

 

       (3) 计算Dx和Dy的值

       假定我们的图片宽300px,高200px,带入公式:

 

       dx=-width/2*cos(roation)+height/2*sin(roation)+width/2

       dx= -300/2*6.123233995736766e-17 + 200 / 2 * 6.123233995736766e-17 + 300/2=250

 

       dy=-width/2*sin(roation)-height/2*cos(roation)+height/2

       dy=-200/2*6.123233995736766e-17-200/2*6.123233995736766e-17+200/2=-50

 

       (4) 将以上值带入滤镜公式:

         filter: progid:DXImageTransform.Microsoft.Matrix( Dx= fDx , Dy= fDy , M11= fM11 , M12= fM12 , M21= fM21 , M22= fM22 );

 

       得到:

         filter: progid:DXImageTransform.Microsoft.Matrix( Dx= 250 , Dy= -50 , M11= 6.123233995736766e-17 , M12= -6.123233995736766e-17 , M21= 6.123233995736766e-17 , M22= 6.123233995736766e-17 );

 

       效果如图:

 

 

      仔细看看,是不是旋转后有点不对劲?旋转后图片好像被裁切了,所以这里有必要说下原因。先看图:

 

 

       明白了么?我们设置了围绕中心点旋转90度,滤镜旋转是在原图片所占空间中进行旋转,旋转后超出的部分默认是不显示的,如果设置了auto expand属性,容器会跟随图片变换而变换,以适应其大小,但是前面我们已经知道,使用这个属性,会导致Dx和Dy无效,有两种解决方案:一种是进行缩放。另一种是给它足够的空间(网上看到好像是padding)。我个人倾向于前一种,所以针对前一种进行讲解。

 

       我们需要做的就是讲旋转后的图像等比例缩小,使得旋转后看上去的高度与原图片所占空间的宽度一致即可,所以我们需要计算下这个比例:r = height/width,然后用这个比例分别与M11,M12,M21,M22相乘进行缩放。

 

       (1)将宽高带入获得比例: r= 200 / 300 = 2 / 3

 

       (2)将M11,M12,M21,M22分别乘以2/3带入滤镜:

 

       filter: progid:DXImageTransform.Microsoft.Matrix( Dx= 250 , Dy= -50 , M11= 4.082155997157844e-17 , M12= -4.082155997157844e-17 , M21= 4.082155997157844e-17 , M22= 4.082155997157844e-17 );

 

       OK,大功告成,看效果:

 

 

       2.旋转后对元素进行了实际改变(IE6和7,IE8和9不改变)

       注:IE高版本模拟低版本以及IETester并不准确,需要在实际环境或者独立版中测试才能发现差别。

 

       两篇参考文章:

       IE矩阵滤镜Matrix旋转与缩放及结合transform的拓展

       IE下利用Matrix滤镜实现绕中心点旋转

 

2. css3旋转属性

 

       语法: transform: rotate(Xdeg)

 

       比如我们需要旋转90度,可以这样写transform: rotate(90deg),支持负数,整数是顺时针旋转,负数时逆时针旋转,比如我们需要旋转315度,可以这样写transform: rotate(315deg),也可以这样写transform: rotate(-45deg)。以及旋转90度为例,效果如图:


 

      我们可以看到,这个属性是以中心点为原点进行旋转,并且超出部分不会像ie滤镜中心旋转那样被裁掉,保持了原大小,并且旋转不改变元素实际大小。

 

 

       这个属性是css3属性,所以需要浏览器对css3支持才有效。大多数标准浏览器以其私有属性方式支持了这个属性,所以我们依然可以使用,如下:

 

       -moz-transform: rotate(0deg);   //Firefox

       -webkit-transform: rotate(0deg);    //Chrome and Safari

       -o-transform: rotate(0deg);   //Oprea

       -ms-transform: rotate(0deg);   //IE9

 

       针对支持css3的浏览器使用transform: rotate,针对不支持css3的IE系列使用滤镜,我们就可以做出一个兼容绝大多数浏览器的图片旋转,当然这是作为我的下个插件弹出层的一部分,所以我们可以精简一下,去掉弹出层做的demo,以90度整倍数为参数旋转。

 

    示例:

    javascript:

    <script type="text/javascript" src="http://www.mamicode.com/jquery-1.8.2.min.js"></script>
    <script type="text/javascript">
    $(function () {
        /*自动计算水平垂直居中*/
        function reset () {
            $("#img_box").css({
                "position": "absolute",
                "top": "50%",
                "left": "50%",
                "z-index": "10000",
                "margin-top": function() {return -($(this).height()) / 2},
                "margin-left": function() {return -($(this).width()) / 2}
            });
        }
        
        reset();

        /*左右旋转计数器*/
        var deg = 0;
        $("#turn_r").click(function () {
            deg++;
            deg = deg > 3 ? 0 : deg;
            rotate(deg);
            return false
        });

        $("#turn_l").click(function () {
            deg--;
            deg = deg < 0 ? 3 : deg;
            rotate(deg);
            return false
        });

        /*动态增加旋转属性*/
        function rotate(i) {

            switch (i) {
                case 0:
                    $("#img_box").attr(‘style‘, ‘filter:progid:DXImageTransform.Microsoft.BasicImage(rotation=0); zoom: 1;-moz-transform: rotate(0deg); -webkit-transform: rotate(0deg); -o-transform: rotate(0deg);‘);
                    break;
                case 1:
                    $("#img_box").attr(‘style‘, ‘filter:progid:DXImageTransform.Microsoft.BasicImage(rotation=1); zoom: 1;-moz-transform: rotate(90deg); -webkit-transform: rotate(90deg); -o-transform: rotate(90deg);‘);
                    break;
                case 2:
                    $("#img_box").attr(‘style‘, ‘filter:progid:DXImageTransform.Microsoft.BasicImage(rotation=2); zoom: 1;-moz-transform: rotate(180deg); -webkit-transform: rotate(180deg); -o-transform: rotate(180deg);‘);
                    break;
                case 3:
                    $("#img_box").attr(‘style‘, ‘filter:progid:DXImageTransform.Microsoft.BasicImage(rotation=3); zoom: 1;-moz-transform: rotate(270deg); -webkit-transform: rotate(270deg); -o-transform: rotate(270deg);‘);
                    break;
            }
            reset();
        }

    })
    </script>

 

    css:

    #box {
        width: 300px;
        height: 200px;
        background: #f2f2f2;
        position: relative;
        text-align: center;
    }
    #img_box img {
        padding: 3px;
        border: 1px solid #cccccc;
        background: #fff;
    }
    #turn_l,
    #turn_r {
        display: inline-block;
        margin: 0 20px;
    }

 

    html:

    <div id="box">
        <div id="img_box"><img src="http://www.mamicode.com/aa.jpg" ></div>
        <a href="http://www.mamicode.com/" id="turn_l">向左旋转</a>
        <a href="http://www.mamicode.com/" id="turn_r">向右旋转</a>
    </div>

 

    兼容IE6-9,Firefox等,效果如图:

 

 

3. canvas

      文章过长,一篇无法保存。

      IE下及标准浏览器下的图片旋转(二)—— Canvas

 

IE下及标准浏览器下的图片旋转(一)——滤镜,CSS3