如何对画布元素中的文本进行丰富的排版？答案

【问题标题】：How to do rich typesetting for text in canvas element?如何对画布元素中的文本进行丰富的排版？
【发布时间】：2013-06-19 11:30:33
【问题描述】：

我正在寻找一种不使用 HTML/DOM 直接在画布元素上绘制多行文本的方法。最好的情况是找到一个 JavaScript 库，但我的谷歌搜索没有找到任何结果。

理想情况下，它应该具有以下功能：

我希望找到一个比 this tutorial 和 this answer 更先进的解决方案，它们只处理基本的字/行换行。

有人知道任何可能的解决方案吗？这似乎是一件疯狂的事情，但我认为我有一个相当好的理由！我正在评估 Ejecta 作为一个可能的 iOS 环境，以制作一个依赖具有漂亮排版的文本的跨平台游戏，因此 HTML 和 DOM 不可用。（We 主要制作基于文本的游戏）

【问题讨论】：

This: github.com/bramstein/typeset 包含一个很好的换行算法，包括各种文本对齐选项、连字符，并利用了画布的 measureText 函数，尽管输出为 spans。不过可以结合基本的线条渲染器使用。
我们支持fabric.js 中的多行文本渲染以及字体系列、文本对齐、文本装饰、文本笔划等。没有内置自动换行但您应该可以扩展fabric.Text 上课和工作。
谢谢@kangax，看起来很强大！

【解决方案1】：

正如@kangax 已经指出的那样：fabric.js 支持多行文本渲染以及字体系列、文本对齐、文本装饰、文本描边等。没有内置自动换行但您应该能够扩展 @987654323 @ 上课并从那里开始工作。更多详情请转至http://fabricjs.com/。

【讨论】：

【解决方案2】：

如您所见，Canvas 对文本的支持最少。

要获得富文本功能，请查看 TinyMCE 的源代码。

TinyMCE 是一个开源、广泛使用的基于 javascript 的文本编辑器，正在积极开发中。它具有出色的特性，它的广泛使用和积极的开发使得大量调试和特性丰富的代码成为可能。

你可以从这个框架开始，拉出你需要在画布中使用的部分。

【讨论】：