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 | /** * Text Utilities */ (function () { var F = Flotr, D = F.DOM, _ = F._, Text = function (o) { this.o = o; }; Text.prototype = { dimensions : function (text, canvasStyle, htmlStyle, className) { if (!text) return { width : 0, height : 0 }; return (this.o.html) ? this.html(text, this.o.element, htmlStyle, className) : this.canvas(text, canvasStyle); }, canvas : function (text, style) { if (!this.o.textEnabled) return; style = style || {}; var metrics = this.measureText(text, style), width = metrics.width, height = style.size || F.defaultOptions.fontSize, angle = style.angle || 0, cosAngle = Math.cos(angle), sinAngle = Math.sin(angle), widthPadding = 2, heightPadding = 6, bounds; bounds = { width: Math.abs(cosAngle * width) + Math.abs(sinAngle * height) + widthPadding, height: Math.abs(sinAngle * width) + Math.abs(cosAngle * height) + heightPadding }; return bounds; }, html : function (text, element, style, className) { var div = D.create('div'); D.setStyles(div, { 'position' : 'absolute', 'top' : '-10000px' }); D.insert(div, '<div style="'+style+'" class="'+className+' flotr-dummy-div">' + text + '</div>'); D.insert(this.o.element, div); return D.size(div); }, measureText : function (text, style) { var context = this.o.ctx, metrics; if (!context.fillText || (F.isIphone && context.measure)) { return { width : context.measure(text, style)}; } style = _.extend({ size: F.defaultOptions.fontSize, weight: 1, angle: 0 }, style); context.save(); context.font = (style.weight > 1 ? "bold " : "") + (style.size*1.3) + "px sans-serif"; metrics = context.measureText(text); context.restore(); return metrics; } }; Flotr.Text = Text; })(); |