forked from paulrosen/abcjs
-
Notifications
You must be signed in to change notification settings - Fork 0
/
font_editor.html
117 lines (110 loc) · 2.73 KB
/
font_editor.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8'>
<meta http-equiv="Content-Language" content="en">
<title>abcjs: Font Editor</title>
<script src="raphael.js"></script>
<script src="font_generator/scale_font.js"></script>
<style media="screen" type="text/css">
textarea {
width: 800px;
height: 200px;
margin-bottom: 12px;
}
</style>
<script>
function printPath(path) {
// Offset a bit
var arr = path.split(' ');
var first = arr[0].split('M');
if (first.length > 1) {
arr[0] = 'M' + (parseFloat(first[1]) + 30);
arr[1] = parseFloat(arr[1]) + 30;
} else {
arr[1] = parseFloat(arr[1]) + 30;
arr[2] = parseFloat(arr[2]) + 30;
}
path = arr.join(' ');
var paper = Raphael(document.getElementById("canvas-abcjs"), 1000, 10000);
var symb = paper.path(path).attr({fill: "#000", stroke: "none"});
paper.canvas.parentNode.style.height=""+1000+"px";
paper.setSize(1000,1000);
}
function testFont() {
var el = document.getElementById("character-definition");
var text = el.value;
if (Raphael.fonts)
Raphael.fonts['abcjs'] = null;
Raphael.registerFont({
"svg": true,
"w": 250,
"face": {
"font-family": "abcjs",
"font-weight": 400,
"font-stretch": "normal",
"units-per-em": "1000",
"panose-1": "2 0 5 3 0 0 0 0 0 0",
"ascent": "800",
"descent": "-200",
"x-height": "25",
"bbox": "-513.5 -1248.89 800.126 1323.13",
"underline-thickness": "50",
"underline-position": "-75",
"unicode-range": "U+E300-U+E302"
},
"glyphs": {
"\ue301": {
"d": text,
"w": 500
}
}
});
Raphael.fonts['abcjs'][0].glyphs = {
"\ue301": {
"d": text,
"w": 500
}
};
el = document.getElementById("canvas-abcjs");
el.innerHTML = "";
printPath(text);
var output = text.split(/([Mmlz])| /);
var arr = [];
for (var i = 0; i < output.length; i++) {
if (output[i] !== '' && output[i] !== undefined && output[i] !== "\n")
arr.push(output[i]);
}
var steps = [];
var cache = [];
for (i = 0; i < arr.length; i++) {
var el1 = arr[i];
if (el1 === 'z')
steps.push("['" + el1 + "']");
else {
if ("Mlm".indexOf(el1)>=0)
cache.push("'"+el1+"'");
else
cache.push(el1);
if (cache.length === 3) {
steps.push("[" + cache.join(',') + "]");
cache = [];
}
}
}
output = "{d:[";
output += steps.join(",");
output += "],w:12.81,h:15.63}";
document.getElementById("output").innerHTML = output;
}
</script>
</head>
<body onload="testFont();">
<h1>abcjs Font Editor</h1>
<p>
</p>
<textarea id="character-definition" onkeyup="testFont();"></textarea>
<div id="output"></div>
<div id="canvas-abcjs"></div>
</body>
</html>