记录鼠标轨迹, 生成svg的path, 用纯js实现

最新推荐文章于 2024-08-18 16:35:32 发布

zhangxuekang

最新推荐文章于 2024-08-18 16:35:32 发布

阅读量2.5k

点赞数

分类专栏： javascript 文章标签：鼠标轨迹 svg mouse javascript js

本文链接：https://blog.csdn.net/zhangxuekang/article/details/87718101

版权

通过监听mousemove事件获取鼠标坐标，存储为点的坐标数组，然后转换为贝塞尔曲线数据，最终利用这些数据在SVG中绘制出鼠标轨迹。

摘要由CSDN通过智能技术生成

因为没有办法直接获取鼠标移动的轨迹, 只能获取鼠标移动后留下的点的坐标. 所以思路是将一系列点坐标转化为曲线坐标.

用mousemove事件获取鼠标的坐标(x, y), 记录到一个数组里边, 然后将坐标数组转化为贝塞尔曲线数据, 有了贝塞尔曲线, 就可以渲染出svg轨迹.

核心转换方法代码如下:

   /**
   * 将折线修改为圆滑曲线
   * @param {*} data  [x1,y1,x2,y2,x3,y3...] 长度必须大于4, 且必须是偶数
   * @param {*} k 拟合系数, 数字
   */
    function solve(data, k = 1) {
      const size = data.length
      const last = size - 4
      let path = `M${data[0]},${data[1]}`
      for (let i = 0; i < size - 2; i += 2) {
        const x0 = i ? data[i - 2] : data[0]
        const y0 = i ? data[i - 1] : data[1]
        const x1 = data[i + 0]
        const y1 = data[i + 1]
        const x2 = data[i + 2]
        const y2 = data[i &