2014-02-05 38 views
0

对于给定的字体和给定的字符串,如何在JavaScript中使用下面的图片获取像这样的多边形点?多边形指出字母

alt text

(我知道对SO有关的问题,但它们对于Python或其他语言/环境;我想的JavaScript唯一的解决方案,如果可能的话)

编辑:随访@罗马人答案:

使用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; 
} 
+0

您可能需要写一个画布,然后使用一些算法(您可能可以借用另一种语言)计算,基于画布的像素 –

回答

1

有些工作已经完成了typeface.js,这是一个用“canvas rendered one”替换普通文本的JavaScript库(因此您可以使用任意字体)。

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”对应于“move to x:253 y:638”和“l 379 949”是“draw line to x:379 y:949”。等等,等等。

你应该看看这里来源: http://bazaar.launchpad.net/~davidchester/typeface.js/trunk/view/head:/js/typeface.js

你能适应该渲染器提取您的poligons。这里的主要技巧是让this page为你做出努力并创建字体定义。

+0

很好的答案!让我看看该库... – VividD

+0

我将感兴趣的一种字体转换为typeface.js格式。让我们来看看typeface.js如何绘制字母...... – VividD