| <!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) { |
| |
| 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> |
|
|
