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

Question

我有一个 react konva 项目，您可以在其中将图像加载到画布中，然后四处拖动画布。如果您加载不同的图像，则它会出现在上一张图像被拖动到的位置。我猜是否有任何方法可以重置舞台上的这个“拖动”位置（可拖动组件）。由于我正在使用反应，我唯一能想到的就是重新渲染整个组件，这现在不是问题，但我想有替代方案。我之所以让舞台而不是图像本身可拖动，是因为我有一系列想要与图像一起移动的点。当然，我可以将点和图像都添加到组中，但这会引入一些可能不值得的复杂性。我现在拥有的代码如下所示：  <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} />;

};