Установите контроль преобразования Konva на верх холста

Question

Я пытаюсь преобразовать изображение, которое находится за другим слоем, содержащим png (шаблон). Я хочу преобразовать изображение под этим слоем, но оставить его там, где оно есть, чтобы вышеуказанный слой оставался шаблоном.

Можно ли показать элементы управления преобразованием вверху над всем?

<Stage width={480} height={620} onMouseDown={this.handleStageMouseDown}>
    {this.props.file ? (
      <Layer>
        <Uploaded file={this.props.file} />

        <TransformerComponent
          selectedShapeName={this.state.selectedShapeName}
        />
      </Layer>
    ) : null}
    <Layer listening={false}>
      <Overlay />
    </Layer>
  </Stage>

Answer 1

Вам необходимо изменить структуру ваших узлов. Просто покажи трансформер поверх всех остальных фигур. Если вам нужно отключить события для оверлея, вы можете использовать listening={false}.

<Stage width={480} height={620} onMouseDown={this.handleStageMouseDown}>
  <Layer>
    {this.props.file &&
        <Uploaded file={this.props.file} />
    }
    {/* use listening={false} for image in overlay */}
    <Overlay/>
    <TransformerComponent
         selectedShapeName={this.state.selectedShapeName}
     />
</Stage>