5

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

在此处输入图像描述

4

1 回答 1

3

भाईसाब :) 所以我相信你已经知道了,问题在于这fillText两者createText都适用于整个字符串,因此它能够评估字符串以及所有变音符号(组合字符)。但是,当您调用每个字符时,任何变音符号都不会fillTextcreateText它们应该附加到的字符一起出现。因此,它们是单独评估和绘制的,这就是为什么你会看到变音符号和虚线圆圈(一种占位符,上面写着:把一个字符放在这里)。

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

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

你可以在这里查看你的 fiddle 的分叉版本的结果。我修改了示例文本以添加一些更复杂的字符,以确保算法正常工作。代码肯定可以清理;我只是将其作为概念验证。

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

于 2014-02-11T22:11:51.183 回答