123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131 |
- var Glyph = {
- ratio: null,
- head: null,
- os2: null,
- hmtx: null,
-
- midValue: function (a, b){
- return a + (b - a)/2;
- },
-
- splitPath: function(path) {
- return path.match(/([a-z])|(-?\d+(?:\.\d+)?)/ig);
- },
-
- drawSVGContours: function(ctx, path) {
- var p = Glyph.splitPath(path);
-
- if (!p) {
- return;
- }
-
- var l = p.length;
- var i = 0;
-
- while(i < l) {
- var v = p[i];
-
- switch(v) {
- case "M":
- ctx.beginPath();
- ctx.moveTo(p[++i], p[++i]);
- break;
-
- case "L":
- ctx.lineTo(p[++i], p[++i]);
- break;
-
- case "Q":
- ctx.quadraticCurveTo(p[++i], p[++i], p[++i], p[++i]);
- break;
-
- case "z":
- ctx.closePath();
- ctx.fill();
- i++;
- break;
-
- default:
- i++;
- }
- }
- },
-
- drawHorizLine: function(ctx, y, color) {
- ctx.beginPath();
- ctx.strokeStyle = color;
- ctx.moveTo(0, y);
- ctx.lineTo(Glyph.width * Glyph.ratio, y);
- ctx.closePath();
- ctx.stroke();
- },
-
- draw: function (canvas, shape, gid) {
- var element = canvas[0];
- var ctx = element.getContext("2d");
- var ratio = Glyph.ratio;
- Glyph.width = element.width;
- Glyph.height = element.height;
-
- ctx.lineWidth = ratio;
-
- // Invert axis
- ctx.translate(0, Glyph.height);
- ctx.scale(1/ratio, -(1/ratio));
-
- ctx.translate(0, -Glyph.head.yMin);
-
- // baseline
- Glyph.drawHorizLine(ctx, 0, "rgba(0,255,0,0.2)");
-
- // ascender
- Glyph.drawHorizLine(ctx, Glyph.os2.typoAscender, "rgba(255,0,0,0.2)");
-
- // descender
- Glyph.drawHorizLine(ctx, -Math.abs(Glyph.os2.typoDescender), "rgba(255,0,0,0.2)");
-
- ctx.translate(-Glyph.head.xMin, 0);
-
- ctx.save();
- var s = ratio*3;
-
- ctx.strokeStyle = "rgba(0,0,0,0.5)";
- ctx.lineWidth = ratio * 1.5;
-
- // origin
- ctx.beginPath();
- ctx.moveTo(-s, -s);
- ctx.lineTo(+s, +s);
- ctx.moveTo(+s, -s);
- ctx.lineTo(-s, +s);
- ctx.closePath();
- ctx.stroke();
-
- // horizontal advance
- var advance = Glyph.hmtx[gid][0];
- ctx.beginPath();
- ctx.moveTo(-s+advance, -s);
- ctx.lineTo(+s+advance, +s);
- ctx.moveTo(+s+advance, -s);
- ctx.lineTo(-s+advance, +s);
- ctx.closePath();
- ctx.stroke();
- ctx.restore();
-
- if (!shape) {
- return;
- }
-
- // glyph bounding box
- ctx.beginPath();
- ctx.strokeStyle = "rgba(0,0,0,0.3)";
- ctx.rect(0, 0, shape.xMin + shape.xMax, shape.yMin + shape.yMax);
- ctx.closePath();
- ctx.stroke();
-
- ctx.strokeStyle = "black";
- ctx.globalCompositeOperation = "xor";
-
- Glyph.drawSVGContours(ctx, shape.SVGContours);
- }
- };
|