Andreas Hocevar
106 lines
2.5 KiB
HTML
106 lines
2.5 KiB
HTML
<!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>
|