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

IT技术 reactjs konvajs react-konva
2021-05-24 06:06:21

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

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

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

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

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日期响应日期范围选择器 下一篇React - 如何访问另一个组件中的函数？