From f899a097a83a58b876062dfa6a0f5620a6c54814 Mon Sep 17 00:00:00 2001 From: "olau@iola.dk" Date: Fri, 20 Feb 2009 16:09:55 +0000 Subject: [PATCH] Use SVN release of excanvas, hopefully this will make Flot work with IE git-svn-id: https://flot.googlecode.com/svn/trunk@135 1e0a6537-2640-0410-bfb7-f154510ff394 --- NEWS.txt | 4 +- examples/basic.html | 2 +- examples/dual-axis.html | 2 +- examples/graph-types.html | 2 +- examples/index.html | 2 +- examples/interacting.html | 2 +- examples/selection.html | 2 +- examples/setting-options.html | 2 +- examples/time.html | 2 +- examples/tracking.html | 2 +- examples/turning-series.html | 2 +- examples/visitors.html | 2 +- examples/zooming.html | 2 +- excanvas.js | 649 ++++++++++++++++++++-------------- excanvas.min.js | 1 + excanvas.pack.js | 1 - jquery.flot.js | 19 +- 17 files changed, 403 insertions(+), 295 deletions(-) create mode 100644 excanvas.min.js delete mode 100644 excanvas.pack.js diff --git a/NEWS.txt b/NEWS.txt index 09cefac..abce9e4 100644 --- a/NEWS.txt +++ b/NEWS.txt @@ -69,7 +69,9 @@ Bug fixes: prevent it from overlapping the plot itself. This also fixes a problem with anti-aliasing when the width is 1 pixel (reported by Anthony Ettinger). - +- Imported SVN version of excanvas and fixed an issue with the newer + version. Hopefully, this will make Flot work with IE8 (nudge by + Fabien Menager). Flot 0.5 -------- diff --git a/examples/basic.html b/examples/basic.html index afd7ac1..fde8def 100644 --- a/examples/basic.html +++ b/examples/basic.html @@ -4,7 +4,7 @@ Flot Examples - + diff --git a/examples/dual-axis.html b/examples/dual-axis.html index d97fa8a..03a94e6 100644 --- a/examples/dual-axis.html +++ b/examples/dual-axis.html @@ -4,7 +4,7 @@ Flot Examples - + diff --git a/examples/graph-types.html b/examples/graph-types.html index 64aa0e9..7cf598a 100644 --- a/examples/graph-types.html +++ b/examples/graph-types.html @@ -4,7 +4,7 @@ Flot Examples - + diff --git a/examples/index.html b/examples/index.html index b7ad541..a3ccdf7 100644 --- a/examples/index.html +++ b/examples/index.html @@ -4,7 +4,7 @@ Flot Examples - + diff --git a/examples/interacting.html b/examples/interacting.html index b5c8003..5cb59d0 100644 --- a/examples/interacting.html +++ b/examples/interacting.html @@ -4,7 +4,7 @@ Flot Examples - + diff --git a/examples/selection.html b/examples/selection.html index 944dc49..56cb3db 100644 --- a/examples/selection.html +++ b/examples/selection.html @@ -4,7 +4,7 @@ Flot Examples - + diff --git a/examples/setting-options.html b/examples/setting-options.html index 4fca496..b0570b2 100644 --- a/examples/setting-options.html +++ b/examples/setting-options.html @@ -4,7 +4,7 @@ Flot Examples - + diff --git a/examples/time.html b/examples/time.html index f810a28..d1dd4e3 100644 --- a/examples/time.html +++ b/examples/time.html @@ -4,7 +4,7 @@ Flot Examples - + diff --git a/examples/tracking.html b/examples/tracking.html index ba74ebc..722f960 100644 --- a/examples/tracking.html +++ b/examples/tracking.html @@ -4,7 +4,7 @@ Flot Examples - + diff --git a/examples/turning-series.html b/examples/turning-series.html index 83fb134..7b25479 100644 --- a/examples/turning-series.html +++ b/examples/turning-series.html @@ -4,7 +4,7 @@ Flot Examples - + diff --git a/examples/visitors.html b/examples/visitors.html index 4eddea9..13440fa 100644 --- a/examples/visitors.html +++ b/examples/visitors.html @@ -4,7 +4,7 @@ Flot Examples - + diff --git a/examples/zooming.html b/examples/zooming.html index 8df55d3..d74f065 100644 --- a/examples/zooming.html +++ b/examples/zooming.html @@ -4,7 +4,7 @@ Flot Examples - + diff --git a/excanvas.js b/excanvas.js index 7914cb9..73963d8 100644 --- a/excanvas.js +++ b/excanvas.js @@ -28,80 +28,101 @@ // (http://www.whatwg.org/specs/web-apps/current-work/#the-doctype) // or use Box Sizing Behavior from WebFX // (http://webfx.eae.net/dhtml/boxsizing/boxsizing.html) +// * Non uniform scaling does not correctly scale strokes. // * Optimize. There is always room for speed improvements. -// only add this code if we do not already have a canvas implementation -if (!window.CanvasRenderingContext2D) { +// Only add this code if we do not already have a canvas implementation +if (!document.createElement('canvas').getContext) { -(function () { +(function() { // alias some functions to make (compiled) code shorter var m = Math; var mr = m.round; var ms = m.sin; var mc = m.cos; + var abs = m.abs; + var sqrt = m.sqrt; // this is used for sub pixel precision var Z = 10; var Z2 = Z / 2; + /** + * This funtion is assigned to the elements as element.getContext(). + * @this {HTMLElement} + * @return {CanvasRenderingContext2D_} + */ + function getContext() { + return this.context_ || + (this.context_ = new CanvasRenderingContext2D_(this)); + } + + var slice = Array.prototype.slice; + + /** + * Binds a function to an object. The returned function will always use the + * passed in {@code obj} as {@code this}. + * + * Example: + * + * g = bind(f, obj, a, b) + * g(c, d) // will do f.call(obj, a, b, c, d) + * + * @param {Function} f The function to bind the object to + * @param {Object} obj The object that should act as this when the function + * is called + * @param {*} var_args Rest arguments that will be used as the initial + * arguments when the function is called + * @return {Function} A new function that has bound this + */ + function bind(f, obj, var_args) { + var a = slice.call(arguments, 2); + return function() { + return f.apply(obj, a.concat(slice.call(arguments))); + }; + } + var G_vmlCanvasManager_ = { - init: function (opt_doc) { - var doc = opt_doc || document; + init: function(opt_doc) { if (/MSIE/.test(navigator.userAgent) && !window.opera) { - var self = this; - doc.attachEvent("onreadystatechange", function () { - self.init_(doc); - }); + var doc = opt_doc || document; + // Create a dummy element so that IE will allow canvas elements to be + // recognized. + doc.createElement('canvas'); + doc.attachEvent('onreadystatechange', bind(this.init_, this, doc)); } }, - init_: function (doc) { - if (doc.readyState == "complete") { - // create xmlns - if (!doc.namespaces["g_vml_"]) { - doc.namespaces.add("g_vml_", "urn:schemas-microsoft-com:vml"); - } + init_: function(doc) { + // create xmlns + if (!doc.namespaces['g_vml_']) { + doc.namespaces.add('g_vml_', 'urn:schemas-microsoft-com:vml', + '#default#VML'); + + } + if (!doc.namespaces['g_o_']) { + doc.namespaces.add('g_o_', 'urn:schemas-microsoft-com:office:office', + '#default#VML'); + } - // setup default css + // Setup default CSS. Only add one style sheet per document + if (!doc.styleSheets['ex_canvas_']) { var ss = doc.createStyleSheet(); - ss.cssText = "canvas{display:inline-block;overflow:hidden;" + + ss.owningElement.id = 'ex_canvas_'; + ss.cssText = 'canvas{display:inline-block;overflow:hidden;' + // default size is 300x150 in Gecko and Opera - "text-align:left;width:300px;height:150px}" + - "g_vml_\\:*{behavior:url(#default#VML)}"; - - // find all canvas elements - var els = doc.getElementsByTagName("canvas"); - for (var i = 0; i < els.length; i++) { - if (!els[i].getContext) { - this.initElement(els[i]); - } - } + 'text-align:left;width:300px;height:150px}' + + 'g_vml_\\:*{behavior:url(#default#VML)}' + + 'g_o_\\:*{behavior:url(#default#VML)}'; + } - }, - fixElement_: function (el) { - // in IE before version 5.5 we would need to add HTML: to the tag name - // but we do not care about IE before version 6 - var outerHTML = el.outerHTML; - - var newEl = el.ownerDocument.createElement(outerHTML); - // if the tag is still open IE has created the children as siblings and - // it has also created a tag with the name "/FOO" - if (outerHTML.slice(-2) != "/>") { - var tagName = "/" + el.tagName; - var ns; - // remove content - while ((ns = el.nextSibling) && ns.tagName != tagName) { - ns.removeNode(); - } - // remove the incorrect closing tag - if (ns) { - ns.removeNode(); - } + // find all canvas elements + var els = doc.getElementsByTagName('canvas'); + for (var i = 0; i < els.length; i++) { + this.initElement(els[i]); } - el.parentNode.replaceChild(newEl, el); - return newEl; }, /** @@ -112,35 +133,37 @@ if (!window.CanvasRenderingContext2D) { * @param {HTMLElement} el The canvas element to initialize. * @return {HTMLElement} the element that was created. */ - initElement: function (el) { - el = this.fixElement_(el); - el.getContext = function () { - if (this.context_) { - return this.context_; + initElement: function(el) { + if (!el.getContext) { + + el.getContext = getContext; + + // Remove fallback content. There is no way to hide text nodes so we + // just remove all childNodes. We could hide all elements and remove + // text nodes but who really cares about the fallback content. + el.innerHTML = ''; + + // do not use inline function because that will leak memory + el.attachEvent('onpropertychange', onPropertyChange); + el.attachEvent('onresize', onResize); + + var attrs = el.attributes; + if (attrs.width && attrs.width.specified) { + // TODO: use runtimeStyle and coordsize + // el.getContext().setWidth_(attrs.width.nodeValue); + el.style.width = attrs.width.nodeValue + 'px'; + } else { + el.width = el.clientWidth; } - return this.context_ = new CanvasRenderingContext2D_(this); - }; - - // do not use inline function because that will leak memory - el.attachEvent('onpropertychange', onPropertyChange); - el.attachEvent('onresize', onResize); - - var attrs = el.attributes; - if (attrs.width && attrs.width.specified) { - // TODO: use runtimeStyle and coordsize - // el.getContext().setWidth_(attrs.width.nodeValue); - el.style.width = attrs.width.nodeValue + "px"; - } else { - el.width = el.clientWidth; - } - if (attrs.height && attrs.height.specified) { - // TODO: use runtimeStyle and coordsize - // el.getContext().setHeight_(attrs.height.nodeValue); - el.style.height = attrs.height.nodeValue + "px"; - } else { - el.height = el.clientHeight; + if (attrs.height && attrs.height.specified) { + // TODO: use runtimeStyle and coordsize + // el.getContext().setHeight_(attrs.height.nodeValue); + el.style.height = attrs.height.nodeValue + 'px'; + } else { + el.height = el.clientHeight; + } + //el.getContext().setCoordsize_() } - //el.getContext().setCoordsize_() return el; } }; @@ -150,11 +173,11 @@ if (!window.CanvasRenderingContext2D) { switch (e.propertyName) { case 'width': - el.style.width = el.attributes.width.nodeValue + "px"; + el.style.width = el.attributes.width.nodeValue + 'px'; el.getContext().clearRect(); break; case 'height': - el.style.height = el.attributes.height.nodeValue + "px"; + el.style.height = el.attributes.height.nodeValue + 'px'; el.getContext().clearRect(); break; } @@ -214,43 +237,45 @@ if (!window.CanvasRenderingContext2D) { o2.shadowOffsetX = o1.shadowOffsetX; o2.shadowOffsetY = o1.shadowOffsetY; o2.strokeStyle = o1.strokeStyle; + o2.globalAlpha = o1.globalAlpha; o2.arcScaleX_ = o1.arcScaleX_; o2.arcScaleY_ = o1.arcScaleY_; + o2.lineScale_ = o1.lineScale_; } function processStyle(styleString) { var str, alpha = 1; styleString = String(styleString); - if (styleString.substring(0, 3) == "rgb") { - var start = styleString.indexOf("(", 3); - var end = styleString.indexOf(")", start + 1); - var guts = styleString.substring(start + 1, end).split(","); + if (styleString.substring(0, 3) == 'rgb') { + var start = styleString.indexOf('(', 3); + var end = styleString.indexOf(')', start + 1); + var guts = styleString.substring(start + 1, end).split(','); - str = "#"; + str = '#'; for (var i = 0; i < 3; i++) { str += dec2hex[Number(guts[i])]; } - if ((guts.length == 4) && (styleString.substr(3, 1) == "a")) { + if (guts.length == 4 && styleString.substr(3, 1) == 'a') { alpha = guts[3]; } } else { str = styleString; } - return [str, alpha]; + return {color: str, alpha: alpha}; } function processLineCap(lineCap) { switch (lineCap) { - case "butt": - return "flat"; - case "round": - return "round"; - case "square": + case 'butt': + return 'flat'; + case 'round': + return 'round'; + case 'square': default: - return "square"; + return 'square'; } } @@ -260,7 +285,7 @@ if (!window.CanvasRenderingContext2D) { * @param {HTMLElement} surfaceElement The element that the 2D context should * be associated with */ - function CanvasRenderingContext2D_(surfaceElement) { + function CanvasRenderingContext2D_(surfaceElement) { this.m_ = createMatrixIdentity(); this.mStack_ = []; @@ -268,12 +293,12 @@ if (!window.CanvasRenderingContext2D) { this.currentPath_ = []; // Canvas context properties - this.strokeStyle = "#000"; - this.fillStyle = "#000"; + this.strokeStyle = '#000'; + this.fillStyle = '#000'; this.lineWidth = 1; - this.lineJoin = "miter"; - this.lineCap = "butt"; + this.lineJoin = 'miter'; + this.lineCap = 'butt'; this.miterLimit = Z * 1; this.globalAlpha = 1; this.canvas = surfaceElement; @@ -288,67 +313,88 @@ if (!window.CanvasRenderingContext2D) { this.element_ = el; this.arcScaleX_ = 1; this.arcScaleY_ = 1; + this.lineScale_ = 1; } var contextPrototype = CanvasRenderingContext2D_.prototype; contextPrototype.clearRect = function() { - this.element_.innerHTML = ""; - this.currentPath_ = []; + this.element_.innerHTML = ''; }; contextPrototype.beginPath = function() { // TODO: Branch current matrix so that save/restore has no effect // as per safari docs. - this.currentPath_ = []; }; contextPrototype.moveTo = function(aX, aY) { - this.currentPath_.push({type: "moveTo", x: aX, y: aY}); - this.currentX_ = aX; - this.currentY_ = aY; + var p = this.getCoords_(aX, aY); + this.currentPath_.push({type: 'moveTo', x: p.x, y: p.y}); + this.currentX_ = p.x; + this.currentY_ = p.y; }; contextPrototype.lineTo = function(aX, aY) { - this.currentPath_.push({type: "lineTo", x: aX, y: aY}); - this.currentX_ = aX; - this.currentY_ = aY; + var p = this.getCoords_(aX, aY); + this.currentPath_.push({type: 'lineTo', x: p.x, y: p.y}); + + this.currentX_ = p.x; + this.currentY_ = p.y; }; contextPrototype.bezierCurveTo = function(aCP1x, aCP1y, aCP2x, aCP2y, aX, aY) { - this.currentPath_.push({type: "bezierCurveTo", - cp1x: aCP1x, - cp1y: aCP1y, - cp2x: aCP2x, - cp2y: aCP2y, - x: aX, - y: aY}); - this.currentX_ = aX; - this.currentY_ = aY; + var p = this.getCoords_(aX, aY); + var cp1 = this.getCoords_(aCP1x, aCP1y); + var cp2 = this.getCoords_(aCP2x, aCP2y); + bezierCurveTo(this, cp1, cp2, p); }; + // Helper function that takes the already fixed cordinates. + function bezierCurveTo(self, cp1, cp2, p) { + self.currentPath_.push({ + type: 'bezierCurveTo', + cp1x: cp1.x, + cp1y: cp1.y, + cp2x: cp2.x, + cp2y: cp2.y, + x: p.x, + y: p.y + }); + self.currentX_ = p.x; + self.currentY_ = p.y; + } + contextPrototype.quadraticCurveTo = function(aCPx, aCPy, aX, aY) { // the following is lifted almost directly from // http://developer.mozilla.org/en/docs/Canvas_tutorial:Drawing_shapes - var cp1x = this.currentX_ + 2.0 / 3.0 * (aCPx - this.currentX_); - var cp1y = this.currentY_ + 2.0 / 3.0 * (aCPy - this.currentY_); - var cp2x = cp1x + (aX - this.currentX_) / 3.0; - var cp2y = cp1y + (aY - this.currentY_) / 3.0; - this.bezierCurveTo(cp1x, cp1y, cp2x, cp2y, aX, aY); + + var cp = this.getCoords_(aCPx, aCPy); + var p = this.getCoords_(aX, aY); + + var cp1 = { + x: this.currentX_ + 2.0 / 3.0 * (cp.x - this.currentX_), + y: this.currentY_ + 2.0 / 3.0 * (cp.y - this.currentY_) + }; + var cp2 = { + x: cp1.x + (p.x - this.currentX_) / 3.0, + y: cp1.y + (p.y - this.currentY_) / 3.0 + }; + + bezierCurveTo(this, cp1, cp2, p); }; contextPrototype.arc = function(aX, aY, aRadius, aStartAngle, aEndAngle, aClockwise) { aRadius *= Z; - var arcType = aClockwise ? "at" : "wa"; + var arcType = aClockwise ? 'at' : 'wa'; - var xStart = aX + (mc(aStartAngle) * aRadius) - Z2; - var yStart = aY + (ms(aStartAngle) * aRadius) - Z2; + var xStart = aX + mc(aStartAngle) * aRadius - Z2; + var yStart = aY + ms(aStartAngle) * aRadius - Z2; - var xEnd = aX + (mc(aEndAngle) * aRadius) - Z2; - var yEnd = aY + (ms(aEndAngle) * aRadius) - Z2; + var xEnd = aX + mc(aEndAngle) * aRadius - Z2; + var yEnd = aY + ms(aEndAngle) * aRadius - Z2; // IE won't render arches drawn counter clockwise if xStart == xEnd. if (xStart == xEnd && !aClockwise) { @@ -356,14 +402,18 @@ if (!window.CanvasRenderingContext2D) { // that can be represented in binary } + var p = this.getCoords_(aX, aY); + var pStart = this.getCoords_(xStart, yStart); + var pEnd = this.getCoords_(xEnd, yEnd); + this.currentPath_.push({type: arcType, - x: aX, - y: aY, + x: p.x, + y: p.y, radius: aRadius, - xStart: xStart, - yStart: yStart, - xEnd: xEnd, - yEnd: yEnd}); + xStart: pStart.x, + yStart: pStart.y, + xEnd: pEnd.x, + yEnd: pEnd.y}); }; @@ -376,44 +426,55 @@ if (!window.CanvasRenderingContext2D) { }; contextPrototype.strokeRect = function(aX, aY, aWidth, aHeight) { - // Will destroy any existing path (same as FF behaviour) + var oldPath = this.currentPath_; this.beginPath(); + this.moveTo(aX, aY); this.lineTo(aX + aWidth, aY); this.lineTo(aX + aWidth, aY + aHeight); this.lineTo(aX, aY + aHeight); this.closePath(); this.stroke(); + + this.currentPath_ = oldPath; }; contextPrototype.fillRect = function(aX, aY, aWidth, aHeight) { - // Will destroy any existing path (same as FF behaviour) + var oldPath = this.currentPath_; this.beginPath(); + this.moveTo(aX, aY); this.lineTo(aX + aWidth, aY); this.lineTo(aX + aWidth, aY + aHeight); this.lineTo(aX, aY + aHeight); this.closePath(); this.fill(); + + this.currentPath_ = oldPath; }; contextPrototype.createLinearGradient = function(aX0, aY0, aX1, aY1) { - var gradient = new CanvasGradient_("gradient"); + var gradient = new CanvasGradient_('gradient'); + gradient.x0_ = aX0; + gradient.y0_ = aY0; + gradient.x1_ = aX1; + gradient.y1_ = aY1; return gradient; }; - contextPrototype.createRadialGradient = function(aX0, aY0, - aR0, aX1, - aY1, aR1) { - var gradient = new CanvasGradient_("gradientradial"); - gradient.radius1_ = aR0; - gradient.radius2_ = aR1; - gradient.focus_.x = aX0; - gradient.focus_.y = aY0; + contextPrototype.createRadialGradient = function(aX0, aY0, aR0, + aX1, aY1, aR1) { + var gradient = new CanvasGradient_('gradientradial'); + gradient.x0_ = aX0; + gradient.y0_ = aY0; + gradient.r0_ = aR0; + gradient.x1_ = aX1; + gradient.y1_ = aY1; + gradient.r1_ = aR1; return gradient; }; - contextPrototype.drawImage = function (image, var_args) { + contextPrototype.drawImage = function(image, var_args) { var dx, dy, dw, dh, sx, sy, sw, sh; // to find the original width we overide the width and height @@ -454,7 +515,7 @@ if (!window.CanvasRenderingContext2D) { dw = arguments[7]; dh = arguments[8]; } else { - throw "Invalid number of arguments"; + throw Error('Invalid number of arguments'); } var d = this.getCoords_(dx, dy); @@ -471,7 +532,7 @@ if (!window.CanvasRenderingContext2D) { vmlStr.push(' ' , '', ''); - this.element_.insertAdjacentHTML("BeforeEnd", - vmlStr.join("")); + this.element_.insertAdjacentHTML('BeforeEnd', + vmlStr.join('')); }; contextPrototype.stroke = function(aFill) { var lineStr = []; var lineOpen = false; var a = processStyle(aFill ? this.fillStyle : this.strokeStyle); - var color = a[0]; - var opacity = a[1] * this.globalAlpha; + var color = a.color; + var opacity = a.alpha * this.globalAlpha; var W = 10; var H = 10; lineStr.push(' max.x) { - max.x = c.x; + if (max.x == null || p.x > max.x) { + max.x = p.x; } - if (min.y == null || c.y < min.y) { - min.y = c.y; + if (min.y == null || p.y < min.y) { + min.y = p.y; } - if (max.y == null || c.y > max.y) { - max.y = c.y; + if (max.y == null || p.y > max.y) { + max.y = p.y; } } } lineStr.push(' ">'); - if (typeof this.fillStyle == "object") { - var focus = {x: "50%", y: "50%"}; - var width = (max.x - min.x); - var height = (max.y - min.y); - var dimension = (width > height) ? width : height; + if (!aFill) { + var lineWidth = this.lineScale_ * this.lineWidth; - focus.x = mr((this.fillStyle.focus_.x / width) * 100 + 50) + "%"; - focus.y = mr((this.fillStyle.focus_.y / height) * 100 + 50) + "%"; - - var colors = []; + // VML cannot correctly render a line if the width is less than 1px. + // In that case, we dilute the color to make the line look thinner. + if (lineWidth < 1) { + opacity *= lineWidth; + } - // inside radius (%) - if (this.fillStyle.type_ == "gradientradial") { - var inside = (this.fillStyle.radius1_ / dimension * 100); + lineStr.push( + '' + ); + } else if (typeof this.fillStyle == 'object') { + var fillStyle = this.fillStyle; + var angle = 0; + var focus = {x: 0, y: 0}; + + // additional offset + var shift = 0; + // scale factor for offset + var expansion = 1; + + if (fillStyle.type_ == 'gradient') { + var x0 = fillStyle.x0_ / this.arcScaleX_; + var y0 = fillStyle.y0_ / this.arcScaleY_; + var x1 = fillStyle.x1_ / this.arcScaleX_; + var y1 = fillStyle.y1_ / this.arcScaleY_; + var p0 = this.getCoords_(x0, y0); + var p1 = this.getCoords_(x1, y1); + var dx = p1.x - p0.x; + var dy = p1.y - p0.y; + angle = Math.atan2(dx, dy) * 180 / Math.PI; + + // The angle should be a non-negative number. + if (angle < 0) { + angle += 360; + } - // percentage that outside radius exceeds inside radius - var expansion = (this.fillStyle.radius2_ / dimension * 100) - inside; + // Very small angles produce an unexpected result because they are + // converted to a scientific notation string. + if (angle < 1e-6) { + angle = 0; + } } else { - var inside = 0; - var expansion = 100; + var p0 = this.getCoords_(fillStyle.x0_, fillStyle.y0_); + var width = max.x - min.x; + var height = max.y - min.y; + focus = { + x: (p0.x - min.x) / width, + y: (p0.y - min.y) / height + }; + + width /= this.arcScaleX_ * Z; + height /= this.arcScaleY_ * Z; + var dimension = m.max(width, height); + shift = 2 * fillStyle.r0_ / dimension; + expansion = 2 * fillStyle.r1_ / dimension - shift; } - var insidecolor = {offset: null, color: null}; - var outsidecolor = {offset: null, color: null}; - - // We need to sort 'colors' by percentage, from 0 > 100 otherwise ie - // won't interpret it correctly - this.fillStyle.colors_.sort(function (cs1, cs2) { + // We need to sort the color stops in ascending order by offset, + // otherwise IE won't interpret it correctly. + var stops = fillStyle.colors_; + stops.sort(function(cs1, cs2) { return cs1.offset - cs2.offset; }); - for (var i = 0; i < this.fillStyle.colors_.length; i++) { - var fs = this.fillStyle.colors_[i]; - - colors.push( (fs.offset * expansion) + inside, "% ", fs.color, ","); + var length = stops.length; + var color1 = stops[0].color; + var color2 = stops[length - 1].color; + var opacity1 = stops[0].alpha * this.globalAlpha; + var opacity2 = stops[length - 1].alpha * this.globalAlpha; - if (fs.offset > insidecolor.offset || insidecolor.offset == null) { - insidecolor.offset = fs.offset; - insidecolor.color = fs.color; - } - - if (fs.offset < outsidecolor.offset || outsidecolor.offset == null) { - outsidecolor.offset = fs.offset; - outsidecolor.color = fs.color; - } + var colors = []; + for (var i = 0; i < length; i++) { + var stop = stops[i]; + colors.push(stop.offset * expansion + shift + ' ' + stop.color); } - colors.pop(); - - lineStr.push(''); - } else if (aFill) { - lineStr.push(''); + + // When colors attribute is used, the meanings of opacity and o:opacity2 + // are reversed. + lineStr.push(''); } else { - lineStr.push( - '' - ); + lineStr.push(''); } - lineStr.push(""); + lineStr.push(''); - this.element_.insertAdjacentHTML("beforeEnd", lineStr.join("")); - - //this.currentPath_ = []; + this.element_.insertAdjacentHTML('beforeEnd', lineStr.join('')); }; contextPrototype.fill = function() { this.stroke(true); - }; + } contextPrototype.closePath = function() { - this.currentPath_.push({type: "close"}); + this.currentPath_.push({type: 'close'}); }; /** * @private */ contextPrototype.getCoords_ = function(aX, aY) { + var m = this.m_; return { - x: Z * (aX * this.m_[0][0] + aY * this.m_[1][0] + this.m_[2][0]) - Z2, - y: Z * (aX * this.m_[0][1] + aY * this.m_[1][1] + this.m_[2][1]) - Z2 + x: Z * (aX * m[0][0] + aY * m[1][0] + m[2][0]) - Z2, + y: Z * (aX * m[0][1] + aY * m[1][1] + m[2][1]) - Z2 } }; @@ -742,7 +829,14 @@ if (!window.CanvasRenderingContext2D) { [0, 0, 1] ]; - this.m_ = matrixMultiply(m1, this.m_); + var m = this.m_ = matrixMultiply(m1, this.m_); + + // Get the line scale. + // Determinant of this.m_ means how much the area is enlarged by the + // transformation. So its square root can be used as a scale factor + // for width. + var det = m[0][0] * m[1][1] - m[0][1] * m[1][0]; + this.lineScale_ = sqrt(abs(det)); }; /******** STUBS ********/ @@ -761,15 +855,20 @@ if (!window.CanvasRenderingContext2D) { // Gradient / Pattern Stubs function CanvasGradient_(aType) { this.type_ = aType; - this.radius1_ = 0; - this.radius2_ = 0; + this.x0_ = 0; + this.y0_ = 0; + this.r0_ = 0; + this.x1_ = 0; + this.y1_ = 0; + this.r1_ = 0; this.colors_ = []; - this.focus_ = {x: 0, y: 0}; } CanvasGradient_.prototype.addColorStop = function(aOffset, aColor) { aColor = processStyle(aColor); - this.colors_.push({offset: 1-aOffset, color: aColor}); + this.colors_.push({offset: aOffset, + color: aColor.color, + alpha: aColor.alpha}); }; function CanvasPattern_() {} diff --git a/excanvas.min.js b/excanvas.min.js new file mode 100644 index 0000000..832bbd1 --- /dev/null +++ b/excanvas.min.js @@ -0,0 +1 @@ +if(!document.createElement("canvas").getContext){(function(){var R=Math;var S=R.round;var O=R.sin;var a=R.cos;var J=R.abs;var Y=R.sqrt;var A=10;var K=A/2;function G(){return this.context_||(this.context_=new M(this))}var Q=Array.prototype.slice;function b(c,d,e){var Z=Q.call(arguments,2);return function(){return c.apply(d,Z.concat(Q.call(arguments)))}}var H={init:function(Z){if(/MSIE/.test(navigator.userAgent)&&!window.opera){var c=Z||document;c.createElement("canvas");c.attachEvent("onreadystatechange",b(this.init_,this,c))}},init_:function(e){if(!e.namespaces.g_vml_){e.namespaces.add("g_vml_","urn:schemas-microsoft-com:vml","#default#VML")}if(!e.namespaces.g_o_){e.namespaces.add("g_o_","urn:schemas-microsoft-com:office:office","#default#VML")}if(!e.styleSheets.ex_canvas_){var d=e.createStyleSheet();d.owningElement.id="ex_canvas_";d.cssText="canvas{display:inline-block;overflow:hidden;text-align:left;width:300px;height:150px}g_vml_\\:*{behavior:url(#default#VML)}g_o_\\:*{behavior:url(#default#VML)}"}var c=e.getElementsByTagName("canvas");for(var Z=0;Z','","");this.element_.insertAdjacentHTML("BeforeEnd",z.join(""))};I.stroke=function(AE){var j=[];var k=false;var AP=C(AE?this.fillStyle:this.strokeStyle);var AA=AP.color;var AK=AP.alpha*this.globalAlpha;var f=10;var m=10;j.push("w.x){w.x=AI.x}if(AO.y==null||AI.yw.y){w.y=AI.y}}}j.push(' ">');if(!AE){var v=this.lineScale_*this.lineWidth;if(v<1){AK*=v}j.push("')}else{if(typeof this.fillStyle=="object"){var n=this.fillStyle;var t=0;var AH={x:0,y:0};var AB=0;var r=1;if(n.type_=="gradient"){var q=n.x0_/this.arcScaleX_;var d=n.y0_/this.arcScaleY_;var o=n.x1_/this.arcScaleX_;var AQ=n.y1_/this.arcScaleY_;var AM=this.getCoords_(q,d);var AL=this.getCoords_(o,AQ);var h=AL.x-AM.x;var g=AL.y-AM.y;t=Math.atan2(h,g)*180/Math.PI;if(t<0){t+=360}if(t<0.000001){t=0}}else{var AM=this.getCoords_(n.x0_,n.y0_);var Z=w.x-AO.x;var e=w.y-AO.y;AH={x:(AM.x-AO.x)/Z,y:(AM.y-AO.y)/e};Z/=this.arcScaleX_*A;e/=this.arcScaleY_*A;var AG=R.max(Z,e);AB=2*n.r0_/AG;r=2*n.r1_/AG-AB}var z=n.colors_;z.sort(function(i,c){return i.offset-c.offset});var u=z.length;var y=z[0].color;var x=z[u-1].color;var AD=z[0].alpha*this.globalAlpha;var AC=z[u-1].alpha*this.globalAlpha;var AF=[];for(var AJ=0;AJ')}else{j.push('')}}j.push("");this.element_.insertAdjacentHTML("beforeEnd",j.join(""))};I.fill=function(){this.stroke(true)};I.closePath=function(){this.currentPath_.push({type:"close"})};I.getCoords_=function(d,c){var Z=this.m_;return{x:A*(d*Z[0][0]+c*Z[1][0]+Z[2][0])-K,y:A*(d*Z[0][1]+c*Z[1][1]+Z[2][1])-K}};I.save=function(){var Z={};T(this,Z);this.aStack_.push(Z);this.mStack_.push(this.m_);this.m_=D(N(),this.m_)};I.restore=function(){T(this.aStack_.pop(),this);this.m_=this.mStack_.pop()};I.translate=function(d,c){var Z=[[1,0,0],[0,1,0],[d,c,1]];this.m_=D(Z,this.m_)};I.rotate=function(d){var f=a(d);var e=O(d);var Z=[[f,e,0],[-e,f,0],[0,0,1]];this.m_=D(Z,this.m_)};I.scale=function(f,e){this.arcScaleX_*=f;this.arcScaleY_*=e;var c=[[f,0,0],[0,e,0],[0,0,1]];var Z=this.m_=D(c,this.m_);var d=Z[0][0]*Z[1][1]-Z[0][1]*Z[1][0];this.lineScale_=Y(J(d))};I.clip=function(){};I.arcTo=function(){};I.createPattern=function(){return new F};function W(Z){this.type_=Z;this.x0_=0;this.y0_=0;this.r0_=0;this.x1_=0;this.y1_=0;this.r1_=0;this.colors_=[]}W.prototype.addColorStop=function(c,Z){Z=C(Z);this.colors_.push({offset:c,color:Z.color,alpha:Z.alpha})};function F(){}G_vmlCanvasManager=H;CanvasRenderingContext2D=M;CanvasGradient=W;CanvasPattern=F})()}; \ No newline at end of file diff --git a/excanvas.pack.js b/excanvas.pack.js deleted file mode 100644 index 71d6fbd..0000000 --- a/excanvas.pack.js +++ /dev/null @@ -1 +0,0 @@ -if(!window.CanvasRenderingContext2D){(function(){var m=Math;var mr=m.round;var ms=m.sin;var mc=m.cos;var Z=10;var Z2=Z/2;var G_vmlCanvasManager_={init:function(opt_doc){var doc=opt_doc||document;if(/MSIE/.test(navigator.userAgent)&&!window.opera){var self=this;doc.attachEvent("onreadystatechange",function(){self.init_(doc)})}},init_:function(doc){if(doc.readyState=="complete"){if(!doc.namespaces["g_vml_"]){doc.namespaces.add("g_vml_","urn:schemas-microsoft-com:vml")}var ss=doc.createStyleSheet();ss.cssText="canvas{display:inline-block;overflow:hidden;"+"text-align:left;width:300px;height:150px}"+"g_vml_\\:*{behavior:url(#default#VML)}";var els=doc.getElementsByTagName("canvas");for(var i=0;i"){var tagName="/"+el.tagName;var ns;while((ns=el.nextSibling)&&ns.tagName!=tagName){ns.removeNode()}if(ns){ns.removeNode()}}el.parentNode.replaceChild(newEl,el);return newEl},initElement:function(el){el=this.fixElement_(el);el.getContext=function(){if(this.context_){return this.context_}return this.context_=new CanvasRenderingContext2D_(this)};el.attachEvent('onpropertychange',onPropertyChange);el.attachEvent('onresize',onResize);var attrs=el.attributes;if(attrs.width&&attrs.width.specified){el.style.width=attrs.width.nodeValue+"px"}else{el.width=el.clientWidth}if(attrs.height&&attrs.height.specified){el.style.height=attrs.height.nodeValue+"px"}else{el.height=el.clientHeight}return el}};function onPropertyChange(e){var el=e.srcElement;switch(e.propertyName){case'width':el.style.width=el.attributes.width.nodeValue+"px";el.getContext().clearRect();break;case'height':el.style.height=el.attributes.height.nodeValue+"px";el.getContext().clearRect();break}}function onResize(e){var el=e.srcElement;if(el.firstChild){el.firstChild.style.width=el.clientWidth+'px';el.firstChild.style.height=el.clientHeight+'px'}}G_vmlCanvasManager_.init();var dec2hex=[];for(var i=0;i<16;i++){for(var j=0;j<16;j++){dec2hex[i*16+j]=i.toString(16)+j.toString(16)}}function createMatrixIdentity(){return[[1,0,0],[0,1,0],[0,0,1]]}function matrixMultiply(m1,m2){var result=createMatrixIdentity();for(var x=0;x<3;x++){for(var y=0;y<3;y++){var sum=0;for(var z=0;z<3;z++){sum+=m1[x][z]*m2[z][y]}result[x][y]=sum}}return result}function copyState(o1,o2){o2.fillStyle=o1.fillStyle;o2.lineCap=o1.lineCap;o2.lineJoin=o1.lineJoin;o2.lineWidth=o1.lineWidth;o2.miterLimit=o1.miterLimit;o2.shadowBlur=o1.shadowBlur;o2.shadowColor=o1.shadowColor;o2.shadowOffsetX=o1.shadowOffsetX;o2.shadowOffsetY=o1.shadowOffsetY;o2.strokeStyle=o1.strokeStyle;o2.arcScaleX_=o1.arcScaleX_;o2.arcScaleY_=o1.arcScaleY_}function processStyle(styleString){var str,alpha=1;styleString=String(styleString);if(styleString.substring(0,3)=="rgb"){var start=styleString.indexOf("(",3);var end=styleString.indexOf(")",start+1);var guts=styleString.substring(start+1,end).split(",");str="#";for(var i=0;i<3;i++){str+=dec2hex[Number(guts[i])]}if((guts.length==4)&&(styleString.substr(3,1)=="a")){alpha=guts[3]}}else{str=styleString}return[str,alpha]}function processLineCap(lineCap){switch(lineCap){case"butt":return"flat";case"round":return"round";case"square":default:return"square"}}function CanvasRenderingContext2D_(surfaceElement){this.m_=createMatrixIdentity();this.mStack_=[];this.aStack_=[];this.currentPath_=[];this.strokeStyle="#000";this.fillStyle="#000";this.lineWidth=1;this.lineJoin="miter";this.lineCap="butt";this.miterLimit=Z*1;this.globalAlpha=1;this.canvas=surfaceElement;var el=surfaceElement.ownerDocument.createElement('div');el.style.width=surfaceElement.clientWidth+'px';el.style.height=surfaceElement.clientHeight+'px';el.style.overflow='hidden';el.style.position='absolute';surfaceElement.appendChild(el);this.element_=el;this.arcScaleX_=1;this.arcScaleY_=1}var contextPrototype=CanvasRenderingContext2D_.prototype;contextPrototype.clearRect=function(){this.element_.innerHTML="";this.currentPath_=[]};contextPrototype.beginPath=function(){this.currentPath_=[]};contextPrototype.moveTo=function(aX,aY){this.currentPath_.push({type:"moveTo",x:aX,y:aY});this.currentX_=aX;this.currentY_=aY};contextPrototype.lineTo=function(aX,aY){this.currentPath_.push({type:"lineTo",x:aX,y:aY});this.currentX_=aX;this.currentY_=aY};contextPrototype.bezierCurveTo=function(aCP1x,aCP1y,aCP2x,aCP2y,aX,aY){this.currentPath_.push({type:"bezierCurveTo",cp1x:aCP1x,cp1y:aCP1y,cp2x:aCP2x,cp2y:aCP2y,x:aX,y:aY});this.currentX_=aX;this.currentY_=aY};contextPrototype.quadraticCurveTo=function(aCPx,aCPy,aX,aY){var cp1x=this.currentX_+2.0/3.0*(aCPx-this.currentX_);var cp1y=this.currentY_+2.0/3.0*(aCPy-this.currentY_);var cp2x=cp1x+(aX-this.currentX_)/3.0;var cp2y=cp1y+(aY-this.currentY_)/3.0;this.bezierCurveTo(cp1x,cp1y,cp2x,cp2y,aX,aY)};contextPrototype.arc=function(aX,aY,aRadius,aStartAngle,aEndAngle,aClockwise){aRadius*=Z;var arcType=aClockwise?"at":"wa";var xStart=aX+(mc(aStartAngle)*aRadius)-Z2;var yStart=aY+(ms(aStartAngle)*aRadius)-Z2;var xEnd=aX+(mc(aEndAngle)*aRadius)-Z2;var yEnd=aY+(ms(aEndAngle)*aRadius)-Z2;if(xStart==xEnd&&!aClockwise){xStart+=0.125}this.currentPath_.push({type:arcType,x:aX,y:aY,radius:aRadius,xStart:xStart,yStart:yStart,xEnd:xEnd,yEnd:yEnd})};contextPrototype.rect=function(aX,aY,aWidth,aHeight){this.moveTo(aX,aY);this.lineTo(aX+aWidth,aY);this.lineTo(aX+aWidth,aY+aHeight);this.lineTo(aX,aY+aHeight);this.closePath()};contextPrototype.strokeRect=function(aX,aY,aWidth,aHeight){this.beginPath();this.moveTo(aX,aY);this.lineTo(aX+aWidth,aY);this.lineTo(aX+aWidth,aY+aHeight);this.lineTo(aX,aY+aHeight);this.closePath();this.stroke()};contextPrototype.fillRect=function(aX,aY,aWidth,aHeight){this.beginPath();this.moveTo(aX,aY);this.lineTo(aX+aWidth,aY);this.lineTo(aX+aWidth,aY+aHeight);this.lineTo(aX,aY+aHeight);this.closePath();this.fill()};contextPrototype.createLinearGradient=function(aX0,aY0,aX1,aY1){var gradient=new CanvasGradient_("gradient");return gradient};contextPrototype.createRadialGradient=function(aX0,aY0,aR0,aX1,aY1,aR1){var gradient=new CanvasGradient_("gradientradial");gradient.radius1_=aR0;gradient.radius2_=aR1;gradient.focus_.x=aX0;gradient.focus_.y=aY0;return gradient};contextPrototype.drawImage=function(image,var_args){var dx,dy,dw,dh,sx,sy,sw,sh;var oldRuntimeWidth=image.runtimeStyle.width;var oldRuntimeHeight=image.runtimeStyle.height;image.runtimeStyle.width='auto';image.runtimeStyle.height='auto';var w=image.width;var h=image.height;image.runtimeStyle.width=oldRuntimeWidth;image.runtimeStyle.height=oldRuntimeHeight;if(arguments.length==3){dx=arguments[1];dy=arguments[2];sx=sy=0;sw=dw=w;sh=dh=h}else if(arguments.length==5){dx=arguments[1];dy=arguments[2];dw=arguments[3];dh=arguments[4];sx=sy=0;sw=w;sh=h}else if(arguments.length==9){sx=arguments[1];sy=arguments[2];sw=arguments[3];sh=arguments[4];dx=arguments[5];dy=arguments[6];dw=arguments[7];dh=arguments[8]}else{throw"Invalid number of arguments";}var d=this.getCoords_(dx,dy);var w2=sw/2;var h2=sh/2;var vmlStr=[];var W=10;var H=10;vmlStr.push(' ','','');this.element_.insertAdjacentHTML("BeforeEnd",vmlStr.join(""))};contextPrototype.stroke=function(aFill){var lineStr=[];var lineOpen=false;var a=processStyle(aFill?this.fillStyle:this.strokeStyle);var color=a[0];var opacity=a[1]*this.globalAlpha;var W=10;var H=10;lineStr.push('max.x){max.x=c.x}if(min.y==null||c.ymax.y){max.y=c.y}}}lineStr.push(' ">');if(typeof this.fillStyle=="object"){var focus={x:"50%",y:"50%"};var width=(max.x-min.x);var height=(max.y-min.y);var dimension=(width>height)?width:height;focus.x=mr((this.fillStyle.focus_.x/width)*100+50)+"%";focus.y=mr((this.fillStyle.focus_.y/height)*100+50)+"%";var colors=[];if(this.fillStyle.type_=="gradientradial"){var inside=(this.fillStyle.radius1_/dimension*100);var expansion=(this.fillStyle.radius2_/dimension*100)-inside}else{var inside=0;var expansion=100}var insidecolor={offset:null,color:null};var outsidecolor={offset:null,color:null};this.fillStyle.colors_.sort(function(cs1,cs2){return cs1.offset-cs2.offset});for(var i=0;iinsidecolor.offset||insidecolor.offset==null){insidecolor.offset=fs.offset;insidecolor.color=fs.color}if(fs.offset')}else if(aFill){lineStr.push('')}else{lineStr.push('')}lineStr.push("");this.element_.insertAdjacentHTML("beforeEnd",lineStr.join(""))};contextPrototype.fill=function(){this.stroke(true)};contextPrototype.closePath=function(){this.currentPath_.push({type:"close"})};contextPrototype.getCoords_=function(aX,aY){return{x:Z*(aX*this.m_[0][0]+aY*this.m_[1][0]+this.m_[2][0])-Z2,y:Z*(aX*this.m_[0][1]+aY*this.m_[1][1]+this.m_[2][1])-Z2}};contextPrototype.save=function(){var o={};copyState(this,o);this.aStack_.push(o);this.mStack_.push(this.m_);this.m_=matrixMultiply(createMatrixIdentity(),this.m_)};contextPrototype.restore=function(){copyState(this.aStack_.pop(),this);this.m_=this.mStack_.pop()};contextPrototype.translate=function(aX,aY){var m1=[[1,0,0],[0,1,0],[aX,aY,1]];this.m_=matrixMultiply(m1,this.m_)};contextPrototype.rotate=function(aRot){var c=mc(aRot);var s=ms(aRot);var m1=[[c,s,0],[-s,c,0],[0,0,1]];this.m_=matrixMultiply(m1,this.m_)};contextPrototype.scale=function(aX,aY){this.arcScaleX_*=aX;this.arcScaleY_*=aY;var m1=[[aX,0,0],[0,aY,0],[0,0,1]];this.m_=matrixMultiply(m1,this.m_)};contextPrototype.clip=function(){};contextPrototype.arcTo=function(){};contextPrototype.createPattern=function(){return new CanvasPattern_};function CanvasGradient_(aType){this.type_=aType;this.radius1_=0;this.radius2_=0;this.colors_=[];this.focus_={x:0,y:0}}CanvasGradient_.prototype.addColorStop=function(aOffset,aColor){aColor=processStyle(aColor);this.colors_.push({offset:1-aOffset,color:aColor})};function CanvasPattern_(){}G_vmlCanvasManager=G_vmlCanvasManager_;CanvasRenderingContext2D=CanvasRenderingContext2D_;CanvasGradient=CanvasGradient_;CanvasPattern=CanvasPattern_})()} diff --git a/jquery.flot.js b/jquery.flot.js index 9c96255..3102269 100644 --- a/jquery.flot.js +++ b/jquery.flot.js @@ -328,6 +328,15 @@ } function constructCanvas() { + function makeCanvas(width, height) { + var c = document.createElement('canvas'); + c.width = width; + c.height = height; + if ($.browser.msie) // excanvas hack + c = window.G_vmlCanvasManager.initElement(c); + return c; + } + canvasWidth = target.width(); canvasHeight = target.height(); target.html(""); // clear target @@ -338,15 +347,13 @@ throw "Invalid dimensions for plot, width = " + canvasWidth + ", height = " + canvasHeight; // the canvas - canvas = $('').appendTo(target).get(0); - if ($.browser.msie) // excanvas hack - canvas = window.G_vmlCanvasManager.initElement(canvas); + canvas = $(makeCanvas(canvasWidth, canvasHeight)).appendTo(target).get(0); + ctx = canvas.getContext("2d"); +// overlay = $('').appendTo(target).get(0); // overlay canvas for interactive features - overlay = $('').appendTo(target).get(0); - if ($.browser.msie) // excanvas hack - overlay = window.G_vmlCanvasManager.initElement(overlay); + overlay = $(makeCanvas(canvasWidth, canvasHeight)).css({ position: 'absolute', left: 0, top: 0 }).appendTo(target).get(0); octx = overlay.getContext("2d"); // we include the canvas in the event holder too, because IE 7