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