如何在 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} />;
};