javascript - 如何将非英文文本分解为 javascript 中的组成字符？

Question

我正在尝试在 html5 Canvas 上沿着曲线绘制文本。为此，我需要将输入文本分解为可以单独旋转和翻译等组成的字符。文本的分解对于英语来说很容易。给定输入字符串 s，s[i] 给出第 i 个字符。但这不适用于非英文字符串。我这里有一个 jsfiddle 来说明问题:http://jsfiddle.net/c6HV8/ .请注意，在撰写本文时， fiddle 在 Chrome 和 IE 中的显示方式有所不同。要查看问题出在哪里，请考虑在字符串 s 中包含非英语文本。创建一个文本节点，您将向其传递 s。接下来，为每个 s[i] 创建一个文本节点，并显示彼此相邻的文本节点。现在比较结果。他们不一样。如何在 javascript 中将非英文文本分解为组成字符，以便两个结果相同？

Answer 1

भाईसाब :) 所以我相信您已经知道，问题是 fillText 和 createText 都在整个字符串上工作，因此它能够评估字符串以及所有变音符号(组合字符)。但是，当您为每个字符调用 fillText 和 createText 时，没有任何变音符号与它们应该附加到的字符一起出现。因此，它们是单独评估和绘制的，这就是为什么您会看到变音符号和虚线圆圈(一种占位符，表示:在此处放置一个字符)。

确实，没有简单的方法可以做到这一点。您的算法基本上必须是这样的:

• 从字符串中查找当前字符。
• 找到所有连续的变音符号字符，然后将它们组合成一个新字符串。
• 使用 fillText 呈现该字符串。

您可以在此处查看结果 a forked version of your fiddle .我修改了示例文本以添加一些更复杂的字符，以确保算法正常工作。代码绝对可以清理；我这样做只是为了验证概念。

如果您想将其国际化，那么困难的部分是为所有 语言的变音符号列出一个代码点列表。 This answer提供了一个列表，可以帮助您入门。