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
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
|
<!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>
|
