javascript - 反应 konva 放大和缩小指针位置上的鼠标滚动无法正常工作

Question

我正在尝试使用 react konva 在 omage 上绘制矩形 我想在图像被放大/缩小时根据鼠标指针位置和鼠标滚轮事件绘制一个矩形，但问题是矩形是根据位置绘制的图片不是舞台请帮我解决这个问题

请参考我用来放大和缩小图像的代码

zoom=()=>{
    var oldScale = this.refs.layer.attrs.scaleX;
            mousePointTo = {
                x: this.props.x / oldScale - this.refs.layer.attrs.x / oldScale,
                y: this.props.y/ oldScale - this.refs.layer.attrs.y / oldScale,
            };  
           newScale = this.props.variation > 0 ? oldScale * this.props.scaleBy : oldScale / this.props.scaleBy; 
            newPos = {
                x: -(mousePointTo.x - this.props.x / newScale) * newScale,
                y: -(mousePointTo.y - this.props.y / newScale) * newScale
            }; 

            this.setState({newposx:newPos.x,newposy:newPos.y,newScale:newScale})
    }

handleClick = (e) => {    

    if (this.state.isDrawing) {
      this.setState({
        isDrawing: !this.state.isDrawing,
      });
      return;
    }

    const newShapes = this.state.shapes.slice();
    newShapes.push({
      x: e.evt.layerX, 
      y: e.evt.layerY,
    });

    this.setState({
      isDrawing: true,
      shapes: newShapes,
    });

  }

  handleMouseMove = (e) => {
    if (!this.state.isDrawingMode) {
      return;
    }

    const mouseX = e.evt.layerX;  
    const mouseY = e.evt.layerY;


    if (this.state.isDrawing) {

      const currShapeIndex = this.state.shapes.length - 1;
      const currShape = this.state.shapes[currShapeIndex];


      const newWidth = mouseX - currShape.x;
      const newHeight = mouseY - currShape.y;

      const newShapesList = this.state.shapes.slice();
      newShapesList[currShapeIndex] = {
        x: currShape.x,
        y: currShape.y,
        width: newWidth,
        height: newHeight
      }

      this.setState({
        shapes: newShapesList,
      });
    }
  }

render() {

    return (
        <Stage
          ref='stage'
          width={this.props.width}
          height={this.props.height}
          onContentClick={this.handleClick}
          onContentMouseMove={this.handleMouseMove}
          draggable="true"
        >
          <Layer ref='layer' width={this.props.width}
          height={this.props.height} x={this.state.newposx}
              y={this.state.newposy}
              scaleX={this.state.newScale}
              scaleY={this.state.newScale}>
            <Image 
              width={this.props.width} 
              height={this.props.height} 
              image={this.props.image}  
              ref={(node) => {this.imageNode = node;}}    
            />

            {this.state.shapes.map((shape) => {
              return (
                <Group>
                  <Rect
                    x={shape.x}
                    y={shape.y}
                    width={shape.width}
                    height={shape.height}
                    isDrawingMode={this.state.isDrawingMode}
                    draggable="true"
                    }}
                  />
                </Group >
              );
            })}

          </Layer>
        </Stage>
      </div>
    );
  }
}