react konva animation to follow a path

Question

Hey I am new to react konva and wanted to create an animation in which a rectangle follows a user defined path of dots. First user defines the path by clicking on screen and initializing the destination dots and then the rectangle should follow the path accordingly

const [coords, setCoords] = useState([]); //path dots variable
  const [points, setPoints] = useState([250, 250]); //rectangle x,y variable
  const ref= useRef(null);
  const [check, setCheck] = useState(false); //check wheather user has clicked the start tracing button
  const [i, setI] = useState(0); //index state variable
  const handleStart= () => {
    if (check === false) {
      setCheck(true);
    } else {
      setCheck(false);
    }
  };
  const handleClick = (e) => {
    if (check === false) {
      var stage = e.target.getStage();
      var newcoord = stage.getPointerPosition();
      var temp = [newcoord.x, newcoord.y];
      setCoords((coords) => [...coords, temp]);
    }
  };
  useEffect(() => {
    if (!check) {
      return;
    }
    var node = ref.current;
    var anim = new Konva.Animation(function (frame) {
      if (frame.time / 10 >= coords[i][0]) {
        alert("reached");
        setPoints([coords[i][0], coords[i][1]]);
        setI(i + 1);
      } else {
        node.x(frame.time / 10);
      }
      if (frame.time / 10 >= coords[i][1]) {
        alert("reached");
        setPoints([coords[i][0], coords[i][1]]);
        setI(i + 1);
      } else {
        node.y(frame.time / 10);
      }
    }, node.getLayer());
    anim?.start();
    return () => anim?.stop();
  }, [check, i]);
  return (
    <div>
      <Stage
        onMouseDown={(e) => handleClick(e)}
        width={window.innerWidth}
        height={window.innerHeight}
      >
        <Layer>
          <Group >
            <Rect
              width={50}
              height={50}
              x={points[0]}
              y={points[1]}
              strokeWidth={2}
              fill="black"
              opacity={1}
              draggable
              ref={ref}
            />
          </Group>
          {coords.map((key, index) => (
            <Circle
              x={key[0]}
              y={key[1]}
              numPoints={1}
              radius={4}
              fill="black"
              strokeWidth={2}
            />
          ))}
        </Layer>
      </Stage>
      <Button onClick={handleStart}>Start Tracing</Button>
    </div>

this is my code but it doesnt seem to work as intended.Any help is much appreciated. PS if you have any queries plz lemme know

Answer 1

You can use some Konva API to work with the path and get points on it.

  useEffect(() => {
    if (!check) {
      return;
    }
    var node = ref.current;
    // generate path from points
    let data = coords
      .map(([x, y], index) => {
        if (index === 0) {
          return `M ${x} ${y}`;
        }
        return `L ${x} ${y}`;
      })
      .join(" ");
    const firstPoint = coords[0];
    data += ` L ${firstPoint[0]} ${firstPoint[1]}`;
    const path = new Konva.Path({
      data
    });
    var anim = new Konva.Animation(function (frame) {
      const length = path.getLength();
      const delta = ((frame.time / 2000) % 1) * length;
      const point = path.getPointAtLength(delta);
      if (point) {
        node.position(point);
      }
    }, node.getLayer());
    anim?.start();
    return () => {
      anim?.stop();
      path.destroy();
    };
  }, [check, i]);

https://codesandbox.io/s/react-konva-follow-path-mwd2w