将 Konva 转换控件设置到 canvas 的顶部

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>

Answer 2

如果有人正在寻找使用挂钩的解决方案，我发现如果您有 Transformer 的引用，则可以在选择形状时轻松地调用具有任意大数字的 zIndex() 方法，然后重绘它是安全的（没有这部分它可能会工作）

useEffect(() => {
  if (isSelected) {
    trRef.current.zIndex(10000);
    trRef.current.getLayer().batchDraw();
  }
}, [isSelected]);

这似乎在 canvas 上将 Transformer 呈现在所有其他内容之上，即使形状本身被遮盖了也是如此。

将 Konva 转换控件设置到 canvas 的顶部

Set Konva transform controls to the top of the canvas

javascript

konvajs

react-konva