SimpleCrop 目前是 全網(wǎng)唯一 支持裁剪圖片任意角度旋轉(zhuǎn)、交互體驗 媲美原生客戶端 的 全平臺 圖片裁剪組件。

項目地址： github.com/newbieYoung… 。

特性及優(yōu)勢

和目前流行的圖片裁剪組件相比，其優(yōu)勢在于以下幾點：

• 裁剪圖片支持任意角度旋轉(zhuǎn)；
• 支持 Script 標(biāo)簽、微信小程序、React、Vue 等多種開發(fā)模式；
• 支持移動和 PC 設(shè)備；
• 支持邊界判斷、當(dāng)裁剪框里出現(xiàn)空白時，圖片自動吸附至完全填滿裁剪框；
• 移動端縮放以雙指中心為基準點；
• 交互體驗媲美原生客戶端。

示例

微信小程序示例

移動端示例

左側(cè)是 IOS 系統(tǒng)相冊**生的圖片裁剪功能，右側(cè)為 SimpleCrop 移動端示例。

可以掃描二維碼體驗：

或者訪問以下鏈接：

newbieyoung.github.io/Simple-Crop…

PC 示例

鏈接如下：

newbieyoung.github.io/Simple-Crop…

關(guān)鍵實現(xiàn)

要實現(xiàn) 任意角度旋轉(zhuǎn) 、 雙指中心縮放 、 邊界判斷 、 自動吸附 等功能，關(guān)鍵點如下：

1、屏幕坐標(biāo)系和變換基準點

在裁剪圖片場景中，存在兩個坐標(biāo)系，其一是裁剪圖片所代表的實際尺寸坐標(biāo)系，其二是裁剪框顯示到屏幕上所代表的屏幕坐標(biāo)系；后續(xù)進行 transform 變換計算和位置判斷時，為了計算方便，需要把裁剪圖片的尺寸以及位置從實際坐標(biāo)系轉(zhuǎn)換為屏幕坐標(biāo)系。另外當(dāng)對裁剪圖片進行 transform 變換時，變換基準點默認為其中心點，對應(yīng) CSS 的 transform-origin 為 50% 50%。

2、獲取實時坐標(biāo)

首先需要實時獲取裁剪圖片進行 CSS Transform 變換后的新坐標(biāo)，只有在實時獲取變換后的新坐標(biāo)的前提下才能結(jié)合裁剪框坐標(biāo)進行越界、吸附等判斷；

在計算 CSS Transform 變換后的新坐標(biāo)時需要注意選取的屏幕坐標(biāo)系和 CSS Transform 坐標(biāo)系的差別，比如示例中以黑色邊框中心為坐標(biāo)原點，水平向左為 X 軸正方向，垂直向上為 Y 軸正方向；但是 CSS Transform 的坐標(biāo)系垂直向下為 Y 軸正方向和上述規(guī)定的坐標(biāo)系 Y 軸正方向是相反的，因此在獲取 CSS Transform 變換矩陣之后求實時坐標(biāo)時還需要進行鏡像變換。

詳細計算過程可以查看 CSS3 2D Transform Matrix 。

3、旋轉(zhuǎn)適配縮放

裁剪圖片任意角度旋轉(zhuǎn)時需要進行適當(dāng)?shù)姆糯蟛拍鼙ＷC裁剪框不超出，因此就需要先計算裁剪框哪些點超出，然后根據(jù)超出的點計算剛好包含的放大倍數(shù)。

當(dāng)兩個矩形位置關(guān)系任意變換時計算相互之間有哪些點超出有兩種方案：

其一：

圖中左側(cè)紅色矩形代表裁剪圖片，黑色矩形代表裁剪框，如圖所示裁剪框頂點 A 超出了裁剪圖片。

連接矩形四個頂點和判斷點，然后計算四條連線之間的夾角，如果夾角之和小于 360 度，那么該判斷點在矩形外；反之如果夾角之和等于 360 度，那么該判斷點在矩形內(nèi)。

a1 + a2 + a3 + a4 < 360
b1 + b2 + b3 + b4 = 360
復(fù)制代碼

其二：

圖中黑色矩形表示裁剪圖片，點 A 表示裁剪框中超出裁剪圖片的某個頂點。

連接矩形中心點和判斷點，然后計算中心點和判斷點向量在矩形邊框向量上的投影長度（L1、L2），只要兩個投影長度中有任意投影長度大于其投影邊框長度（H1、H2）的一半即說明該點在矩形外。

另外還可以根據(jù)投影長度和其投影邊框長度的比例計算出矩形恰好包含該點的放大系數(shù)，也就是示例圖中的 S 變量。

最后旋轉(zhuǎn)圖片時除了要進行適當(dāng)?shù)姆糯?，保證裁剪框不超出以外，還可以在裁剪圖片中心點沒有變動時進行適當(dāng)?shù)目s小，去掉多余間隙，進一步提升交互體驗。

縮小系數(shù)的計算原理和放大系數(shù)的計算原理類似，均是連接判斷點和中心點，然后根據(jù)邊框投影長度計算。

大矩形為裁剪圖片，小矩形表示裁剪框，O 表示裁剪圖片中心點。

4、雙指中心位移

由于默認裁剪圖片的變換基準點為其中心點，這么處理雖然計算方便，但是會對雙指縮放造成一定的困難；因為雙指操作時雙指中心并不一定是裁剪圖片中心。

解決方案需要先求出兩個不同基準點的位移差，然后在進行縮放變換之后再進行位移變換。

5、縮放適配變換

在旋轉(zhuǎn)裁剪圖片時可以對其進行適當(dāng)?shù)梅糯蠛涂s小從而保證裁剪框不會超出裁剪圖片；但是在雙指操作縮放裁剪圖片卻不能這么做，因為適配縮放會和用戶的操作縮放沖突，因此需要采用移動裁剪圖片的方式保證裁剪框不超出裁剪圖片。

當(dāng)裁剪圖片進行位移變換之后可以包含裁剪框，就只需要計算位移向量；