|
|
序一
很久之前就在一個網站的截取相片的功能中看到這個效果，也叫圖片裁剪、圖片剪切（設置一下也可以做出放大鏡等類似的效果）。
當時覺得很神奇，礙于水平有限，沒做出來。
前些日子突然想做一個透鏡效果，就突然想到了這個效果，于是找出當年“珍藏”的代碼決定一嘗所愿。
序二
自上一個版本的圖片切割效果出來后，雖然也經常看到“框架開發這個如何如何容易”之類的評論，但也受到很多人的肯定，小弟在此感謝大家的支持。
上一個版本由于是初次接觸這類效果，而且是三個大功能一起開發，能力所限，所以僅僅是實現了效果就完成了。
后來我知道這個效果叫ImageCropper，找了些這類效果參考，完善了切割的部分。
近來我把其中的拖放效果和縮放效果單獨出來研究，經過整理和完善，再套進切割效果，個人感覺效果已經不錯了。
要說明的是這個只是一個效果，并不是真正的切割圖片，要獲取真正的切割圖片請參考圖片切割系統。
瀏覽效果請參考：http://www.cnblogs.com/cloudgamer/archive/2008/07/21/ImgCropper.html
（瀏覽完效果，你一定想知道其中的奧秘吧，那就聽我細細道來吧~）
程序說明
這個效果主要分三個部分：層的拖放、層的縮放、圖片切割（包括預覽）。
其中層的拖放和層的縮放我已經在其他兩篇文章中有詳細說明，這里就說說圖片切割這部分吧。
【圖片切割】
關于圖片切割的設計，有三個方法：
1.定位四個半透明層，遮住要蓋住的部分，沒試過，感覺比較麻煩；
2.把圖片設為背景圖，通過設置背景圖的位置來實現，但這樣的缺點是只能按圖片的正常比例實現，不夠靈活；
3.把圖片放到切割對象里面，通過設置圖片的top和left實現，這個方法是可行，但下面有更簡單的方法實現；
4.通過設置圖片的clip來實現。
這里介紹方法4的實現方法，這個方法是從當年“珍藏”的代碼中看到的，先說說clip：
clip的作用是“檢索或設置對象的可視區域。可視區域外的部分是透明的。”
依據上-右-下-左的順序提供自對象左上角為(0,0)坐標計算的四個偏移數值來剪切。
例如：
it知識庫：JavaScript 圖片切割效果，轉載需保留來源！
鄭重聲明：本文版權歸原作者所有，轉載文章僅為傳播更多信息之目的，如作者信息標記有誤，請第一時間聯系我們修改或刪除，多謝。
