Javascript 在React Konva中未出现在指定位置的矩形

我试图在选定矩形的角上绘制小矩形。问题是他们没有出现在角落里

我正在动态绘制较大的矩形，当我双击任何矩形时，它们会被选中（当前选定的矩形存储在全局变量SelectedRectangle中），较小的矩形必须出现在选定矩形的拐角处

请帮帮我。这是我的密码-

var selectedRectangle = someSelectedRectangle;
export default class MyRectangle extends React.Component {        
  constructor(props) {
      super(props);

      this.selectShape = this.selectShape.bind (this);
      this.showCorners = this.showCorners.bind (this);
      this.drawRect = this.drawRect.bind (this);
  }

  selectShape (e) {
     if(selectedRectangle)
         this.showCorners ();
  }

  showCorners () {
    this.drawRect (selectedRectangle.x, selectedRectangle.y);
    this.drawRect (selectedRectangle.x + selectedRectangle.width, selectedRectangle.y);
    this.drawRect (selectedRectangle.x + selectedRectangle.width, selectedRectangle.y + selectedRectangle.height);
    this.drawRect (selectedRectangle.x, selectedRectangle.y + selectedRectangle.height);
  }

  drawRect (x, y) {    
    var layer = this.refs.layer;
    var rect = new Konva.Rect({
      x : {x},
      y : {y},
      width : 10,
      height : 10,
      fill : "black",
      draggable : "true",
    });

    layer.add(rect);
  }

  render() {
    return (
      <div>

        <Stage 
          ref = 'stage'
          width = {window.innerWidth} 
          height = {window.innerHeight}
        >
          <Layer ref = 'layer'>

            {this.state.shapes.map((shape) => {
              return (
                <Group>
                  <Rect
                    name = 'rect'
                    x = {shape.x}
                    y = {shape.y}
                    width = {shape.width}
                    height = {shape.height}
                    isDrawingMode = {this.state.isDrawingMode}
                    strokeWidth = {2}
                    draggable = "true"
                    stroke = "yellow"
                    fill = "green"
                    opacity = {0.4}
                    onDblClick = {(e) => this.selectShape(e)}
                  />                                         
                </ Group >
              );
            })} 

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

var selectedlectangle=someselectedlectangle；
导出默认类MyRectangle扩展React.Component{
建造师（道具）{
超级（道具）；
this.selectShape=this.selectShape.bind（this）；
this.showCorners=this.showCorners.bind（this）；
this.drawRect=this.drawRect.bind（this）；
}
选择形状（e）{
如果（已选择反射角）
这是showcarks（）；
}
展示区（）{
this.drawRect（selectedlectangle.x，selectedlectangle.y）；
this.drawRect（selectedlectangle.x+selectedlectangle.width，selectedlectangle.y）；
this.drawRect（selectedlectangle.x+selectedlectangle.width，selectedlectangle.y+selectedlectangle.height）；
this.drawRect（selectedlectangle.x，selectedlectangle.y+selectedlectangle.height）；
}
drawRect（x，y）{
var layer=this.refs.layer；
var rect=新Konva.rect({
x:{x}，
y:{y}，
宽度：10，
身高：10，
填充：“黑色”，
可拖动：“正确”，
});
层。添加（rect）；
}
render（）{
返回(
{this.state.shapes.map（（shape）=>{
返回(
这个。选择shape（e）}
/>                                         
);
})} 
);
}
} 

使用

react konva

开发时，最好不要手动触摸konva节点。这意味着您不应该手动将新节点添加到图层中，也不应该手动编辑它们（只有在非常罕见的情况下，您知道自己在做什么）

因此，最好在

render（）

函数中定义画布的整个视图。这将是一种声明性的“反应方式”

大概是这样的：

render() {
  const cornerProps = {
    width: 10,
    height: 10,
    fill: 'black',
    offsetX: 5,
    offsetY: 5
  };
  return (
    <div>
      <Stage
        ref="stage"
        width={window.innerWidth}
        height={window.innerHeight}
        onContentClick={this.handleClick}
        onContentMouseMove={this.handleMouseMove}
      >
        <Layer ref="layer">
          {this.state.shapes.map((shape, index) => {
            return (
              <Group x={shape.x} y={shape.y}>
                <Rect
                  name="rect"
                  width={shape.width}
                  height={shape.height}
                  isDrawingMode={this.state.isDrawingMode}
                  strokeWidth={2}
                  draggable="true"
                  stroke="yellow"
                  fill="green"
                  opacity={0.4}
                  index={index}
                  onDragStart={e => this.handleDragStart(e)}
                  onDragEnd={e => this.handleDragEnd(e)}
                  onDblClick={e => this.selectShape(e)}
                />
                {index === this.state.selectedRectangleIndex && (
                  <Group>
                    <Rect x={0} y={0} {...cornerProps} />
                    <Rect x={shape.width} y={0} {...cornerProps} />
                    <Rect x={0} y={shape.height} {...cornerProps} />
                    <Rect x={shape.width} y={shape.height} {...cornerProps} />
                  </Group>
                )}
              </Group>
            );
          })}
        </Layer>
      </Stage>
    </div>
  );
}

render（）{
const cornerProps={
宽度：10，
身高：10，
填充：“黑色”，
抵销额：5，
副职：5
};
返回(
{this.state.shapes.map（（形状，索引）=>{
返回(
这个.handleDragStart（e）}
onDragEnd={e=>this.handleDragEnd（e）}
onDblClick={e=>this.selectShape（e）}
/>
{index==this.state.selectedRectangleIndex&&(
)}
);
})}
);
}

---

演示：

如果使用react konva，请勿手动创建/添加矩形。而是在渲染函数中定义它们。请为您的问题创建一个在线演示。以下是完整代码的链接。在我的系统中，它在Visual Studio代码编辑器中正常工作时在此编辑器中抛出错误。对不起，我不明白你想说什么。有必要只在渲染函数中添加矩形吗？好的，谢谢你的帮助。我的问题现在解决了