【縮放程序】

原理也很簡單，根據鼠標的坐標來設置縮放對象樣式。
除了設置width和height外，對于上邊和左邊的縮放還要設置left和top，詳細可參考代碼。

程序更重要的是結構設計，因為有八個方向又分普通和比例縮放，
要盡量抓出能重用的部分，不然程序的復雜度可想而知。
為了提高程序內函數重用度減低復雜度我做了以下設計：
1.設一個_fun程序存放縮放過程中要執(zhí)行的程序（有點像委托）；
2.計算四個樣式初始值，縮放函數修改這些初始值，最后重新設置全部樣式（為了減低復雜度不是按需修改）；
3.對于普通縮放只需要四個方向的程序就夠，像右下方向可以用執(zhí)行右邊和下邊程序代替；
4.根據比例縮放程序和普通縮放程序可重用的部分抽出了四個修正程序（用了部分程序效率來換?。?

下面是程序中比較有用的部分：

【邊寬獲取】

由于涉及到高度和寬度的修改，邊框寬度的獲取必不可少。
因為用offset取得的寬度或高度是包括了邊框寬度的，style中的寬度和高度是不包括邊框寬度的，
所以設置樣式的時候必須在offset取得的寬度或高度的基礎上減去邊框寬度。

那怎么取得邊框寬度呢？
直觀的方法是通過parseInt(object.style.borderBottomWidth)來獲取，但這是錯誤的，
因為這樣只能獲取style中設置的樣式，而不能獲取class中設置的樣式。

要取得最終樣式（實際的樣式），在ie中可使用currentStyle取得，在ff中使用document.defaultView.getComputedStyle(object, null)，
那么用下面的程序就可以獲取邊框寬度了：

【比例縮放】

比例縮放原理也很簡單，在原有縮放的基礎上，再按比例設置一次高和寬。
例如右下的比例縮放是先設置一次右邊的普通縮放取得寬度，
根據比例取得高度后執(zhí)行一次下邊的修正程序，
由于此時高度經過修正可能已經改變了，最后需要再執(zhí)行一次右邊的修正程序。

這樣的縮放是以寬度優(yōu)先的，對于上下兩個點以高度優(yōu)先會有更好的體驗，
例如對于上面的點可以： 

對于上下左右四個點，更好的體驗當然是以該點為中心縮放，
各位有興趣的話可以把這個也做出來，寫多四個修正程序對應這幾個點就行。

而最小限制，范圍限制可參照修正程序中的代碼。
程序中也使用了跟拖放差不多的釋放選擇和鼠標捕獲。

【鼠標捕獲補充】

setCapture解決了ie中鼠標捕獲的問題，但ff下的鼠標捕獲還有問題。
當層的內部沒有文本內容時，ie捕獲正常，但ff在拖放到瀏覽器外時捕獲就會失效，
暫時的解決方法只有插入文本，例如：
resize.innerHTML = "<font size='1px'>&nbsp;</font>";
各位如果有更好解決方案的話記得通知我啊。

最新評論