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

Question

我正在尝试在选定矩形的角上绘制小矩形。问题是它们没有出现在角落。

我正在动态绘制较大的矩形，当我双击任何矩形时，它们会被选中（当前选定的矩形存储在全局变量 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>
    );
  }
} 

Answer 1

在使用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>
  );
}

演示：https://codesandbox.io/s/8zwnmn5rx2