欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

SVG轨迹回放实践

程序员文章站 2022-07-05 12:55:16
...

最近做了埋点方案XTracker的轨迹回放功能,大致效果就是,在指定几个顺序的点之间形成轨迹,来模拟用户在页面上的先后行为(比如一个用户先点了啥,后点了啥)。效果图如下:

SVG轨迹回放实践

在这篇文章中,我们来聊聊轨迹回放的一些技术细节。

注意,本文只关注轨迹的绘制,并不讨论轨迹的各种生成算法。

绘制红点坐标

在绘制轨迹前,需要先绘制轨迹经过的红点坐标。使用SVG绘制红点非常简单:

<svg width="500" height="500">
  <circle r="5" cx="50" cy="55" fill="red"></circle>
</svg>

SVG轨迹回放实践

然后根据需要多画几个红点就可以了,也可以通过js批量生成:

function createCircles() {
  var r = "5",
    fill = "red",
    // circleGroup是红点的容器
    circleGroup = document.querySelector("#circle-group");
  // pointList是红点的坐标集合
  pointList.forEach(function(point) {
    var circle = document.createElementNS(
      "http://www.w3.org/2000/svg",
      "circle"
    );
    circle.setAttribute("r", r);
    circle.setAttribute("cx", point[0]);
    circle.setAttribute("cy", point[1]);
    circle.setAttribute("fill", fill);
    circleGroup.appendChild(circle);
  });
}

SVG轨迹回放实践

两点之间的弧线

红点坐标画完了,我们来画轨迹。在画多点的轨迹之前,我们先来学习两点之间的轨迹,也就是两点之间弧线的画法。

二次贝塞尔曲线、三次贝塞尔曲线还是圆弧?

SVG通过path可以画多种弧线主要包括:

  • 二次贝塞尔曲线:需要一个控制点,用来确定起点和终点的曲线斜率。SVG轨迹回放实践
  • 三次贝塞尔曲线:需要两个控制点,用来确定起点和终点的曲线斜率。SVG轨迹回放实践
  • 圆弧:需要两个半径、两个圆心,逆时针还是顺时针,大圆弧还是小圆弧等多个属性。

    ![image](https://wx3.sinaimg.cn/large/83900b4egy1fjy6hbu8zlj205k05kt8o.jpg)
    

显然,二次贝塞尔曲线最为简单,所以我们决定用二次贝塞尔曲线来画两点之间的弧线。在SVG的path中,二次贝塞曲线的参数是:

M x1 y1 Q x2 y2 x3 y3

其中x1 y1是起点,x2 y2是控制点,x3 y3是终点。来个demo吧!

<svg width="320px" height="320px">
  <path id="line1" stroke="black" fill="none" d="M 0 50 Q 25 10 50 50"/>
</svg>

效果:

SVG轨迹回放实践

确定控制点

确定了使用二次贝塞尔曲线,那么问题又来了,如何确定控制点呢?控制点决定了曲线的斜率和方向,我们期望曲线:

  • 对称。
  • 接近直线,稍微弯曲即可,太弯可能会超出画布范围。
  • 曲线永远顺时针,这样可以保证,A点到B点的曲线和B点到A点的曲线不重合。

要想做到这三点,我们只需要让控制点:

  • 在两点的中垂线上。
  • 距离两点的中点小于某个固定值。
  • 在两点顺时针区域。

画个图吧!

SVG轨迹回放实践

  • 在顺时针区域画中垂线。中垂线和垂直线的角度为angle
  • 规定offset为某个定值(比如40,或者其他比较小的定值)。
  • 那么控制点相对于中点的偏移值就确定了:offsetX = Math.sin(angle) * offset;offsetY = -Math.cos(angle) * offset;

完整算法:

function getCtlPoint(startX, startY, endX, endY, offset) {
  var offset = offset || 40;
  var angle = Math.atan((endY - startY) / (endX - startX));
  var offsetX = Math.sin(angle) * offset;
  var offsetY = -Math.cos(angle) * offset;
  var ctlX = (startX + endX) / 2 + offsetX;
  var ctlY = (startY + endY) / 2 + offsetY;
  return [ctlX, ctlY];
}

起点终点相同的情况

如果起点终点相同,我们就不能使用二次贝塞尔曲线了,而是应该在该点右侧画一个小圆弧。在Path中圆弧的参数为:

A rx ry x-axis-rotation large-arc-flag sweep-flag x y
  • 弧形命令A的前两个参数分别是x轴半径和y轴半径。
  • x-axis-rotation表示弧形的旋转情况。
  • large-arc-flag决定弧线是大于还是小于180度,0表示小角度弧,1表示大角度弧。
  • sweep-flag表示弧线的方向,0表示从起点到终点沿逆时针画弧,1表示从起点到终点沿顺时针画弧。
  • 最后两个参数是指定弧形的终点。

弧形命令A的具体用法不属于本文范畴,请参考:https://developer.mozilla.org/zh-CN/docs/Web/SVG/Tutorial/Paths

因为我们要求:

  • 圆弧接近于圆,不是椭圆。
  • 圆弧在右侧。
  • 大于180度。

所以,我们的圆弧参数为:

  • x轴和y轴半径同为某个很小的定值(我们就设为10吧)
  • x-axis-rotation为0,不需要旋转,既然是圆,转了也白转。
  • large-arc-flag为1,显然大于180度。
  • sweep-flag为1或0都行,不过要保证为1时,终点稍微比起点靠下一点,这样才能保证圆弧在右边。

示例代码:

<svg width="320px" height="320px">
  <path id="line1" stroke="black" fill="none" d="M 50 50 A 10 10 0 1 1 50 50.1"/>
</svg>

效果截图:

SVG轨迹回放实践

将两种情况封装成获取d属性的函数:

function getD(startX, startY, endX, endY) {
  var ctlPoint = getCtlPoint(startX, startY, endX, endY, 40);
  var d = ["M", startX, startY].join(" ");
  if (startX !== endX || startY !== endY) {
    d += [" Q", ctlPoint[0], ctlPoint[1], endX, endY].join(" ");
  } else {
    d += [" A", 10, 10, 0, 1, 1, endX, endY + 0.1].join(" ");
  }
  return d;
}

完整demo:

See the Pen svg:两点间的弧线:非圆弧 by lewis liu (@lewis617) on CodePen.

多点之间的弧线

两点之间弧线确定了,那么如何确定多点之间的弧线呢?其实很简单,只需要在命令后面加上新的控制点和终点即可:

M x1 y1 Q x2 y2 x3 y3 Q x4 y4 x5 y5

所以只需要简单更新一下之前封装的函数即可:

function getD(pointList){
  var offset = offset || 40;
  var d = (['M' ,pointList[0][0], pointList[0][1]]).join(' ');
  pointList.forEach(function(point, i){
    if(i>0){
      var startX = pointList[i-1][0],
          startY = pointList[i-1][1],
          endX = point[0], 
          endY = point[1];
      
      var ctlPoint = getCtlPoint(startX, startY, endX, endY, offset);
      
      if(startX !== endX || startY !== endY){
        d+=([' Q', ctlPoint[0], ctlPoint[1], endX, endY]).join(' ');
      }else{
        d+=([' A', 10, 10, 0, 1, 1, endX, endY + 0.1]).join(' ');
      }
    }
  })
  return d;
}

如果pointList为:

var pointList = [
  [0, 50],
  [0, 50],
  [50, 50],
  [100, 50],
  [0, 100],
  [50, 100],
  [100, 100],
];

那么效果图:

SVG轨迹回放实践

完整demo:

See the Pen svg:多点间的弧线:非圆弧 by lewis liu (@lewis617) on CodePen.

让轨迹回放起来

轨迹画完了,如何让它回放呢?这里需要用到这两个属性:

stroke-dasharray:控制用来描边的点划线的图案范式。

stroke-dashoffset:指定了dash模式到路径开始的距离。

  • 先设置stroke-dasharray"length length",来让曲线颜色和空白的长度均为曲线长度。
  • 然后设置stroke-dashoffset初始状态为曲线长度,来保证整个曲线"看起来"都是空白。
  • 最后渐变stroke-dashoffset属性为0,来模拟画线。

如何渐变呢?使用SVG SMIL animation

关键代码:

var length = path.getTotalLength();
path.setAttribute("stroke-dasharray", length + " " + length);
path.setAttribute("stroke-dashoffset", length);
path.innerHTML= '<animate attributeName="stroke-dashoffset" to="0"  dur="7s" begin="0s" fill="freeze" repeatCount="indefinite"/>';

完整demo:

See the Pen svg:多点间的弧线回放 by lewis liu (@lewis617) on CodePen.

给轨迹加上“圆头”

马上就可以看见胜利的曙光了,最后我们来做轨迹的“圆头”:

  • 圆头就是个圆点(circle)
  • 圆点需要跟着轨迹一起移动

画一个圆点很简单,那么如何画一个按照轨迹移动的圆点呢?答案是:animateMotion元素

关键代码:

function createPathHead(pathObj, d){
  var r = 3;
  var head = document.createElementNS("http://www.w3.org/2000/svg", "circle");
  head.setAttribute("id", pathObj.id + "-head");
  head.setAttribute("r", r);
  head.setAttribute("fill", pathObj.stroke);
  
  var animateMotion = document.createElementNS("http://www.w3.org/2000/svg", "animateMotion");
  animateMotion.setAttribute("path", d);
  animateMotion.setAttribute("begin", "indefinite");
  animateMotion.setAttribute("dur", "7s");
  animateMotion.setAttribute("fill", "freeze");
  animateMotion.setAttribute("rotate", "auto");
  head.appendChild(animateMotion);
  
  return head;
}

至此,轨迹回放的关键技术点就讲完了,完整的demo在这里,点击按钮进行回放。

See the Pen xtracker 动画2:其他弧线 by lewis liu (@lewis617) on CodePen.