对 konva 动画做出反应以跟随路径答案

【问题标题】：react konva animation to follow a path对 konva 动画做出反应以跟随路径
【发布时间】：2021-10-01 21:48:41
【问题描述】：

嘿，我是 react konva 的新手，想创建一个动画，其中一个矩形遵循用户定义的点路径。首先用户通过单击屏幕并初始化目标点来定义路径，然后矩形应相应地跟随路径

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>

这是我的代码，但它似乎没有按预期工作。非常感谢任何帮助。 PS如果你有任何疑问请让我知道

【问题讨论】：

标签： reactjs konvajs react-konva konva konvajs-reactjs

【解决方案1】：

您可以使用一些 Konva API 来处理路径并获取点。

  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

【讨论】：