File size: 3,702 Bytes
af6912c | 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 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 | <!DOCTYPE html>
<html>
<head>
<meta charset='utf-8'>
<meta http-equiv="x-ua-compatible" content="ie=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>abcjs: Font Editor</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/raphael/2.2.7/raphael.min.js"></script>
<script src="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"), 300, 300);
var symb = paper.path(path).attr({fill: "#000", stroke: "none"});
paper.canvas.parentNode.style.height=""+300+"px";
paper.setSize(300,300);
}
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>
<h2>Editor Instructions</h2>
<div>Use this to play with different character shapes in Raphael. After creating the shape you want, paste the output code into
abc_glyphs.js. The legal things to put in the textarea are "M", "l", or "m" followed by two numbers. The last character must be a "z".
</div>
<div>
The "l" element MUST be lower case (that is, use relative coordinates). The path is calculated from the beginning of the entire SVG, so
absolute coordinates will end up in the upper left of the engraving.
</div>
<div>
For instance, the following is the shape of a whole rest:
</div>
<pre>M0.06 0.03
l0.09 -0.06
l5.46 0.00
l5.49 0.00
l0.09 0.06
l0.06 0.09
l0.00 2.19
l0.00 2.19
l-0.06 0.09
l-0.09 0.06
l-5.49 0.00
l-5.46 0.00
l-0.09 -0.06
l-0.06 -0.09
l0.00 -2.19
l0.00 -2.19
z</pre>
</body>
</html>
|