移动组件到指定坐标_react组件： 刮刮卡

此组件已经开发完毕，兼容pc和移动端

github地址：

dsmelon/react-scratch-perfect​github.com

例子：

刮一刮​dsmelon.github.io

讲一讲此组件的设计理念

调研了市面上的刮刮卡组件，优秀的也就那么几个，而且用起来总是少了一点功能，因此准备集大成做一款更灵活更容易使用的组件

本组件使用的是canvas画笔重叠属性。

第一步：将属性globalCompositeOperation设置为destination-out，这个意思就是当画的内容重叠时，保留不重叠的部分，重叠的部分则透明。

第二步：监听鼠标事件，开始画内容。这个有一个问题，就是使用lineTo连续画时，会莫名其妙的出现较多的锯齿，形状很奇怪，因此，我们需保留上次的坐标点，每次都先使用moveTo然后lineTo就能解决此问题

第三步：以上就是刮刮卡的核心了，然后我们需要判断一个完成态，这个让我思考了很久，首先就放弃了getImageData判断透明像素占比的方式，因为鼠标移动事件触发的频率很高，首先是性能问题，其次是容易出现跨域问题，所以放弃。最终我选择了性能最高而且比较靠谱的算法解决这个问题，首先我将画布分为10*10=100份，设置一个数组，判断鼠标轨迹划过的坐标，看看在哪些方格内，然后遍历这些方格，判断距离画笔点的距离小于一半的画笔尺寸，就将对应的数组位置设为true。这样很好的解决了性能和兼容问题，只是当画笔过小时，可能判断的就没有那么精准了，不过这种情况应该没有人用，如果需要更精确的百分比，可以分成20*20=400份，性能上应该也过得去。

第四步：核心部分完毕后，剩余的就是解决一些小问题了，比如canvas的抗锯齿，图片的填充方式，在图片未加载完毕前不显示底部文案，图片失败时使用颜色解决，鼠标移动时阻止屏幕滚动，限定奖品范围，移动过快时补充轨迹计算等等。

我自己体验了一下，还是比较满意的，有意见的话可以提issue,我继续迭代，谢谢大家支持。