序一

　　很久之前就在一個(gè)網(wǎng)站的截取相片的功能中看到這個(gè)效果，也叫圖片裁剪、圖片剪切（設(shè)置一下也可以做出放大鏡等類(lèi)似的效果）。
　　當(dāng)時(shí)覺(jué)得很神奇，礙于水平有限，沒(méi)做出來(lái)。
　　前些日子突然想做一個(gè)透鏡效果，就突然想到了這個(gè)效果，于是找出當(dāng)年“珍藏”的代碼決定一嘗所愿。

序二

　　自上一個(gè)版本的圖片切割效果出來(lái)后，雖然也經(jīng)常看到“框架開(kāi)發(fā)這個(gè)如何如何容易”之類(lèi)的評(píng)論，但也受到很多人的肯定，小弟在此感謝大家的支持。
　　上一個(gè)版本由于是初次接觸這類(lèi)效果，而且是三個(gè)大功能一起開(kāi)發(fā)，能力所限，所以?xún)H僅是實(shí)現(xiàn)了效果就完成了。
　　后來(lái)我知道這個(gè)效果叫ImageCropper，找了些這類(lèi)效果參考，完善了切割的部分。
　　近來(lái)我把其中的拖放效果和縮放效果單獨(dú)出來(lái)研究，經(jīng)過(guò)整理和完善，再套進(jìn)切割效果，個(gè)人感覺(jué)效果已經(jīng)不錯(cuò)了。
　　要說(shuō)明的是這個(gè)只是一個(gè)效果，并不是真正的切割圖片，要獲取真正的切割圖片請(qǐng)參考圖片切割系統(tǒng)。

　　瀏覽效果請(qǐng)參考：http://www.cnblogs.com/cloudgamer/archive/2008/07/21/ImgCropper.html

　　（瀏覽完效果，你一定想知道其中的奧秘吧，那就聽(tīng)我細(xì)細(xì)道來(lái)吧~）

程序說(shuō)明

　　這個(gè)效果主要分三個(gè)部分：層的拖放、層的縮放、圖片切割（包括預(yù)覽）。
　　其中層的拖放和層的縮放我已經(jīng)在其他兩篇文章中有詳細(xì)說(shuō)明，這里就說(shuō)說(shuō)圖片切割這部分吧。

【圖片切割】

　　關(guān)于圖片切割的設(shè)計(jì)，有三個(gè)方法：
　　1.定位四個(gè)半透明層，遮住要蓋住的部分，沒(méi)試過(guò)，感覺(jué)比較麻煩；
　　2.把圖片設(shè)為背景圖，通過(guò)設(shè)置背景圖的位置來(lái)實(shí)現(xiàn)，但這樣的缺點(diǎn)是只能按圖片的正常比例實(shí)現(xiàn)，不夠靈活；
　　3.把圖片放到切割對(duì)象里面，通過(guò)設(shè)置圖片的top和left實(shí)現(xiàn)，這個(gè)方法是可行，但下面有更簡(jiǎn)單的方法實(shí)現(xiàn)；
　　4.通過(guò)設(shè)置圖片的clip來(lái)實(shí)現(xiàn)。

　　這里介紹方法4的實(shí)現(xiàn)方法，這個(gè)方法是從當(dāng)年“珍藏”的代碼中看到的，先說(shuō)說(shuō)clip：
　　clip的作用是“檢索或設(shè)置對(duì)象的可視區(qū)域。可視區(qū)域外的部分是透明的。”
　　依據(jù)上-右-下-左的順序提供自對(duì)象左上角為(0,0)坐標(biāo)計(jì)算的四個(gè)偏移數(shù)值來(lái)剪切。
　　例如：

it知識(shí)庫(kù)：JavaScript 圖片切割效果，轉(zhuǎn)載需保留來(lái)源！

鄭重聲明：本文版權(quán)歸原作者所有，轉(zhuǎn)載文章僅為傳播更多信息之目的，如作者信息標(biāo)記有誤，請(qǐng)第一時(shí)間聯(lián)系我們修改或刪除，多謝。