基于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的项目中交流。