不使用 textarea 的 Konva 文本编辑选项答案

【问题标题】：Konva Text Edit option without using textarea不使用 textarea 的 Konva 文本编辑选项
【发布时间】：2018-08-07 11:53:54
【问题描述】：

我最近开始在我们的一个项目中使用 konva 库，我正在尝试在舞台上添加文本并在不使用文本区域的情况下进行编辑。

假设我想在舞台上编辑文本，我只想通过单击选定的文本来编辑它。当我单击它时，它应该直接使光标闪烁以进行输入。

我在 konva 示例下方有参考，但它使用 textarea 弹出窗口进行编辑。 example https://konvajs.github.io/docs/sandbox/Editable_Text.html#stq=&stp=0

【问题讨论】：

您的另一个选项是 contentEditable div，但这仍然需要使用类似于@lavrton 提出的 textarea 解决方案的 HTML 元素。如果您正在寻求富文本解决方案，那么您需要考虑一个提供富文本以供编辑的插件，然后是一种将生成的 html 快照捕获到图像中并将其呈现到画布的方法。

标签： konvajs

【解决方案1】：

如果没有 textarea，Konva 就无法做到这一点。但是您可以使 textarea 看起来和感觉就像您在编辑画布一样。你只需要匹配 CSS 样式尽可能接近画布渲染。所以用户不会注意到有文本区域。

【讨论】：