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

Question

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

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

我现在的代码看起来像这样：

  <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

如果您想在加载新图像时重置舞台位置，您可以：

如果ref访问

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} />;
};

或者您可以重置状态中的位置（在 dragmove 或 dragend 事件中保存位置更改很重要）：

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} />;
};

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

How to reset position of a dragged canvas on react-konva?

javascript

reactjs

konvajs

react-konva