1

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

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

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

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

4

1 回答 1

3

根据您的演示:

  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

于 2020-07-20T14:11:57.733 回答