| <!DOCTYPE HTML> |
| <html> |
| <!-- |
| Copyright 2007 The Closure Library Authors. All Rights Reserved. |
| |
| Use of this source code is governed by the Apache License, Version 2.0. |
| See the COPYING file for details. |
| --> |
| <head> |
| <title>The SVG tiger drawn with goog.graphics</title> |
| <script type="text/javascript" src="../../base.js"></script> |
| <script type="text/javascript"> |
| |
| goog.require('goog.dom'); |
| goog.require('goog.graphics'); |
| |
| </script> |
| <script src="tigerdata.js"></script> |
| <script type="text/javascript"> |
| |
| function drawTiger() { |
| var graphics = goog.graphics.createGraphics(600, 600); |
| |
| var fills = {}; |
| var strokes = {}; |
| |
| var segmentFunctions = { |
| 'z': goog.graphics.Path.prototype.close, |
| 'M': goog.graphics.Path.prototype.moveTo, |
| 'L': goog.graphics.Path.prototype.lineTo, |
| 'C': goog.graphics.Path.prototype.curveTo |
| }; |
| |
| function createPath(stroke, fill, paths) { |
| |
| var fillObject; |
| |
| if (fill == null) { |
| fillObject = null; |
| } else if (fill in fills) { |
| fillObject = fills[fill]; |
| } else { |
| fillObject = new goog.graphics.SolidFill(fill); |
| fills[fill] = fillObject; |
| } |
| |
| var strokeObject; |
| if (stroke == null) { |
| strokeObject = null; |
| } else { |
| var strokeKey; |
| if (typeof stroke == 'string') { |
| strokeKey = stroke; |
| } else { |
| strokeKey = stroke.c + stroke.w; |
| } |
| if (strokeKey in strokes) { |
| strokeObject = strokes[strokeKey]; |
| } else if (typeof stroke == 'string') { |
| strokeObject = null; |
| } else { |
| strokeObject = new goog.graphics.Stroke(stroke.w, stroke.c); |
| } |
| } |
| strokes[strokeKey] = strokeObject; |
| |
| var pathObject = graphics.createPath(); |
| for (var i = 0, path; path = paths[i]; i++) { |
| segmentFunctions[path.t].apply(pathObject, path.p); |
| } |
| |
| graphics.drawPath(pathObject, strokeObject, fillObject); |
| } |
| |
| var d0 = new Date; |
| for (var i = 0; i < tigerData.length; i++) { |
| var d = tigerData[i]; |
| createPath(d.s, d.f, d.p); |
| } |
| |
| graphics.render(goog.dom.getElement('tiger-container')); |
| var d1 = new Date; |
| |
| goog.dom.setTextContent(goog.dom.getElement('out'), |
| 'Creating took: ' + (d1 - d0)); |
| window.setTimeout(function() { |
| var d2 = new Date; |
| goog.dom.setTextContent(goog.dom.getElement('out-2'), |
| 'Drawing took: ' + (d2 - d1)); |
| }, 1); |
| } |
| |
| |
| </script> |
| </head> |
| <body> |
| |
| <div id="tiger-container" style='border:1px solid black;width:600px;height:600px'></div> |
| <div id="out"></div> |
| <div id="out-2"></div> |
| <script> |
| drawTiger(); |
| </script> |
| </body> |
| </html> |
