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

Question

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

Answer 1

\xe0\xa4\xad\xe0\xa4\xbe\xe0\xa4\x88\xe0\xa4\xb8\xe0\xa4\xbe\xe0\xa4\xac :) 所以我确信你已经知道了，问题是fillText和createText都适用于整个字符串，因此它能够评估字符串以及所有变音符号（组合字符）。但是，当您调用fillText每个createText字符时，没有任何变音符号与它们应该附加的字符一起出现。因此，它们是单独评估和绘制的，这就是为什么您会看到变音符号和虚线圆圈（一种占位符，表示：在此处放置一个字符）。

\n\n

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

\n\n

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

\n\n

您可以在此处查看fiddle 的分叉版本的结果。我修改了示例文本以添加一些更复杂的字符，只是为了确保算法正常工作。代码绝对可以被清理；我只是将其作为概念验证。

\n\n

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

\n