【縮放程序】

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

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

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

【邊寬獲取】

由于涉及到高度和寬度的修改，邊框?qū)挾鹊墨@取必不可少。
因為用offset取得的寬度或高度是包括了邊框?qū)挾鹊模瑂tyle中的寬度和高度是不包括邊框?qū)挾鹊模?
所以設(shè)置樣式的時候必須在offset取得的寬度或高度的基礎(chǔ)上減去邊框?qū)挾取?

那怎么取得邊框?qū)挾饶兀?
直觀的方法是通過parseInt(object.style.borderBottomWidth)來獲取，但這是錯誤的，
因為這樣只能獲取style中設(shè)置的樣式，而不能獲取class中設(shè)置的樣式。

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

【比例縮放】

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

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

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

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

【鼠標(biāo)捕獲補充】

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

最新評論