如何在 react-konva 上重置拖动的 canvas 的 position？

Question

我有一个 react konva 项目，您可以在其中将图像加载到 canvas 中，然后四处拖动 canvas。 如果您加载不同的图像，则它会出现在上一张图像被拖动到的 position 上。 我猜是否有任何方法可以在舞台（可拖动组件）上重置这个“拖动的”position。 由于我正在使用反应，我唯一能想到的就是重新渲染整个组件，这现在不是问题，但我想有替代方案。

我之所以让舞台而不是图像本身可拖动，是因为我有一系列想要与图像一起移动的点。 当然，我可以将点和图像都添加到组中，但这会引入一些可能不值得的复杂性。

我现在拥有的代码如下所示：

  <Stage draggable width={canvasWidth} height={canvasHeight}>
        <Layer ref={layerRef}>
          {imageInfo.loaded && (
            <Image
              image={image}
              onClick={addPoint}
              onTap={addPoint}
              width={imageInfo.targetWidth}
              height={imageInfo.targetHeight}
            />
          )}
          {points.map((p, idx) => (
            <Circle
              key={pointId(p)}
              x={p.x}
              y={p.y}
              fill={color}
              radius={size}
              onClick={() => setPoints(points => removePos(idx, points))}
            />
          ))}
        </Layer>
      </Stage>

Answer 1

如果您想在加载新图像时重置阶段 position，您可以：

1. 如果ref访问，手动重置舞台的 position

const App = () => {
  const stageRef = React.useRef();
  const [image] useImage(url);

  // every time an images is changed we should reset position of the stage
  React.useEffect(() => {
     stageRef.current.position({ x: 0, y: 0});
  }, [image])

  return <Stage ref={stageRef} draggable width={canvasWidth} height={canvasHeight} />;
};

2. 或者您可以重置 state 中的 position（并且在dragmove或dragend事件中保存 position 更改很重要）：

const App = () => {
  const [pos, setPos] = React.useState({x : 0, y: 0 });

  const handleDragEnd = (e) => {
     setPos({
       x: e.target.x(),
       y: e.target.y(),
     });
  };

  // every time an images is changed we should reset position of the stage
  React.useEffect(() => {
     setPos({ x: 0, y: 0});
  }, [image])

  return <Stage onDragEnd={handleDragEnd} draggable width={canvasWidth} height={canvasHeight} />;
};