一句话总结
超丝滑拖拽旋转库，16点位，带边界检测，圆角控制，动态位置指示器，拖拽旋转无抖动，动态箭头，完全开源拖拽库，坐标精准，旋转后，坐标始终为左上角那个点的坐标
前言
目前拖拖拽拽的项目非常流行
比如低代码，画板，视频剪辑，图片裁剪，封面制作，操作交互等等。
而这些离不开前端底层的拖拽框架
基于canvas实现的拖拽框架，非常丝滑，自由度高，但是做一些复杂业务难度较大
所以使用div+css+js实现了一款16点拖拽旋转的库
直没有耐心看文章的同学，可以直接访问：ddr.mx2d.cn/
特性一：16点位
我们来看看16个点分别是哪些
- 上下左右四条边算4个点，可调整大小
- 4个顶点可以拖拽，可同时调整两条边的大小
- 顶点边缘有4个点，可拖拽旋转
- 内置4个点可调整圆角大小（默认不开启）
特性二：旋转无抖动
无论是高速拖拽，还是旋转后拖拽，都没有抖动，非常丝滑。
特性三：支持旋转后限制出界
顾名思义，禁止元素超出父容器。
无论是旋转前，还是旋转后，都不会出界
旋转前，我们能用AABB来实现边界检测，很轻松很惬意
而旋转后，变成了顶点检测（OBB），难度的性质瞬间发生了质变，丝毫不亚于前面的旋转无抖
无奈，我用的是最笨的方法去做，分4个象限，每个顶点比较两条边，做了16次判断
特性四：自带指示器
这可不是一个普通的指示器，而是一个动态的指示器
如果当前在拖拽，则显示坐标
如果是调整大小，则显示宽高
如果是旋转则显示度数
厉害吧,跟达文西学的。
当然，不喜欢可以关闭，把参数从true改成false，就这么简单.
特性五：支持拖拽圆角
这个配置默认是关闭的
只有在激活的状态才会显示4个控制点
由于背景是蓝色，而控制点也是蓝色，所以看的不是很清楚（见谅）
特性六：动态箭头方向
一句话来说，让鼠标的方向跟随矩形边的方向。
让鼠标始终和四条边处于垂直的状态
那你可能想问，这有什么用，没这个功能不照样拖拖拽拽
所以说，骑过歪头自行车吗？
如果没有做这个功能，大致情况如下吧
结语
由于时间比较紧张，所以没有封装成npm的包
且仅有vue3版本，直接把这个库当成一个组件用就好了
