用react模仿知乎的用户头像裁剪组件

用react模仿知乎的用户头像裁剪组件

前段时间刷知乎的时候,更换换了下头像,突然发现知乎头像编辑器很简洁酷炫,于是乎就用react尝试模仿做一个组件。

知乎上的这个是用canvas处理的,但是用div做也是可以,简单的布局一下,其实就是用几个div而已,但是呢,有个点我这里的。阴影层下的图片跟清晰的图片是两张图片,只是用top,left定位让这两张图片看起来像一张图片。




这个组件首先是要用到拖拽的功能,网上找的包感觉都不太合适,于是自己就简单封装了一个,现在已经发布到npm(react-simple-draggable),githup地址

由于我封装的拖拽组件可以限定的拖拽的区域,所以就可以很容易的动态设置,拖拽显示的无非就是图片大小的区域,初始化的时候,规定宽或者高是100%,高度或者宽度自适应,因为图片为长方形的时候,有横向的和竖向的,我们可以一开始获取图片的宽高,判断是横向的还是竖向的




除此之外,还要获取到图片的真实大小的size,因为要是提交的使用总不能把,‘100%’,‘auto’这些提交到后端。




完成初始化的逻辑并不太复杂,下面到放大缩小的逻辑了。放大缩小的逻辑其实也很简单,无非就是把放大缩小的比例乘于原始的宽度,但是放大缩小后的图片的可拖拽区域也要发生变化:




至于为什么加上要用80(图片的中点)去乘于比值的差(preRatio是前一次拖拽的比例)是为了让图片放大缩小是以图片中心的位置为原点,这样视觉效果会好看很多。此外,这里还处理了一些特殊的情况,比如说,缩放的时候,图片的位置可能会不在可视区的区域内,所以要做一些限制,当left的绝对值小于图片的宽度时,就是偏离了可视区域,这里要做一下修正。

如果想使用这个组件可以clone下来,参考demo中的例子,把lib下的文件复制到你的项目中就可以使用了(这个组件已经打包好了),但是出现问题作者概不负责- -!您也可以基于作者的基础再做修改(src文件夹下),每次修改记得npm run build(npm start 是打包demo) 打包下哦!

这个小组件已经上传到githup上了,这里是demo的地址,这里是githup的地址,欢迎提issue!路过希望帮忙点个star哦!

日积月累,一起成长!

发布于 2019-05-27