vue：自定义鼠标图片并跟随鼠标移动路径实时旋转指向移动方向的功能实现

「爱情、让人受尽委屈。」 2024-03-24 23:18 136阅读 0赞

老规矩，先看效果：

![f54a0c92148145449135cb48a93b4b8d.gif][]

这个效果有点东西，替换了鼠标图片不说，还能让这个箭头的指向跟随移动方向实时变化。如果能够用在项目里，绝对可以锦上添花。

现在就来说说，如何实现这样的效果。很显然，单纯的css肯定是无法实现这样的效果，所以必然需要css+js共同作用才能实现 。但其实并不复杂，关键是能找到思路。往往看起来越是高大上的东西，思路很重要，反而是实际动手做的工作并不复杂。

首先，在页面引入一个div组件：

![5c41c87d202d40d28059289c5421352e.bmp][]

外层div用于定义画布大小，配置好样式，由于我这里在当前页面页面还有其他组件，因此为其配置了宽和高。内层div用于定义鼠标图片的大小，并使用绝对定位。内层div里面使用svg引入了top图标。当然这里你需要现在全局引入svg图标才可以直接使用top图片。你也可以不适用svg，而是在内层div中添加你自己的图片，总之内层div内就是用来存放用来替换默认鼠标图片文件的组件。

有两点需要注意，一是要在外层div中取消鼠标默认样式，二是在外层div中定义一个mousemove事件，该事件就是用来处理鼠标移动逻辑的方法。

接下来就是重点，JS代码：

![7d6744bf3df84d7aa5af745ac515c670.bmp][]

代码量并不大，总共分为三大部分，也就是红色框体内包含的代码。

第一部分，初始化参数，不解释，看注释。

第二部分，通过vue3提供的钩子函数`onMounted`在组件挂载后给两个初始化变量赋值。这主要时因为我这里并不是全视口内鼠标样式都被替换，而是在指定div内去替换。而且自定义鼠标图片的位置又使用了绝对定位，如果位置不加修正，当鼠标移入到外层div中，鼠标图片将按照绝对定位的位置相对于鼠标左上角坐标0点位置的x和y方向上的偏移，跟随鼠标移动。这显然不是想要的结果，所以就必须修正这个偏移量。因此initX和initY就是用来修正这个偏移量，使得自定义鼠标图片能够和鼠标实际位置重合而设置的。

第三部分，就是重点啦，监听鼠标移动事件，得到鼠标在x和y轴移动的距离，再根据这个距离，计算出鼠标移动的方向。这里有个小技巧，注释也说的很明白，那就是要防抖动，细微的移动轨迹会导致鼠标图片在方向上产生抖动，为了避免这种情况， 设置了防抖机制，只有当鼠标在平面上移动足够大的距离时，才需要根据实际情况改编鼠标图片的指向。最后就是跟鼠标所在的div组件设置样式，通过transform设置运动样式。对于图片与鼠标实际距离偏移量的修正也是在这一步完成的。如果你是要全屏改变鼠标样式，那就不需要这个偏移量了。

好了，全部完成，代码非常简单，就这么多，搞定。

[f54a0c92148145449135cb48a93b4b8d.gif]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/13/4180be04b6b94452a066538df9a7eef8.png
[5c41c87d202d40d28059289c5421352e.bmp]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/13/aa9d420e5dc94e33ac6ea0a7db1aaa66.png
[7d6744bf3df84d7aa5af745ac515c670.bmp]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/13/fdf1a208f3e24e7caf8609552bdc2654.png