用react模仿知乎的用户头像裁剪组件
前段时间刷知乎的时候,更换换了下头像,突然发现知乎头像编辑器很简洁酷炫,于是乎就用react尝试模仿做一个组件。
![06139b9f8b24833c9be559eaa1b31214.gif](https://i-blog.csdnimg.cn/blog_migrate/cc67daa6c4b7826c624b47d7cff87c7c.gif)
知乎上的这个是用canvas处理的,但是用div做也是可以,简单的布局一下,其实就是用几个div而已,但是呢,有个点我这里的。阴影层下的图片跟清晰的图片是两张图片,只是用top,left定位让这两张图片看起来像一张图片。
![5671dc7200c4264a724ec60719e0658f.png](https://i-blog.csdnimg.cn/blog_migrate/41346eabce93b502fd28d200e57cce7c.jpeg)
这个组件首先是要用到拖拽的功能,网上找的包感觉都不太合适,于是自己就简单封装了一个,现在已经发布到npm(react-simple-draggable),githup地址。
![c2244898a3d23f44d8749b302b50c885.gif](https://i-blog.csdnimg.cn/blog_migrate/184a3ded0d493a95422857c77c6d45e5.gif)
由于我封装的拖拽组件可以限定的拖拽的区域,所以就可以很容易的动态设置,拖拽显示的无非就是图片大小的区域,初始化的时候,规定宽或者高是100%,高度或者宽度自适应,因为图片为长方形的时候,有横向的和竖向的,我们可以一开始获取图片的宽高,判断是横向的还是竖向的
![cef39d77b2c3d364c33af5dfffd689c2.png](https://i-blog.csdnimg.cn/blog_migrate/42f6284ba815bb3b449d842dc0615a52.jpeg)
除此之外,还要获取到图片的真实大小的size,因为要是提交的使用总不能把,‘100%’,‘auto’这些提交到后端。
![98c43b050a6a0a7e618a6d1ca3623d23.png](https://i-blog.csdnimg.cn/blog_migrate/b84377bdb8c2a3a782dd914130b931e5.jpeg)
完成初始化的逻辑并不太复杂,下面到放大缩小的逻辑了。放大缩小的逻辑其实也很简单,无非就是把放大缩小的比例乘于原始的宽度,但是放大缩小后的图片的可拖拽区域也要发生变化:
![034c28db20d7f25b244b934264c307a2.png](https://i-blog.csdnimg.cn/blog_migrate/eb08182dda0a888c271ee9c8a8e2ae3d.jpeg)
至于为什么加上要用80(图片的中点)去乘于比值的差(preRatio是前一次拖拽的比例)是为了让图片放大缩小是以图片中心的位置为原点,这样视觉效果会好看很多。此外,这里还处理了一些特殊的情况,比如说,缩放的时候,图片的位置可能会不在可视区的区域内,所以要做一些限制,当left的绝对值小于图片的宽度时,就是偏离了可视区域,这里要做一下修正。
如果想使用这个组件可以clone下来,参考demo中的例子,把lib下的文件复制到你的项目中就可以使用了(这个组件已经打包好了),但是出现问题作者概不负责- -!您也可以基于作者的基础再做修改(src文件夹下),每次修改记得npm run build(npm start 是打包demo) 打包下哦!
这个小组件已经上传到githup上了,这里是demo的地址,这里是githup的地址,欢迎提issue!路过希望帮忙点个star哦!
日积月累,一起成长!