如何使用 konva js 库创建（改进）具有幽灵轨迹效果的移动点

Question

我使用 Konva javascript 库制作了一个小应用程序，其中有一个可拖动的点，会留下一种幽灵痕迹效果。如果点移动速度很快，这效果很好，但如果点移动缓慢，效果就会有点平淡。基本上我有一条线，只需不断地向线上添加一个点，同时每次点移动时从线上删除最后一个点。如果点移动缓慢，则线条实际上会聚成一团，看起来不太好。

如果我问你会如何改进这个小应用程序？

这是js小提琴以及代码https://jsfiddle.net/80tgkv6r/

    // first we need to create a stage
    var stage = new Konva.Stage({
      container: 'stage',   // id of container <div>
      width: 750,
      height: 600
    });

    // then create layer
    var layer = new Konva.Layer();

    var numPoints = 20;
    var startPos = [30,30]
    var points = Array(numPoints)
      .fill( startPos, 0, numPoints )
      .flat();

    // create our shape
    var line = new Konva.Line({
        points: points,
        stroke: '#FFB0B0',
        strokeWidth: 3,
        tension: 0.3
    });

    var circle = new Konva.Circle({
        radius: 7,
        fill: 'red',
        stroke: '#000000',
        strokeWidth: 2,
        x: startPos[0],
        y: startPos[1],
        draggable: true
    });

    circle.on('dragmove', (evt) => {
        var points = line.points().slice(0, -2); //remove last two cooridinates
        var x = evt.target.x();
        var y = evt.target.y();
        points = [x, y, ...points ]; //add current mouse pos to beginning of point arry
        line.points(points);
    });

    layer.add(line);
    layer.add(circle);
    stage.add(layer);
    layer.draw();

我尝试在拖动功能中添加油门，但它并不完全是我想要的。

Answer 1

您的问题似乎是关于一种方法而不是寻求代码 - 我根据您的主观描述做出该假设。所以我以实物回答。

也许计算当前位置和线点数组中“最旧”点之间的直线距离。设置公差距离，如果距离小于公差，则不要删除最旧的点。

这将使这些点在短距离移动时停留在原位的时间更长，并在长距离移动时更快地清理。