。

在图形编辑器中#xff0c;想象这么一个场景#xff0c;我们撤销了一些重要的操作#xff0c;然后想选中一个图形#xff0c;看看它的属性。

你点了上去#xff0c;然后你发现你再也无法重做了。

你以为你点了一下#xff0c;但其实你…大家好我是前端西瓜哥。

在图形编辑器中想象这么一个场景我们撤销了一些重要的操作然后想选中一个图形看看它的属性。

你点了上去然后你发现你再也无法重做了。

你以为你点了一下但其实你点击的时候鼠标还是小小移动了一点飘了一个像素点。

对编辑器来说它识别到让图形移动一个像素点的操作就生成了一个新的版本然后重做栈redoStack被清空了你退回前的操作就没了。

阻塞阈值。

具体就是就是按下鼠标后移动鼠标的距离要大于某个值我们才认为发生了拖拽并执行对应工具的逻辑。

下面为我们要实现的效果。

此处为了更好地演示效果将阈值设置得很大。

通常设置个

4px

可以看到按下鼠标然后移动如果移动的位移太小矩形是不会被移动的直到达到一定位移阈值后矩形才会乖乖听话跟随鼠标进行移动。

代码改造

比如选择工具停留在图形上图形要高亮此时没发生拖拽currentTool.move(e);}

}//

我们在鼠标移动事件中计算鼠标按下和鼠标移动之间的距离是否超过某个值如果超过阈值就将

isEnableDragging

需要注意的是不要只用位移距离来判断是否可以拖拽要配合状态。

否则突破阈值后又移动回来你会发现你又卡住了因为此时阈值因为再次计算没能达到阈值。

isEnableDragging

后就再也不用计算位移了之后一直都是可拖拽状态直到鼠标释放重置状态。

拖拽阻塞是开发图形编辑器的一点小细节并不复杂但能带来很好的用户体验。