javascript - Javascript 中点缀字体的坐标

Question

受此启发tutorial , 哪个

• 画出“Google”这个词
• 以许多手动定位的圆圈/球的形式 (1)
• 在 html5 Canvas 上，

在 1) 例如这是一个'o'

new Ball(210, 81, 0, 0, red);
new Ball(197, 91, 0, 0, red);
new Ball(196, 103, 0, 0, red);
new Ball(200, 116, 0, 0, red);
new Ball(209, 127, 0, 0, red);
new Ball(223, 130, 0, 0, red);
new Ball(237, 127, 0, 0, red);
new Ball(244, 114, 0, 0, red);
new Ball(242, 98, 0, 0, red);
new Ball(237, 86, 0, 0, red);
new Ball(225, 81, 0, 0, red);

我想知道，是否有一种方法可以更自动化地定义圆圈的坐标。例如，有没有办法从字体路径中得出位置？

编辑:我的目标是至少映射所有常规字母(两种情况)和数字，这样至少有 62 个字符。

续:偶然发现这个问题的人可能也想接受这个 one .

Answer 1

is there a way to derive the positions from font paths?

不在 Canvas 中或使用 Canvas 命令。

有多种程序可以将字体转换为 SVG 路径。

但是您不能只使用 SVG 路径的点，因为例如，贝塞尔曲线仅由 3 个点描述，但可能占圆的 1/4。从这些路径中，有一些算法会将路径分解为一系列点(即“Q”将变成 100 个点来描述圆和一条线)。

您应该能够很容易地搜索这些单独的部分。

实际上，最简单的方法是从像素字体 (like this) 开始并将每个黑色像素变成一个点。你当然不会得到很好的分辨率，但相对来说应该很容易。