| <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> | |