基于vue的cropper插件编写分享
2024-09-01 16:10:35
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的项目中交流。
最新文章
- Odoo下拉动作列表
- Android配置----DDMS 连接真机（己ROOT)，用file explore看不到data/data文件夹的解决办法
- .NET中常见对象类型
- 【转发】查看Linux版本系统信息方法汇总
- 【BZOJ2752】【线段树】高速公路
- 一个读取propeties配置文件的工具类，线程安全的
- 关于链表的一些重要操作（Important operations on a Linked List）
- 常用在网站上的30个jQuery插件
- SqlBulkCopy 参数配置示例
- 在线生成二维码的API接口
- WinAPI 字符及字符串函数(15): CharNext、CharPrev
- AndroidManifest.xml文件解析
- beamer template
- vsftp管理脚本(CentOS6用)
- django,flask接口初试
- 【代码笔记】iOS-UIAlertView自动关闭
- sama5d3 环境检测 gpio--yk测试
- 遮罩效果 css3
- cacti启动有图无数据
- MyTools