需求是这样的：
在页面的预览图上面绘制一个矩形，画完立即保存，右上角出现一个删除按钮，要立即可以删除。
一开始的思路是使用canvas去实现，把一个透明的画布放在预览图上，滚动的时候，红框就会随着这个画布滚动。那么用一个透明的canvas absolute在画布上是行不通的。然后我就在想那生成一个canvas的高度是整个预览图的长度吧。
但是思考了下，预览图会有几百几千张，那么生成一个这么长的canvas好像也有点不太好。
并且生成了canvas，虽然也可以绘制一个删除按钮，实现点击，但也无法实现底层预览图上面红框悬浮效果了。
怎么想这都是一个又复杂性能又差的方案。
于是，我想怎么才能简单一点，因为需求也只是在图片上画红框而已，那我也没必要非用canvas不可，还得研究canvas的api。决定用js+css去绘制矩形。这样删除悬浮等操作也都很简单了。
那思路明确了，开始吧
参考了一些文章：(关键字就搜鼠标拖动画矩形)
鼠标拖动画矩阵
手把手教你用原生js实现按住鼠标拖动画框
js+css去绘制矩形实现的思路：
- 给一个红框初始值box，宽度是0高度是0
- 当鼠标按下的时候，去计算出鼠标的水平垂直坐标（这个水平垂直坐标是针对于绑定mousedown方法的这个元素）
- 鼠标move的时候，不停的给div设置width和height，而这个width是这么计算的：鼠标移动的e.offsetX - 鼠标按下时的初始e.offsetX。height是：鼠标移动的e.offsetY-鼠标按下时的初始e.offsetY
- 当鼠标松开/抬起的时候，拖动就结束了，发送新增框框的请求，然后新增接口成功后再去调用渲染红框的请求，请求里返回一个红框的id，点击删除根据id去删除。
遇到的问题
使用的offsetX和offsetY
offsetX：鼠标点击位置相对于触发事件对象的水平距离
offsetY：鼠标点击位置相对于触发事件对象的垂直距离
相对于触发事件对象，这几个字画重点。虽然我事件是绑定在img-content上的，但是当我鼠标移动过程中，触发事件的对象却有可能发生改变。也就是e.target发生了改变，那么offsetX就会不是你想要的。我们可以在控制台打印e.target去看鼠标随意移动后，值的变化。
我出现这种情况的场景有：绘制矩形，正常往下拉没问题，而鼠标缩放回去的时候，我鼠标的触发事件就变成了box本身，而不再是img-content，就会闪烁。
还有：图片上有其他的框元素，如果我鼠标拖拽到其他的框元素上，触发事件就改变，offsetX就变得不是你想要的。矩形就会绘制的不流畅。
解决办法：
给box给图片上其他的框元素加上属性 pointer-events: none;（鼠标事件拜拜，对鼠标事件Say GoodBye!!）
如果你想深度解析pointer-events可以看这篇文章https://www.zhangxinxu.com/wordpress/2011/12/css3-pointer-events-none-javascript/
解决办法倒是挺简单的，但也有一些局限性。此属性把鼠标事件完全禁用了，当然也包含鼠标的样式
我对pointer-events: none的通俗理解：
pointer-events: none你可以看的到某个元素，但是你无法摸的着，点击不到，点击会穿透触发到下层的元素。none表示鼠标事件穿透该元素并且指定该元素下面的任何东西
display：none; 是你摸不着，但是你也看不见。
js设置代码：
el.style.pointerEvents = 'none'
el.style.pointerEvents = 'auto'
b49668e3db525945245d52d8662074e.png
网友评论