Skip to content

Commit 3e8407a

Browse files
PhenXPhenX
committed
Use the SVG path to reduce network bandwith consumption
Parse SVG path
1 parent f74ed50 commit 3e8407a

File tree

4 files changed

+63
-79
lines changed

4 files changed

+63
-79
lines changed

‎classes/font_glyph_outline_simple.cls.php

Lines changed: 6 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -135,6 +135,11 @@ public function getSVGPath(){
135135
return $path;
136136
}
137137

138+
public function parseSVGPath($path) {
139+
preg_match_all('/([a-z])|(-?\d+(?:\.\d+)?)/i', $path, $matches, PREG_PATTERN_ORDER);
140+
return $matches[0];
141+
}
142+
138143
protected function addContourToPath($points, $startIndex, $count) {
139144
$offset = 0;
140145
$path = "";
@@ -150,7 +155,7 @@ protected function addContourToPath($points, $startIndex, $count) {
150155
}
151156

152157
if ($point["onCurve"] && $point_p1["onCurve"]) {
153-
$path .= "Q{$point_p1['x']},{$point_p1['y']} ";
158+
$path .= "L{$point_p1['x']},{$point_p1['y']} ";
154159
$offset++;
155160
}
156161
else if ($point["onCurve"] && !$point_p1["onCurve"] && $point_p2["onCurve"]){

‎classes/font_table_glyf.cls.php

Lines changed: 6 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -58,7 +58,7 @@ public function toHTML(){
5858
$height = round($height/$ratio);
5959
}
6060

61-
$n = 100;
61+
$n = 200;
6262

6363
$s = "<h3>Only the first $n simple glyphs are shown</h3><script>
6464
Glyph.ratio = $ratio;
@@ -76,7 +76,11 @@ public function toHTML(){
7676
break;
7777
}
7878

79-
$shape_json = json_encode($glyph->getGlyphData());
79+
$shape = $glyph->getGlyphData();
80+
$shape["SVGPath"] = $glyph->getSVGPath();
81+
unset($shape["points"]);
82+
unset($shape["instructions"]);
83+
$shape_json = json_encode($shape);
8084

8185
$char = isset($glyphIndexArray[$g]) ? "&#{$glyphIndexArray[$g]};" : "";
8286
$name = isset($names[$g]) ? $names[$g] : sprintf("uni%04x", $char);

‎www/font_info.php

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -114,7 +114,7 @@
114114
<?php foreach($font->getTable() as $table) {
115115
$tag = $table->tag;
116116
$data = $font->getData($tag);
117-
//if ($tag != "glyf") continue;
117+
118118
?>
119119
<li>
120120
<a <?php if (!$data) { ?> style="color: #ccc;" <?php } ?> href="#tabs-<?php echo preg_replace("/[^a-z0-9]/i", "_", $tag); ?>"><?php echo $tag; ?></a>

‎www/js/glyph.js

Lines changed: 50 additions & 75 deletions
Original file line numberDiff line numberDiff line change
@@ -12,89 +12,77 @@ var Glyph = {
1212
return path.match(/([a-z])|(-?\d+(?:\.\d+)?)/ig);
1313
},
1414

15-
addContourToPath: function(ctx, points, startIndex, count) {
16-
ctx.beginPath();
15+
drawSVGPath: function(ctx, path) {
16+
var p = Glyph.splitPath(path);
17+
18+
if (!p) {
19+
return;
20+
}
1721

18-
var offset = 0;
22+
var l = p.length;
23+
var i = 0;
1924

20-
while(offset < count) {
21-
var point_m1 = points[ (offset == 0) ? (startIndex+count-1) : startIndex+(offset-1)%count ];
22-
var point = points[ startIndex + offset%count ];
23-
var point_p1 = points[ startIndex + (offset+1)%count ];
24-
var point_p2 = points[ startIndex + (offset+2)%count ];
25-
26-
if(offset == 0) {
27-
ctx.moveTo(point.x, point.y);
28-
}
25+
while(i < l) {
26+
var v = p[i];
2927

30-
if (point.onCurve && point_p1.onCurve) {
31-
ctx.lineTo( point_p1.x, point_p1.y );
32-
offset++;
33-
}
34-
else if (point.onCurve && !point_p1.onCurve && point_p2.onCurve){
35-
ctx.quadraticCurveTo(point_p1.x, point_p1.y, point_p2.x, point_p2.y);
36-
offset += 2;
37-
}
38-
else if (point.onCurve && !point_p1.onCurve && !point_p2.onCurve){
39-
ctx.quadraticCurveTo(point_p1.x, point_p1.y, Glyph.midValue(point_p1.x, point_p2.x), Glyph.midValue(point_p1.y, point_p2.y));
40-
offset += 2;
41-
}
42-
else if (!point.onCurve && !point_p1.onCurve) {
43-
ctx.quadraticCurveTo(point.x, point.y, Glyph.midValue(point.x, point_p1.x), Glyph.midValue(point.y, point_p1.y));
44-
offset++;
45-
}
46-
else if (!point.onCurve && point_p1.onCurve) {
47-
ctx.quadraticCurveTo(point.x, point.y, point_p1.x, point_p1.y);
48-
offset++;
49-
}
50-
else {
51-
console.error("error");
52-
break;
28+
switch(v) {
29+
case "M":
30+
ctx.beginPath();
31+
ctx.moveTo(parseFloat(p[++i]), parseFloat(p[++i]));
32+
break;
33+
34+
case "L":
35+
ctx.lineTo(parseFloat(p[++i]), parseFloat(p[++i]));
36+
break;
37+
38+
case "Q":
39+
ctx.quadraticCurveTo(parseFloat(p[++i]), parseFloat(p[++i]), parseFloat(p[++i]), parseFloat(p[++i]));
40+
break;
41+
42+
case "z":
43+
ctx.closePath();
44+
ctx.fill();
45+
i++;
46+
break;
47+
48+
default:
49+
i++;
5350
}
5451
}
55-
52+
},
53+
54+
drawHorizLine: function(ctx, y, color) {
55+
ctx.beginPath();
56+
ctx.strokeStyle = color;
57+
ctx.moveTo(0, y);
58+
ctx.lineTo(Glyph.width * Glyph.ratio, y);
5659
ctx.closePath();
57-
ctx.fill();
60+
ctx.stroke();
5861
},
5962

6063
draw: function (canvas, shape, gid) {
61-
var element = canvas[0];
62-
var ctx = element.getContext("2d");
63-
var width = element.width;
64-
var height = element.height;
65-
var ratio = Glyph.ratio;
64+
var element = canvas[0];
65+
var ctx = element.getContext("2d");
66+
var ratio = Glyph.ratio;
67+
Glyph.width = element.width;
68+
Glyph.height = element.height;
6669

6770
ctx.lineWidth = ratio;
6871

6972
// Invert axis
70-
ctx.translate(0, height);
73+
ctx.translate(0, Glyph.height);
7174
ctx.scale(1/ratio, -(1/ratio));
7275

7376
ctx.translate(0, -Glyph.head.yMin);
7477

7578
// baseline
76-
ctx.beginPath();
77-
ctx.strokeStyle = "rgba(0,255,0,0.2)";
78-
ctx.moveTo(0, 0);
79-
ctx.lineTo(width * ratio, 0);
80-
ctx.closePath();
81-
ctx.stroke();
79+
Glyph.drawHorizLine(ctx, 0, "rgba(0,255,0,0.2)");
8280

8381
// ascender
84-
ctx.beginPath();
85-
ctx.strokeStyle = "rgba(255,0,0,0.2)";
86-
ctx.moveTo(0, Glyph.os2.typoAscender);
87-
ctx.lineTo(width * ratio, Glyph.os2.typoAscender);
88-
ctx.closePath();
89-
ctx.stroke();
82+
Glyph.drawHorizLine(ctx, Glyph.os2.typoAscender, "rgba(255,0,0,0.2)");
9083

9184
// descender
92-
ctx.beginPath();
93-
ctx.strokeStyle = "rgba(255,0,0,0.2)";
94-
ctx.moveTo(0, -Math.abs(Glyph.os2.typoDescender));
95-
ctx.lineTo(width * ratio, -Math.abs(Glyph.os2.typoDescender));
96-
ctx.closePath();
97-
ctx.stroke();
85+
Glyph.drawHorizLine(ctx, -Math.abs(Glyph.os2.typoDescender), "rgba(255,0,0,0.2)");
9886

9987
ctx.translate(-Glyph.head.xMin, 0);
10088

@@ -138,19 +126,6 @@ var Glyph = {
138126
ctx.strokeStyle = "black";
139127
ctx.globalCompositeOperation = "xor";
140128

141-
var points = shape.points;
142-
var length = points.length;
143-
var firstIndex = 0;
144-
var count = 0;
145-
146-
for (var i = 0; i < length; i++) {
147-
count++;
148-
149-
if (points[i].endOfContour) {
150-
Glyph.addContourToPath(ctx, points, firstIndex, count);
151-
firstIndex = i + 1;
152-
count = 0;
153-
}
154-
}
129+
Glyph.drawSVGPath(ctx, shape.SVGPath);
155130
}
156131
};

0 commit comments

Comments
 (0)