CODEWITHSUNDEEP
javascriptkonvajskonva
ryanalbrecht
ryanalbrecht

Reputation: 1

How do I create (improve) a moving dot with a ghost trail effect using the konva js library

I have made a little app using the Konva javascript library where I have a dragable dot which leaves a sort of ghost trail effect. This works great if the dot is moving fast but the effect falls a little flat if the dot moves slowly. Basically I have a line and simply keep adding a point to line while simultaneously remove the last point from the line everytime the dot moves. If the dot is moving slowly the line is really bunched up and does not look that great.

If I asked how would you improve this little app?

Here is the js fiddle along with the code 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();

I tried adding a throttle to the on drag function but its not quite what I was looking for.

Upvotes: 0

Views: 88

Answers (1)

Vanquished Wombat
Vanquished Wombat

Reputation: 9525

Your question seems to be about an approach rather than seeking code - I make that assumption based on your subjective description. So I answer in kind.

Maybe compute the straight-line distance between the current position and 'oldest' point in the line points array. Set a tolerance distance and if the distance is less than tolerance then do not remove that oldest point.

This will allow the points to stay in place longer on short movement and be cleaned up faster on long movement.

Upvotes: 0

Related Questions