如何使用svg绘制字体的字形？
如何使用svg绘制字体的字形？
提问于 2016-08-22 06:43:02
我试图画一个ttf字体文件的所有图形。我使用TTX创建了一个XML文件，并将其与python解析，以编写html文件并创建SVG。但是SVG不支持有两个以上控制点的曲线，所以轮廓不是应该的。
我怎么才能解决这个问题？或者还有其他方法来画字形轮廓呢？
这是我使用的html代码：
<html lang="en">
<head>
<meta charset="UTF-8">
<title>font</title>
</head>
<body>
<svg width="800" height="800" viewbox="0 0 2000 300" overflow="visible">
<g transform="scale(1,-1)">
<path d="M255 168 C221 168,171 176,152 187 Q102 212,102 272 Q102 331,156 385 C204 433,351 493,414 493 C456 493,503 464,503 434 Q503 393,451 352 C431 336,386 310,362 303 L355 303 Q345 303,339 310 Q333 317,332 328 C332 334,340 348,351 350 Q374 356,412 383 Q456 412,456 434 C456 440,440 446,426 446 C412 446,381 442,358 437 C347 435,323 429,311 425 C242 399,149 316,149 272 C149 240,200 215,244 215 Q293 215,359 229 Q397 237,411 240 Q433 246,465 257 C478 260,502 268,524 276 L534 279 Q544 279,551 272 Q556 264,556 255 C556 248,550 238,541 233 L415 188 Q333 156,281 128 Q209 91,172 51 Q139 16,122 -17 Q107 -51,107 -80 Q107 -129,151 -162 Q193 -191,257 -191 L478 -88 Q484 -81,494 -80 C502 -80,519 -95,519 -106 Q519 -114,512 -121 Q460 -179,389 -211 Q326 -239,261 -239 C176 -239,59 -150,59 -80 C59 -44,96 38,137 83 Q159 107,190 128 C202 138,237 159,255 168" stroke="black" fill="transparent"></path>
</svg>
</body>
</html>
这就是字形轮廓应该是什么样子(来自fontLab Studio)
回答 1
Stack Overflow用户
发布于 2016-08-22 17:46:36
Truetype字体不使用立方体beziers。他们使用二次贝兹。因此，如果您看到一个点序列："on，off，off on"，那就不是有两个端点和两个控制点的三次bezier。这实际上是一个二次bezier，它有两个端点(“关于曲线”点)、两个控制点(“离曲线”点)和一个下降的中间点"on“点。即：
on off (on) off on要重建中间点，只需找到两个“关闭”控制点之间的中点。
例如，第一个“立方”bezier段：
C 221,168, 171,176, 152,187可能是两条二次bezier曲线：
Q 221,168, 191,172
Q 171,176, 152,187其中新的端点("on曲线“点) (191,172) =(221+171)/ 2，(168+176) / 2)。
注意，我在这里猜测，因为我不知道文件中的原始坐标和标志是什么。
如果你有一个较长的序列“离曲线”点，那么你将需要插入额外的“上曲线”点。例如，在某一时刻，我可以看到一个由四个断点组成的序列，所以您需要插入三个on点。
on off (on) off (on) off (on) off on同样，在每一种情况下，只需计算两个相邻的离点之间的点。
更新
例如，这是一个从TTF文件中转储出来的字形的数据。
Glyph 54: off = 0x00001E36, len = 210
numberOfContours: 1
xMin: 54
yMin: -12
xMax: 502
yMax: 712
EndPoints
---------
0: 44
Coordinates
-----------
0: Rel ( 431, 578) -> Abs ( 431, 578) on
1: Rel ( -60, 40) -> Abs ( 371, 618)
2: Rel ( -53, 0) -> Abs ( 318, 618) on
3: Rel ( -43, 0) -> Abs ( 275, 618)
4: Rel ( -48, -42) -> Abs ( 227, 576)
5: Rel ( 0, -32) -> Abs ( 227, 544) on
6: Rel ( 0, -22) -> Abs ( 227, 522)
7: Rel ( 31, -42) -> Abs ( 258, 480)
8: Rel ( 23, -20) -> Abs ( 281, 460) on
9: Rel ( 77, -62) -> Abs ( 358, 398) on
10: Rel ( 52, -42) -> Abs ( 410, 356)
11: Rel ( 59, -64) -> Abs ( 469, 292)
12: Rel ( 33, -72) -> Abs ( 502, 220)
13: Rel ( 0, -42) -> Abs ( 502, 178) on
14: Rel ( 0, -44) -> Abs ( 502, 134)
15: Rel ( -58, -90) -> Abs ( 444, 44)
16: Rel ( -109, -56) -> Abs ( 335, -12)
17: Rel ( -75, 0) -> Abs ( 260, -12) on
18: Rel ( -57, 0) -> Abs ( 203, -12)
19: Rel ( -112, 36) -> Abs ( 91, 24)
20: Rel ( -37, 34) -> Abs ( 54, 58) on
21: Rel ( 51, 80) -> Abs ( 105, 138) on
22: Rel ( 33, -24) -> Abs ( 138, 114)
23: Rel ( 69, -32) -> Abs ( 207, 82)
24: Rel ( 41, 0) -> Abs ( 248, 82) on
25: Rel ( 47, 0) -> Abs ( 295, 82)
26: Rel ( 62, 51) -> Abs ( 357, 133)
27: Rel ( 0, 46) -> Abs ( 357, 179) on
28: Rel ( 0, 34) -> Abs ( 357, 213)
29: Rel ( -42, 57) -> Abs ( 315, 270)
30: Rel ( -39, 30) -> Abs ( 276, 300) on
31: Rel ( -69, 51) -> Abs ( 207, 351) on
32: Rel ( -58, 49) -> Abs ( 149, 400) on
33: Rel ( -14, 13) -> Abs ( 135, 413)
34: Rel ( -33, 42) -> Abs ( 102, 455)
35: Rel ( -20, 53) -> Abs ( 82, 508)
36: Rel ( 0, 34) -> Abs ( 82, 542) on
37: Rel ( 0, 45) -> Abs ( 82, 587)
38: Rel ( 42, 59) -> Abs ( 124, 646)
39: Rel ( 41, 32) -> Abs ( 165, 678)
40: Rel ( 78, 34) -> Abs ( 243, 712)
41: Rel ( 61, 0) -> Abs ( 304, 712) on
42: Rel ( 56, 0) -> Abs ( 360, 712)
43: Rel ( 95, -34) -> Abs ( 455, 678)
44: Rel ( 26, -27) -> Abs ( 481, 651) on我在所有的点上加上了"on“，这些点的标志(这里没有显示)表明它们是曲线上的点。
因此，如果我们绘制曲线上的点(绿色)和非曲线点(红色)，我们得到：
.on {
fill: green;
}
.off {
fill: red;
}<!-- 54,-12 502,712 -->
<svg width="500px" height="500px" viewBox="54 -12 448 724" overflow="visible">
<g transform="translate(0,712) scale(1,-1)">
<g class="points">
<circle cx="431" cy="578" r="5" class="on"/>
<circle cx="371" cy="618" r="5" class="off"/>
<circle cx="318" cy="618" r="5" class="on"/>
<circle cx="275" cy="618" r="5" class="off"/>
<circle cx="227" cy="576" r="5" class="off"/>
<circle cx="227" cy="544" r="5" class="on"/>
<circle cx="227" cy="522" r="5" class="off"/>
<circle cx="258" cy="480" r="5" class="off"/>
<circle cx="281" cy="460" r="5" class="on"/>
<circle cx="358" cy="398" r="5" class="on"/>
<circle cx="410" cy="356" r="5" class="off"/>
<circle cx="469" cy="292" r="5" class="off"/>
<circle cx="502" cy="220" r="5" class="off"/>
<circle cx="502" cy="178" r="5" class="on"/>
<circle cx="502" cy="134" r="5" class="off"/>
<circle cx="444" cy=" 44" r="5" class="off"/>
<circle cx="335" cy="-12" r="5" class="off"/>
<circle cx="260" cy="-12" r="5" class="on"/>
<circle cx="203" cy="-12" r="5" class="off"/>
<circle cx=" 91" cy=" 24" r="5" class="off"/>
<circle cx=" 54" cy=" 58" r="5" class="on"/>
<circle cx="105" cy="138" r="5" class="on"/>
<circle cx="138" cy="114" r="5" class="off"/>
<circle cx="207" cy=" 82" r="5" class="off"/>
<circle cx="248" cy=" 82" r="5" class="on"/>
<circle cx="295" cy=" 82" r="5" class="off"/>
<circle cx="357" cy="133" r="5" class="off"/>
<circle cx="357" cy="179" r="5" class="on"/>
<circle cx="357" cy="213" r="5" class="off"/>
<circle cx="315" cy="270" r="5" class="off"/>
<circle cx="276" cy="300" r="5" class="on"/>
<circle cx="207" cy="351" r="5" class="on"/>
<circle cx="149" cy="400" r="5" class="on"/>
<circle cx="135" cy="413" r="5" class="off"/>
<circle cx="102" cy="455" r="5" class="off"/>
<circle cx=" 82" cy="508" r="5" class="off"/>
<circle cx=" 82" cy="542" r="5" class="on"/>
<circle cx=" 82" cy="587" r="5" class="off"/>
<circle cx="124" cy="646" r="5" class="off"/>
<circle cx="165" cy="678" r="5" class="off"/>
<circle cx="243" cy="712" r="5" class="off"/>
<circle cx="304" cy="712" r="5" class="on"/>
<circle cx="360" cy="712" r="5" class="off"/>
<circle cx="455" cy="678" r="5" class="off"/>
<circle cx="481" cy="651" r="5" class="on"/>
</g>
</g>
</svg>
现在走到小路上。我们使用二次bezier (Q)路径命令。如前所述，如果我们有两个相邻的非曲线点，我们插入一个计算上的曲线点。插入点只是两个离曲线点的平均值.如果有两个相邻的曲线上点，我们插入一条线(L)代替.
这给了我们以下的结果。左列中的和弦是原始的开/关点。右边列中的弦是插入的计算点。
.on {
fill: green;
}
.off {
fill: red;
}
path.outline {
fill: none;
stroke: grey;
}<!-- 54,-12 502,712 -->
<svg width="500px" height="500px" viewBox="54 -12 448 724" overflow="visible">
<g transform="translate(0,712) scale(1,-1)">
<path class="outline"
d="M 431, 578
Q 371, 618
318, 618
Q 275, 618 251,597
Q 227, 576
227, 544
Q 227, 522 243.5,501
Q 258, 480
281, 460
L 358, 398
Q 410, 356 439.5,324
Q 469, 292 485.5,256
Q 502, 220
502, 178
Q 502, 134 473,89
Q 444, 44 389.5,16
Q 335, -12
260, -12
Q 203, -12 147,6
Q 91, 24
54, 58
L 105, 138
Q 138, 114 172.5,98
Q 207, 82
248, 82
Q 295, 82 325,107.5
Q 357, 133
357, 179
Q 357, 213 336,240.5
Q 315, 270
276, 300
L 207, 351
L 149, 400
Q 135, 413 118.5,434
Q 102, 455 92,481.5
Q 82, 508
82, 542
Q 82, 587 103,616.5
Q 124, 646 144.5,662
Q 165, 678 204,695
Q 243, 712
304, 712
Q 360, 712 407.5,695
Q 455, 678 468,664.5
L 481, 651
Z"/>
<g class="points">
<circle cx="431" cy="578" r="5" class="on"/>
<circle cx="371" cy="618" r="5" class="off"/>
<circle cx="318" cy="618" r="5" class="on"/>
<circle cx="275" cy="618" r="5" class="off"/>
<circle cx="227" cy="576" r="5" class="off"/>
<circle cx="227" cy="544" r="5" class="on"/>
<circle cx="227" cy="522" r="5" class="off"/>
<circle cx="258" cy="480" r="5" class="off"/>
<circle cx="281" cy="460" r="5" class="on"/>
<circle cx="358" cy="398" r="5" class="on"/>
<circle cx="410" cy="356" r="5" class="off"/>
<circle cx="469" cy="292" r="5" class="off"/>
<circle cx="502" cy="220" r="5" class="off"/>
<circle cx="502" cy="178" r="5" class="on"/>
<circle cx="502" cy="134" r="5" class="off"/>
<circle cx="444" cy=" 44" r="5" class="off"/>
<circle cx="335" cy="-12" r="5" class="off"/>
<circle cx="260" cy="-12" r="5" class="on"/>
<circle cx="203" cy="-12" r="5" class="off"/>
<circle cx=" 91" cy=" 24" r="5" class="off"/>
<circle cx=" 54" cy=" 58" r="5" class="on"/>
<circle cx="105" cy="138" r="5" class="on"/>
<circle cx="138" cy="114" r="5" class="off"/>
<circle cx="207" cy=" 82" r="5" class="off"/>
<circle cx="248" cy=" 82" r="5" class="on"/>
<circle cx="295" cy=" 82" r="5" class="off"/>
<circle cx="357" cy="133" r="5" class="off"/>
<circle cx="357" cy="179" r="5" class="on"/>
<circle cx="357" cy="213" r="5" class="off"/>
<circle cx="315" cy="270" r="5" class="off"/>
<circle cx="276" cy="300" r="5" class="on"/>
<circle cx="207" cy="351" r="5" class="on"/>
<circle cx="149" cy="400" r="5" class="on"/>
<circle cx="135" cy="413" r="5" class="off"/>
<circle cx="102" cy="455" r="5" class="off"/>
<circle cx=" 82" cy="508" r="5" class="off"/>
<circle cx=" 82" cy="542" r="5" class="on"/>
<circle cx=" 82" cy="587" r="5" class="off"/>
<circle cx="124" cy="646" r="5" class="off"/>
<circle cx="165" cy="678" r="5" class="off"/>
<circle cx="243" cy="712" r="5" class="off"/>
<circle cx="304" cy="712" r="5" class="on"/>
<circle cx="360" cy="712" r="5" class="off"/>
<circle cx="455" cy="678" r="5" class="off"/>
<circle cx="481" cy="651" r="5" class="on"/>
</g>
</g>
</svg>
如果我们用黑色绘制形状，我们就会得到一个看起来正确的字形。
<svg width="100px" height="100px" viewBox="54 -12 448 724" overflow="visible">
<g transform="translate(0,712) scale(1,-1)">
<path d="M 431, 578
Q 371, 618
318, 618
Q 275, 618 251,597
Q 227, 576
227, 544
Q 227, 522 243.5,501
Q 258, 480
281, 460
L 358, 398
Q 410, 356 439.5,324
Q 469, 292 485.5,256
Q 502, 220
502, 178
Q 502, 134 473,89
Q 444, 44 389.5,16
Q 335, -12
260, -12
Q 203, -12 147,6
Q 91, 24
54, 58
L 105, 138
Q 138, 114 172.5,98
Q 207, 82
248, 82
Q 295, 82 325,107.5
Q 357, 133
357, 179
Q 357, 213 336,240.5
Q 315, 270
276, 300
L 207, 351
L 149, 400
Q 135, 413 118.5,434
Q 102, 455 92,481.5
Q 82, 508
82, 542
Q 82, 587 103,616.5
Q 124, 646 144.5,662
Q 165, 678 204,695
Q 243, 712
304, 712
Q 360, 712 407.5,695
Q 455, 678 468,664.5
L 481, 651
Z"/>
</g>
</svg>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/39072794
复制相关文章
相似问题
腾讯云开发者
