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

項(xiàng)目地址： github.com/newbieYoung… 。

特性及優(yōu)勢(shì)

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

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

示例

微信小程序示例

移動(dòng)端示例

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

可以?huà)呙瓒S碼體驗(yàn)：

或者訪(fǎng)問(wèn)以下鏈接：

newbieyoung.github.io/Simple-Crop…

PC 示例

鏈接如下：

newbieyoung.github.io/Simple-Crop…

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

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

1、屏幕坐標(biāo)系和變換基準(zhǔn)點(diǎn)

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

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

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

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

詳細(xì)計(jì)算過(guò)程可以查看 CSS3 2D Transform Matrix 。

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

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

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

其一：

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

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

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

其二：

圖中黑色矩形表示裁剪圖片，點(diǎn) A 表示裁剪框中超出裁剪圖片的某個(gè)頂點(diǎn)。

連接矩形中心點(diǎn)和判斷點(diǎn)，然后計(jì)算中心點(diǎn)和判斷點(diǎn)向量在矩形邊框向量上的投影長(zhǎng)度（L1、L2），只要兩個(gè)投影長(zhǎng)度中有任意投影長(zhǎng)度大于其投影邊框長(zhǎng)度（H1、H2）的一半即說(shuō)明該點(diǎn)在矩形外。

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

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

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

大矩形為裁剪圖片，小矩形表示裁剪框，O 表示裁剪圖片中心點(diǎn)。

4、雙指中心位移

由于默認(rèn)裁剪圖片的變換基準(zhǔn)點(diǎn)為其中心點(diǎn)，這么處理雖然計(jì)算方便，但是會(huì)對(duì)雙指縮放造成一定的困難；因?yàn)殡p指操作時(shí)雙指中心并不一定是裁剪圖片中心。

解決方案需要先求出兩個(gè)不同基準(zhǔn)點(diǎn)的位移差，然后在進(jìn)行縮放變換之后再進(jìn)行位移變換。

5、縮放適配變換

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

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