圖像的旋轉縮放平移變換公式

圖像的旋轉縮放平移變換公式

在前兩天的應用中，用Flex簡單寫了一個拖動圖片縮放的ObjectHandler控件，當時的功能還比較簡單，只有縮放功能，不能平移和旋轉。太不完整了！

平移還好，旋轉一來，就有點頭疼了。旋轉必然要涉及旋轉中心點的問題。通常的狀況是縮放的中心點是圖片左上角，旋轉的中心點是圖片的中心，若是用戶每操做一次就要手動去改變一下中心點，

不只邏輯上繁瑣，也給調試帶來很大的不便，最後不只錯在哪一步不知道，連怎麼錯的都不知道！！！。

那麼，比較好的解決辦法是，指定中心點center，給定平移量shift，縮放量scale，旋轉量rotate，及圖片的原始寬高size 便可保證圖片正確顯示。（圖片默認縮放中心爲左上角）

首先，這裏咱們須要幾個簡單的數學變換，主要針對縮放和旋轉：

                                                                      

OK，想清楚了變換的過程，下面的工做就更加簡單了，套用一下公式就行：

/**
  * transforms:{
  *      shift: {x:'', y:''}
  *      rotate: '',
  *      scale: ''
  * }
  * origin: {
  *      originWidth:'',
  *      originHeight: '',
  *      originLeft: '',
  *      originTop: ''   
  * }
  *
  *
*/
private function fixTransformToCenter(center:Point, transforms:Object,  origin:Object):Object{
     var result:Object = {
          left: 0,
          top:  0,
          r:    0,
          s:    1
     };

     var ow:Number = origin.originWidth;
     var oh:Number = origin.originHeight;
     
     var oleft: Number = origin.originLeft;
     var otop: Number = origin.originTop;

     // 平移
     result.left = oleft + transforms.shift.x;
     result.top = otop + transforms.shift.y;

     // 縮放
     result.s = transforms.scale;
     result.left = (result.left - center.x) * result.s;
     result.top = (result.top - center.y) * result.s;

     // 旋轉
     result.r = tranfroms.rotate;
     var x:Number = (result.left - center.x) * cos(result.r) + (result.top - center.y) * sin(result.r);
     var y:Number = (result.top - center.y) * cos(result.r) - (result.left - center.x) * sin(result.r);

     result.left = x;
     result.top = y;

     reutrn result;
}