javascript - 将 Konva 变换控件设置到画布顶部
问题描述
我正在尝试转换位于另一个图层后面的图像,该图层包含 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>
解决方案
如果有人正在寻找使用钩子的解决方案,我发现如果您有 Transformer 的 ref,您可以zIndex()
在选择形状时轻松调用具有任意高数字的方法,然后重绘它以确保安全(没有这个它可能会工作部分)
useEffect(() => {
if (isSelected) {
trRef.current.zIndex(10000);
trRef.current.getLayer().batchDraw();
}
}, [isSelected]);
这似乎将 Transformer 渲染在画布上的所有其他东西之上,即使形状本身是模糊的。
推荐阅读
- css - Sass 多个选择器在根部和每个内部的单独样式以及所有的通用样式
- python-3.x - 有没有办法在 Discord.py 中流式传输视频?
- javascript - 如何将键入的字符串识别为 URL - JavaScript
- assembly - 为什么 64 位程序中 %esp 和 %ebp 寄存器的值总是负数?
- python - 使用内置 sum 函数时,“TypeError: +: 'int' and 'tuple' 不支持的操作数类型”是什么意思?
- google-bigquery - 如何计算 Big Query 上的“每日用户参与度”并获得与 Firebase 在其仪表板中显示的相同结果?
- python - 没有重复的背包:最大数量的黄金 - Python 代码问题
- flutter - Flutter image_picker 插件和覆盖
- android - flutter pub get failed(1;所以,因为flutter_app依赖于url_launcher^5.7.7,版本解析失败。)
- javascript - ReactJS 基于 csv 文件的动态 Anchor 标签 href 渲染 Undefined