IE下及標準瀏覽器下的圖片旋轉（一）——濾鏡，CSS3

標籤：style   http   io   ar   os   使用   sp   java   for   

 

       關於圖片的旋轉，一般來說有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="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="aa.jpg" ></div>
        <a href="/" id="turn_l">向左旋轉</a>
        <a href="/" id="turn_r">向右旋轉</a>
    </div>

 

    相容IE6-9，Firefox等，效果

 

 

3. canvas

      文章過長，一篇無法儲存。

      IE下及標準瀏覽器下的圖片旋轉（二）—— Canvas

 

IE下及標準瀏覽器下的圖片旋轉（一）——濾鏡，CSS3