自上一個版本的圖片切割效果出來後，雖然也經常看到“框架開發這個如何如何容易”之類的評論，但也受到很多人的肯定，小弟在此感謝大家的支持。
上一個版本由於是初次接觸這類效果，而且是三個大功能一起開發，能力所限，所以僅僅是實現了效果就完成了。
近來我把其中的 拖放效果 和 縮放效果 單獨出來研究，經過整理和完善，再套進切割效果，個人感覺效果已經不錯了。
要說明的是這個只是一個效果，並不是真正的切割圖片，要獲取真正的切割圖片請參考 圖片切割系統 。
效果預覽請看這裡
完整實例下載
代碼太多貼不出來，只好給個效果圖：
程序說明
這個效果主要分三個部分：層的拖放、層的縮放、圖片切割（包括預覽）。
其中 層的拖放 和 層的縮放 我已經在其他兩篇文章中有詳細說明，這裡就說說圖片切割這部分吧。
圖片切割
關於圖片切割的設計，有三個方法：
- 把圖片設為背景圖，通過設置背景圖的位置來實現，但這樣的缺點是只能按圖片的正常比例實現，不夠靈活；
- 把圖片放到切割對象裡面，通過設置圖片的top和left實現，這個方法是可行，但下面有更簡單的方法實現；
- 通過設置圖片的clip來實現。
這裡介紹方法3的實現方法，這個方法是從當年“珍藏”的代碼中看到的，先說說clip：
clip的作用是“檢索或設置對象的可視區域。可視區域外的部分是透明的。”
依據上-右-下-左的順序提供自對象左上角為(0,0)坐標計算的四個偏移數值來剪切。
例如：
div { position:absolute; width:60px; height:60px; clip:rect(0 20 50 10); }
注意position:absolute的設置是必須的（詳細看手冊）。
下面說說具體實現原理：
首先需要一個容器(_Container)，容器裡面會插入三個層：
- 底圖層(_layBase)：那個半透明的圖片；
- 切割層(_layCropper)：正常顯示的那個部分；
- 控制層(_layHandle)：就是控制顯示的那個部分。
其中為了底圖層和切割層是程序自動創建的圖片，控制層是自己定義的層（程序中是一個div）。
底圖層和切割層必須完全重合，程序中把這兩個層都絕對定位到了左上角：
this._layBase.style.top = this._layBase.style.left = this._layCropper.style.top = this._layCropper.style.left = 0;
層疊順序也要設置一下保證各層順序。
下面說說各部分的作用：
- 容器：
除了容器本身的作用，通過設置其背景色來設置透明的漸變色，由於圖片本身沒有背景色所以要通過容器來設置； - 底圖層：
在容器最底部，作用是顯示非選擇區域的圖片，透明效果就是在這層設置； - 切割層：
最關鍵的一個層，在底圖層和控制層之間，在這個層通過clip設置其可視區域來實現切割圖片的效果； - 控制層：
位於頂部，拖放(_drag)和縮放(_resize)效果就是在這個層實現，根據其拖放和縮放的結果控制切割層的切割效果。
這裡要注意的是控制層的_drag拖放效果的Transparent要設為true（詳細看拖放效果的透明背景bug部分）。
要使用縮放需要把Resize設為true，並設置各個拖拉對象，程序通過_resize設置縮放的比例和最少范圍（詳細看拖拉縮放效果）。
下面說說控制層如何控制切割效果：
控制層的拖放和縮放過程中加入了SetPos設置切割樣式程序，在SetPos程序中根據控制層的樣式設置切割層的可視區域范圍：
var p = this.GetPos();
this._layCropper.style.clip = "rect(" + p.Top + "px " + (p.Left + p.Width) + "px " + (p.Top + p.Height) + "px " + p.Left + "px)";
其中GetPos程序，它可以把當前控制層的樣式參數作為一個對象返回：
with(this._layHandle){
return { Top: offsetTop, Left: offsetLeft, Width: offsetWidth, Height: offsetHeight }
}
如果理解了的話就會覺得其實原理挺簡單的，不過要想出來還是要一定創意才行，為想出這個方法的人致敬！
切割預覽
預覽效果需要設置Preview屬性為預覽容器對象，程序會自動給容器插入一個預覽對象（圖片）。
預覽效果效果的關鍵在於如何根據控制層的數據來給預覽對象定位，這個主要在SetPreview預覽效果程序中處理。
首先根據控制層的高寬比置預覽對象顯示的寬和高（不是圖片本身的寬高哦），這裡可以用GetSize程序獲取：