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

Question

我正在使用 react-konva 在舞台上绘制形状并编辑它们我 select 形状和形状已设置为聚焦在舞台上（即来到舞台中央）。单击按钮后，我更新了舞台的 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

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

react-konva set a shape at the center of stage

reactjs

konvajs

react-konva