对于给定的字体和给定的字符串,如何在 JavaScript 中获取如下图所示的多边形点?
(我知道有关 SO 的相关问题,但它们适用于 Python 或其他语言/环境;如果可能的话,我想要仅 JavaScript 的解决方案)
编辑:跟进@Roman的答案:
使用typeface.js在线工具,我将TrueType字体转换为typeface.js格式。每个字母的表示方式与此类似:(这里是字母 d
的表示方式)
"d": {
"x_min": 135.640625,
"x_max": 792.171875,
"ha": 928,
"o": "m 135 998 l 330 998 q 792 499 763 933 q 330 0 763 65 l 135 0 l 135 998 m 330 151 q 648 499 635 211 q 330 846 635 786 l 287 846 l 287 151 l 330 151 "
},
基于此格式渲染字母的 typeface.js 代码的关键部分是:
switch(action) {
case 'm':
ctx.moveTo(outline[i++], outline[i++]);
break;
case 'l':
ctx.lineTo(outline[i++], outline[i++]);
break;
case 'q':
var cpx = outline[i++];
var cpy = outline[i++];
ctx.quadraticCurveTo(outline[i++], outline[i++], cpx, cpy);
break;
case 'b':
var x = outline[i++];
var y = outline[i++];
ctx.bezierCurveTo(outline[i++], outline[i++], outline[i++], outline[i++], x, y);
break;
}
最佳答案
已经为 typeface.js 完成了一些工作,一个 javascript 库,它用“ Canvas 渲染的一个”替换常规文本(因此您可以使用任意字体)。
typeface.js 通过使用字体定义数据来实现这一点,该数据本质上保存每个字形的绘制指令。字形“A”的数据可能如下所示:m 253 638 l 379 949 q 394 945 387 946 q 409 944 401 944 q 443 949 428 944
q 565 629 525 733 q 673 359 605 526 q 822 0 740 192 q 773 3 804 0 q 736 7
743 7 q 686 4 709 7 q 650 0 664 1 q 588 199 609 137 q 532 355 567 261 l
370 355 l 210 355 l 159 205 q 127 110 142 161 q 99 0 112 59 l 43 6 q 6 3
20 6 q -14 0 -8 0 q 74 211 29 105 q 155 403 119 317 q 253 638 191 490 m
370 422 l 502 422 l 371 760 l 240 422 l 370 422
(我插入了换行符)。
该字符串是一系列绘图操作及其各自的数字参数。例如,“m 253 638”对应于“移动到 x:253 y:638”,“l 379 949”对应于“画线到 x:379 y:949”。等等,等等..
你应该看看这里的来源: http://bazaar.launchpad.net/~davidchester/typeface.js/trunk/view/head:/js/typeface.js
您可以调整该渲染器来提取您的策略。这里的主要技巧是让 this page为您做艰苦的工作并创建字体定义。
关于javascript - 字母中的多边形点,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/21576797/