javascript - 将 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

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

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

这似乎将 Transformer 渲染在画布上的所有其他东西之上，即使形状本身是模糊的。

Answer 2

您需要更改节点的结构。只需在所有其他形状的顶部显示变压器。如果您需要禁用覆盖层的事件，您可以使用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>