基於vue的cropper插件編寫分享

目錄

• 簡介
• 實現功能
• 實現原理

github地址：https://github.com/yinzhida/vue-crop
git clone： https://github.com/yinzhida/vue-crop.git

這個小項目最近更新到了第2版，雖然還有不少不足，仍是分享給你們。

簡介

vue-crop是一個用於標記矩形選框位置的小插件（相似於jcrop）。不一樣於現有的大部分cropper的地方在於：它不與圖片裁剪功能耦合，而是更專一於標記選框位置。這使它能夠在更多的標記需求中獲得應用。好比：圖像/視頻切割，繪製矩形標記。

實現功能

功能包括，繪製矩形選框，設定選區的最大最小寬高，自定義比例繪製等等。

實現原理

乍一看去，這個插件的功能仍是比較簡單。可是實際編寫的時候發現仍是有一些小的技巧的。好比，如何定義選區，以及如何定義用戶拖拽選區的行爲：

// horizontal 簡寫h 表明橫向， vertical 簡寫v 表明縱向
    // 分紅兩路，一路先橫着走，而後豎着走，另一路先豎着走，再橫着走，
    // 最後都從start到達end
    // x1,y1  hv1    hv2
    // 口-----口-----口
    // |start        |
    // |             |
    // 口vh1         口 hv3
    // |             |
    // |             |
    // 口-----口-----口 end
    // vh2    vh3    x2,y2

在這種起點與終點設定的基礎上，肯定等比例縮放的默認方向時，就須要識別出固定方向（默認修改：右、下）的座標名稱，這個過程比較複雜。第2版的修改主要是增長了每次用戶拖動以修改選區時，對選框起點和終點進行重排的操做。重排保證了用戶拖拽的方向始終爲終點所在的方向，下降了編程的複雜度。如上圖，用戶拖拽hv2之後，則重排以下：

// 重排後用戶拖拽的點只改變終點的方向。
    // vh2    vh3   end
    // 口-----口-----口x2,y2
    // |             |
    // |             |
    // 口vh1         口 hv3
    // |             |
    // |x1,y1        |
    // 口-----口-----口 
    // start  hv1    hv2

這樣設定之後，每次修改，須要校驗的就只有x2,y2這兩點的座標。
對此插件有興趣的同窗能夠在github的項目中交流。