HTML5 画布文本编辑 [重复]答案

【问题标题】：HTML5 Canvas Text Edit [duplicate]HTML5 画布文本编辑 [重复]
【发布时间】：2018-03-06 01:14:04
【问题描述】：

我有一个使用fillText(); 在 HTML5 画布中填充的文本如何使其可编辑并将值读入变量？文本必须在画布内，因为它会写在一些复杂的多边形内。

【问题讨论】：

您可以使用像fabric.js 这样的库，它使您能够创建文本对象、实时编辑它们、删除、克隆、移动、旋转、缩放它们等等...单击在演示页面上“添加文本”，然后选择它并在画布下方的文本区域中进行编辑。文本显示也有多种选择，例如加下划线、划线或带阴影。
@kangax 有使用 Fabric.js 实时编辑文本对象的示例吗？ kitchensink 演示可以添加文本，之后可以随意缩放和旋转——但是有没有简单的方法来编辑文本内容？
@MathiasBynens 在 kitchensink 中，您可以在独立的文本区域中编辑文本，它会立即反映在画布上（位于画布下）。我们在 printio.ru 上使用了相同的方法，我在其他地方也看到了这个想法的一些变化（例如在 easel.ly 上，他们将 textarea 放置在您正在编辑的文本旁边）。
固定链接：fabricjs.com/kitchensink

【解决方案1】：

您无法从画布中获取文本。您需要做的是在使用 fillText(); 并渲染画布之前将文本保存在变量中。当你想编辑画布中的文本时，你必须重新绘制画布，当你想用fillText();渲染编辑的文本时，你必须再次从变量中读取文本。

【讨论】：

【解决方案2】：

一旦文本被绘制到画布上，它就会变成像素。不会存储原始文本（和多边形轮廓）。您无法从画布中获取它，就像无法从 jpg 或 png 文件中获取它一样。

如果画布是由您的 JavaScript 绘制的，您可以将文本存储在其他位置。如果没有，则必须对其进行 OCR。

【讨论】：

【解决方案3】：

看看斑马。它是一组在 html 画布上呈现的小部件，其中一个小部件是文本编辑器。看起来它是免费的、开源的，除了提供指向他们的 js 文件的链接之外，他们还在 GitHub 上提供了一个 Git 存档。 http://www.zebkit.org/

【讨论】：