reactjs - react-konva 在舞台中央设置形状

Question

我正在使用 react-konva 在舞台上绘制形状并对其进行编辑，我选择了该形状，并且该形状已设置为专注于舞台（即来到舞台的中心）。单击一个按钮，我正在更新舞台的 X、Y 和比例，但我没有在舞台的中心获得准确的形状。

请查看此演示并分享您的意见：

https://codesandbox.io/s/shapecenterdemo-o9hg2?file=/src/ShapeCenterDemo.jsx

PS：无法从舞台上移除dragBoundFunc。

Answer 1

根据您的演示：

  focusRect = () => {
    let { rect, stageWidth, stageHeight } = this.state;

    let newScale = 6;
    const rectWidth = 50 * newScale;
    const rectHeight = 50 * newScale;

  

    const x =  - rect.x * newScale + stageWidth / 2 - rectWidth / 2 ;
    const y =  - rect.y * newScale + stageHeight / 2 - rectHeight / 2;


    let pos = this.boundFunc({ x, y }, newScale);

    this.setState({
      stageX: pos.x,
      stageY: pos.y,
      stageScale: newScale
    });
  };

https://codesandbox.io/s/react-konva-center-a-shape-7ttts