| // Copyright 2006 Google Inc. |
|
| // |
|
| // Licensed under the Apache License, Version 2.0 (the "License"); |
|
| // you may not use this file except in compliance with the License. |
|
| // You may obtain a copy of the License at |
|
| // |
|
| // http://www.apache.org/licenses/LICENSE-2.0 |
|
| // |
|
| // Unless required by applicable law or agreed to in writing, software |
|
| // distributed under the License is distributed on an "AS IS" BASIS, |
|
| // WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. |
|
| // See the License for the specific language governing permissions and |
|
| // limitations under the License. |
|
|
|
|
|
| // Known Issues: |
|
| // |
|
| // * Patterns only support repeat. |
|
| // * Radial gradient are not implemented. The VML version of these look very |
|
| // different from the canvas one. |
|
| // * Clipping paths are not implemented. |
|
| // * Coordsize. The width and height attribute have higher priority than the |
|
| // width and height style values which isn't correct. |
|
| // * Painting mode isn't implemented. |
|
| // * Canvas width/height should is using content-box by default. IE in |
|
| // Quirks mode will draw the canvas using border-box. Either change your |
|
| // doctype to HTML5 |
|
| // (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. |
|
| // * Filling very large shapes (above 5000 points) is buggy. |
|
| // * Optimize. There is always room for speed improvements. |
|
|
|
| // Only add this code if we do not already have a canvas implementation |
|
| if (!document.createElement('canvas').getContext) { |
|
|
|
| (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 <canvas> 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))); |
|
| }; |
|
| } |
|
|
|
| function encodeHtmlAttribute(s) { |
|
| return String(s).replace(/&/g, '&').replace(/"/g, '"'); |
|
| } |
|
|
|
| function addNamespacesAndStylesheet(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. Only add one style sheet per document |
|
| if (!doc.styleSheets['ex_canvas_']) { |
|
| var ss = doc.createStyleSheet(); |
|
| 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}'; |
|
| } |
|
| } |
|
|
|
| // Add namespaces and stylesheet at startup. |
|
| addNamespacesAndStylesheet(document); |
|
|
|
| var G_vmlCanvasManager_ = { |
|
| init: function(opt_doc) { |
|
| if (/MSIE/.test(navigator.userAgent) && !window.opera) { |
|
| 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) { |
|
| // find all canvas elements |
|
| var els = doc.getElementsByTagName('canvas'); |
|
| for (var i = 0; i < els.length; i++) { |
|
| this.initElement(els[i]); |
|
| } |
|
| }, |
|
|
|
| /** |
|
| * Public initializes a canvas element so that it can be used as canvas |
|
| * element from now on. This is called automatically before the page is |
|
| * loaded but if you are creating elements using createElement you need to |
|
| * make sure this is called on the element. |
|
| * @param {HTMLElement} el The canvas element to initialize. |
|
| * @return {HTMLElement} the element that was created. |
|
| */ |
|
| initElement: function(el) { |
|
| if (!el.getContext) { |
|
| el.getContext = getContext; |
|
|
|
| // Add namespaces and stylesheet to document of the element. |
|
| addNamespacesAndStylesheet(el.ownerDocument); |
|
|
|
| // 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; |
|
| } |
|
| 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_() |
|
| } |
|
| return el; |
|
| } |
|
| }; |
|
|
|
| function onPropertyChange(e) { |
|
| var el = e.srcElement; |
|
|
|
| switch (e.propertyName) { |
|
| case 'width': |
|
| el.getContext().clearRect(); |
|
| el.style.width = el.attributes.width.nodeValue + 'px'; |
|
| // In IE8 this does not trigger onresize. |
|
| el.firstChild.style.width = el.clientWidth + 'px'; |
|
| break; |
|
| case 'height': |
|
| el.getContext().clearRect(); |
|
| el.style.height = el.attributes.height.nodeValue + 'px'; |
|
| el.firstChild.style.height = el.clientHeight + 'px'; |
|
| 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(); |
|
|
|
| // precompute "00" to "FF" |
|
| var decToHex = []; |
|
| for (var i = 0; i < 16; i++) { |
|
| for (var j = 0; j < 16; j++) { |
|
| decToHex[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; |
|
|