columbus3 0.2.1 → 0.3.0
Sign up to get free protection for your applications and to get access to all the features.
- checksums.yaml +4 -4
- data/README.textile +62 -0
- data/bower_components/flot/.bower.json +19 -0
- data/bower_components/flot/.gitignore +3 -0
- data/bower_components/flot/.travis.yml +3 -0
- data/bower_components/flot/API.md +1498 -0
- data/bower_components/flot/CONTRIBUTING.md +98 -0
- data/bower_components/flot/FAQ.md +75 -0
- data/bower_components/flot/LICENSE.txt +22 -0
- data/bower_components/flot/Makefile +12 -0
- data/bower_components/flot/NEWS.md +1026 -0
- data/bower_components/flot/PLUGINS.md +143 -0
- data/bower_components/flot/README.md +110 -0
- data/bower_components/flot/component.json +8 -0
- data/bower_components/flot/examples/ajax/data-eu-gdp-growth-1.json +4 -0
- data/bower_components/flot/examples/ajax/data-eu-gdp-growth-2.json +4 -0
- data/bower_components/flot/examples/ajax/data-eu-gdp-growth-3.json +4 -0
- data/bower_components/flot/examples/ajax/data-eu-gdp-growth-4.json +4 -0
- data/bower_components/flot/examples/ajax/data-eu-gdp-growth-5.json +4 -0
- data/bower_components/flot/examples/ajax/data-eu-gdp-growth.json +4 -0
- data/bower_components/flot/examples/ajax/data-japan-gdp-growth.json +4 -0
- data/bower_components/flot/examples/ajax/data-usa-gdp-growth.json +4 -0
- data/bower_components/flot/examples/ajax/index.html +173 -0
- data/bower_components/flot/examples/annotating/index.html +87 -0
- data/bower_components/flot/examples/axes-interacting/index.html +97 -0
- data/bower_components/flot/examples/axes-multiple/index.html +77 -0
- data/bower_components/flot/examples/axes-time-zones/date.js +893 -0
- data/bower_components/flot/examples/axes-time-zones/index.html +114 -0
- data/bower_components/flot/examples/axes-time-zones/tz/africa +1181 -0
- data/bower_components/flot/examples/axes-time-zones/tz/antarctica +413 -0
- data/bower_components/flot/examples/axes-time-zones/tz/asia +2717 -0
- data/bower_components/flot/examples/axes-time-zones/tz/australasia +1719 -0
- data/bower_components/flot/examples/axes-time-zones/tz/backward +117 -0
- data/bower_components/flot/examples/axes-time-zones/tz/etcetera +81 -0
- data/bower_components/flot/examples/axes-time-zones/tz/europe +2856 -0
- data/bower_components/flot/examples/axes-time-zones/tz/factory +10 -0
- data/bower_components/flot/examples/axes-time-zones/tz/iso3166.tab +276 -0
- data/bower_components/flot/examples/axes-time-zones/tz/leapseconds +100 -0
- data/bower_components/flot/examples/axes-time-zones/tz/northamerica +3235 -0
- data/bower_components/flot/examples/axes-time-zones/tz/pacificnew +28 -0
- data/bower_components/flot/examples/axes-time-zones/tz/solar87 +390 -0
- data/bower_components/flot/examples/axes-time-zones/tz/solar88 +390 -0
- data/bower_components/flot/examples/axes-time-zones/tz/solar89 +395 -0
- data/bower_components/flot/examples/axes-time-zones/tz/southamerica +1711 -0
- data/bower_components/flot/examples/axes-time-zones/tz/systemv +38 -0
- data/bower_components/flot/examples/axes-time-zones/tz/yearistype.sh +38 -0
- data/bower_components/flot/examples/axes-time-zones/tz/zone.tab +441 -0
- data/bower_components/flot/examples/axes-time/index.html +137 -0
- data/bower_components/flot/examples/background.png +0 -0
- data/bower_components/flot/examples/basic-options/index.html +91 -0
- data/bower_components/flot/examples/basic-usage/index.html +57 -0
- data/bower_components/flot/examples/canvas/index.html +75 -0
- data/bower_components/flot/examples/categories/index.html +64 -0
- data/bower_components/flot/examples/examples.css +97 -0
- data/bower_components/flot/examples/image/hs-2004-27-a-large-web.jpg +0 -0
- data/bower_components/flot/examples/image/index.html +69 -0
- data/bower_components/flot/examples/index.html +80 -0
- data/bower_components/flot/examples/interacting/index.html +118 -0
- data/bower_components/flot/examples/navigate/arrow-down.gif +0 -0
- data/bower_components/flot/examples/navigate/arrow-left.gif +0 -0
- data/bower_components/flot/examples/navigate/arrow-right.gif +0 -0
- data/bower_components/flot/examples/navigate/arrow-up.gif +0 -0
- data/bower_components/flot/examples/navigate/index.html +153 -0
- data/bower_components/flot/examples/percentiles/index.html +79 -0
- data/bower_components/flot/examples/realtime/index.html +122 -0
- data/bower_components/flot/examples/resize/index.html +76 -0
- data/bower_components/flot/examples/selection/index.html +152 -0
- data/bower_components/flot/examples/series-errorbars/index.html +150 -0
- data/bower_components/flot/examples/series-pie/index.html +818 -0
- data/bower_components/flot/examples/series-toggle/index.html +121 -0
- data/bower_components/flot/examples/series-types/index.html +90 -0
- data/bower_components/flot/examples/shared/jquery-ui/jquery-ui.min.css +6 -0
- data/bower_components/flot/examples/stacking/index.html +107 -0
- data/bower_components/flot/examples/symbols/index.html +76 -0
- data/bower_components/flot/examples/threshold/index.html +76 -0
- data/bower_components/flot/examples/tracking/index.html +135 -0
- data/bower_components/flot/examples/visitors/index.html +147 -0
- data/bower_components/flot/examples/zooming/index.html +144 -0
- data/bower_components/flot/excanvas.js +1428 -0
- data/bower_components/flot/excanvas.min.js +1 -0
- data/bower_components/flot/flot.jquery.json +27 -0
- data/bower_components/flot/jquery.colorhelpers.js +180 -0
- data/bower_components/flot/jquery.flot.canvas.js +345 -0
- data/bower_components/flot/jquery.flot.categories.js +190 -0
- data/bower_components/flot/jquery.flot.crosshair.js +176 -0
- data/bower_components/flot/jquery.flot.errorbars.js +353 -0
- data/bower_components/flot/jquery.flot.fillbetween.js +226 -0
- data/bower_components/flot/jquery.flot.image.js +241 -0
- data/bower_components/flot/jquery.flot.js +3168 -0
- data/bower_components/flot/jquery.flot.navigate.js +346 -0
- data/bower_components/flot/jquery.flot.pie.js +820 -0
- data/bower_components/flot/jquery.flot.resize.js +59 -0
- data/bower_components/flot/jquery.flot.selection.js +360 -0
- data/bower_components/flot/jquery.flot.stack.js +188 -0
- data/bower_components/flot/jquery.flot.symbol.js +71 -0
- data/bower_components/flot/jquery.flot.threshold.js +142 -0
- data/bower_components/flot/jquery.flot.time.js +432 -0
- data/bower_components/flot/jquery.js +9472 -0
- data/bower_components/flot/package.json +11 -0
- data/bower_components/jquery/.bower.json +38 -0
- data/bower_components/jquery/MIT-LICENSE.txt +21 -0
- data/bower_components/jquery/bower.json +28 -0
- data/bower_components/jquery/dist/jquery.js +9210 -0
- data/bower_components/jquery/dist/jquery.min.js +5 -0
- data/bower_components/jquery/dist/jquery.min.map +1 -0
- data/bower_components/jquery/src/ajax.js +786 -0
- data/bower_components/jquery/src/ajax/jsonp.js +89 -0
- data/bower_components/jquery/src/ajax/load.js +75 -0
- data/bower_components/jquery/src/ajax/parseJSON.js +13 -0
- data/bower_components/jquery/src/ajax/parseXML.js +28 -0
- data/bower_components/jquery/src/ajax/script.js +64 -0
- data/bower_components/jquery/src/ajax/var/nonce.js +5 -0
- data/bower_components/jquery/src/ajax/var/rquery.js +3 -0
- data/bower_components/jquery/src/ajax/xhr.js +136 -0
- data/bower_components/jquery/src/attributes.js +11 -0
- data/bower_components/jquery/src/attributes/attr.js +141 -0
- data/bower_components/jquery/src/attributes/classes.js +158 -0
- data/bower_components/jquery/src/attributes/prop.js +94 -0
- data/bower_components/jquery/src/attributes/support.js +35 -0
- data/bower_components/jquery/src/attributes/val.js +161 -0
- data/bower_components/jquery/src/callbacks.js +205 -0
- data/bower_components/jquery/src/core.js +502 -0
- data/bower_components/jquery/src/core/access.js +60 -0
- data/bower_components/jquery/src/core/init.js +123 -0
- data/bower_components/jquery/src/core/parseHTML.js +39 -0
- data/bower_components/jquery/src/core/ready.js +97 -0
- data/bower_components/jquery/src/core/var/rsingleTag.js +4 -0
- data/bower_components/jquery/src/css.js +450 -0
- data/bower_components/jquery/src/css/addGetHookIf.js +22 -0
- data/bower_components/jquery/src/css/curCSS.js +57 -0
- data/bower_components/jquery/src/css/defaultDisplay.js +70 -0
- data/bower_components/jquery/src/css/hiddenVisibleSelectors.js +15 -0
- data/bower_components/jquery/src/css/support.js +96 -0
- data/bower_components/jquery/src/css/swap.js +28 -0
- data/bower_components/jquery/src/css/var/cssExpand.js +3 -0
- data/bower_components/jquery/src/css/var/getStyles.js +12 -0
- data/bower_components/jquery/src/css/var/isHidden.js +13 -0
- data/bower_components/jquery/src/css/var/rmargin.js +3 -0
- data/bower_components/jquery/src/css/var/rnumnonpx.js +5 -0
- data/bower_components/jquery/src/data.js +178 -0
- data/bower_components/jquery/src/data/Data.js +181 -0
- data/bower_components/jquery/src/data/accepts.js +20 -0
- data/bower_components/jquery/src/data/var/data_priv.js +5 -0
- data/bower_components/jquery/src/data/var/data_user.js +5 -0
- data/bower_components/jquery/src/deferred.js +149 -0
- data/bower_components/jquery/src/deprecated.js +13 -0
- data/bower_components/jquery/src/dimensions.js +50 -0
- data/bower_components/jquery/src/effects.js +648 -0
- data/bower_components/jquery/src/effects/Tween.js +114 -0
- data/bower_components/jquery/src/effects/animatedSelector.js +13 -0
- data/bower_components/jquery/src/event.js +868 -0
- data/bower_components/jquery/src/event/ajax.js +13 -0
- data/bower_components/jquery/src/event/alias.js +39 -0
- data/bower_components/jquery/src/event/support.js +9 -0
- data/bower_components/jquery/src/exports/amd.js +24 -0
- data/bower_components/jquery/src/exports/global.js +32 -0
- data/bower_components/jquery/src/intro.js +44 -0
- data/bower_components/jquery/src/jquery.js +37 -0
- data/bower_components/jquery/src/manipulation.js +580 -0
- data/bower_components/jquery/src/manipulation/_evalUrl.js +18 -0
- data/bower_components/jquery/src/manipulation/support.js +32 -0
- data/bower_components/jquery/src/manipulation/var/rcheckableType.js +3 -0
- data/bower_components/jquery/src/offset.js +207 -0
- data/bower_components/jquery/src/outro.js +1 -0
- data/bower_components/jquery/src/queue.js +142 -0
- data/bower_components/jquery/src/queue/delay.js +22 -0
- data/bower_components/jquery/src/selector-native.js +172 -0
- data/bower_components/jquery/src/selector-sizzle.js +14 -0
- data/bower_components/jquery/src/selector.js +1 -0
- data/bower_components/jquery/src/serialize.js +111 -0
- data/bower_components/jquery/src/sizzle/dist/sizzle.js +2067 -0
- data/bower_components/jquery/src/sizzle/dist/sizzle.min.js +3 -0
- data/bower_components/jquery/src/sizzle/dist/sizzle.min.map +1 -0
- data/bower_components/jquery/src/traversing.js +199 -0
- data/bower_components/jquery/src/traversing/findFilter.js +100 -0
- data/bower_components/jquery/src/traversing/var/rneedsContext.js +6 -0
- data/bower_components/jquery/src/var/arr.js +3 -0
- data/bower_components/jquery/src/var/class2type.js +4 -0
- data/bower_components/jquery/src/var/concat.js +5 -0
- data/bower_components/jquery/src/var/hasOwn.js +5 -0
- data/bower_components/jquery/src/var/indexOf.js +5 -0
- data/bower_components/jquery/src/var/pnum.js +3 -0
- data/bower_components/jquery/src/var/push.js +5 -0
- data/bower_components/jquery/src/var/rnotwhite.js +3 -0
- data/bower_components/jquery/src/var/slice.js +5 -0
- data/bower_components/jquery/src/var/strundefined.js +3 -0
- data/bower_components/jquery/src/var/support.js +4 -0
- data/bower_components/jquery/src/var/toString.js +5 -0
- data/bower_components/jquery/src/wrap.js +79 -0
- data/columbus3.gemspec +1 -1
- data/exe/columbus3 +72 -7
- data/lib/columbus3.rb +2 -1
- data/lib/columbus3/metadata/sidecar.rb +10 -1
- data/lib/columbus3/renderer/flot_renderer.rb +66 -0
- data/lib/columbus3/renderer/{renderer.rb → leaflet_renderer.rb} +0 -0
- data/lib/columbus3/version.rb +1 -1
- data/lib/html/flot.html.erb +106 -0
- metadata +194 -5
- data/README.md +0 -41
|
@@ -0,0 +1,135 @@
|
|
|
1
|
+
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
|
|
2
|
+
<html>
|
|
3
|
+
<head>
|
|
4
|
+
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
|
|
5
|
+
<title>Flot Examples: Tracking</title>
|
|
6
|
+
<link href="../examples.css" rel="stylesheet" type="text/css">
|
|
7
|
+
<!--[if lte IE 8]><script language="javascript" type="text/javascript" src="../../excanvas.min.js"></script><![endif]-->
|
|
8
|
+
<script language="javascript" type="text/javascript" src="../../jquery.js"></script>
|
|
9
|
+
<script language="javascript" type="text/javascript" src="../../jquery.flot.js"></script>
|
|
10
|
+
<script language="javascript" type="text/javascript" src="../../jquery.flot.crosshair.js"></script>
|
|
11
|
+
<script type="text/javascript">
|
|
12
|
+
|
|
13
|
+
$(function() {
|
|
14
|
+
|
|
15
|
+
var sin = [], cos = [];
|
|
16
|
+
for (var i = 0; i < 14; i += 0.1) {
|
|
17
|
+
sin.push([i, Math.sin(i)]);
|
|
18
|
+
cos.push([i, Math.cos(i)]);
|
|
19
|
+
}
|
|
20
|
+
|
|
21
|
+
plot = $.plot("#placeholder", [
|
|
22
|
+
{ data: sin, label: "sin(x) = -0.00"},
|
|
23
|
+
{ data: cos, label: "cos(x) = -0.00" }
|
|
24
|
+
], {
|
|
25
|
+
series: {
|
|
26
|
+
lines: {
|
|
27
|
+
show: true
|
|
28
|
+
}
|
|
29
|
+
},
|
|
30
|
+
crosshair: {
|
|
31
|
+
mode: "x"
|
|
32
|
+
},
|
|
33
|
+
grid: {
|
|
34
|
+
hoverable: true,
|
|
35
|
+
autoHighlight: false
|
|
36
|
+
},
|
|
37
|
+
yaxis: {
|
|
38
|
+
min: -1.2,
|
|
39
|
+
max: 1.2
|
|
40
|
+
}
|
|
41
|
+
});
|
|
42
|
+
|
|
43
|
+
var legends = $("#placeholder .legendLabel");
|
|
44
|
+
|
|
45
|
+
legends.each(function () {
|
|
46
|
+
// fix the widths so they don't jump around
|
|
47
|
+
$(this).css('width', $(this).width());
|
|
48
|
+
});
|
|
49
|
+
|
|
50
|
+
var updateLegendTimeout = null;
|
|
51
|
+
var latestPosition = null;
|
|
52
|
+
|
|
53
|
+
function updateLegend() {
|
|
54
|
+
|
|
55
|
+
updateLegendTimeout = null;
|
|
56
|
+
|
|
57
|
+
var pos = latestPosition;
|
|
58
|
+
|
|
59
|
+
var axes = plot.getAxes();
|
|
60
|
+
if (pos.x < axes.xaxis.min || pos.x > axes.xaxis.max ||
|
|
61
|
+
pos.y < axes.yaxis.min || pos.y > axes.yaxis.max) {
|
|
62
|
+
return;
|
|
63
|
+
}
|
|
64
|
+
|
|
65
|
+
var i, j, dataset = plot.getData();
|
|
66
|
+
for (i = 0; i < dataset.length; ++i) {
|
|
67
|
+
|
|
68
|
+
var series = dataset[i];
|
|
69
|
+
|
|
70
|
+
// Find the nearest points, x-wise
|
|
71
|
+
|
|
72
|
+
for (j = 0; j < series.data.length; ++j) {
|
|
73
|
+
if (series.data[j][0] > pos.x) {
|
|
74
|
+
break;
|
|
75
|
+
}
|
|
76
|
+
}
|
|
77
|
+
|
|
78
|
+
// Now Interpolate
|
|
79
|
+
|
|
80
|
+
var y,
|
|
81
|
+
p1 = series.data[j - 1],
|
|
82
|
+
p2 = series.data[j];
|
|
83
|
+
|
|
84
|
+
if (p1 == null) {
|
|
85
|
+
y = p2[1];
|
|
86
|
+
} else if (p2 == null) {
|
|
87
|
+
y = p1[1];
|
|
88
|
+
} else {
|
|
89
|
+
y = p1[1] + (p2[1] - p1[1]) * (pos.x - p1[0]) / (p2[0] - p1[0]);
|
|
90
|
+
}
|
|
91
|
+
|
|
92
|
+
legends.eq(i).text(series.label.replace(/=.*/, "= " + y.toFixed(2)));
|
|
93
|
+
}
|
|
94
|
+
}
|
|
95
|
+
|
|
96
|
+
$("#placeholder").bind("plothover", function (event, pos, item) {
|
|
97
|
+
latestPosition = pos;
|
|
98
|
+
if (!updateLegendTimeout) {
|
|
99
|
+
updateLegendTimeout = setTimeout(updateLegend, 50);
|
|
100
|
+
}
|
|
101
|
+
});
|
|
102
|
+
|
|
103
|
+
// Add the Flot version string to the footer
|
|
104
|
+
|
|
105
|
+
$("#footer").prepend("Flot " + $.plot.version + " – ");
|
|
106
|
+
});
|
|
107
|
+
|
|
108
|
+
</script>
|
|
109
|
+
</head>
|
|
110
|
+
<body>
|
|
111
|
+
|
|
112
|
+
<div id="header">
|
|
113
|
+
<h2>Tracking</h2>
|
|
114
|
+
</div>
|
|
115
|
+
|
|
116
|
+
<div id="content">
|
|
117
|
+
|
|
118
|
+
<div class="demo-container">
|
|
119
|
+
<div id="placeholder" class="demo-placeholder"></div>
|
|
120
|
+
</div>
|
|
121
|
+
|
|
122
|
+
<p>You can add crosshairs that'll track the mouse position, either on both axes or as here on only one.</p>
|
|
123
|
+
|
|
124
|
+
<p>If you combine it with listening on hover events, you can use it to track the intersection on the curves by interpolating the data points (look at the legend).</p>
|
|
125
|
+
|
|
126
|
+
<p id="hoverdata"></p>
|
|
127
|
+
|
|
128
|
+
</div>
|
|
129
|
+
|
|
130
|
+
<div id="footer">
|
|
131
|
+
Copyright © 2007 - 2014 IOLA and Ole Laursen
|
|
132
|
+
</div>
|
|
133
|
+
|
|
134
|
+
</body>
|
|
135
|
+
</html>
|
|
@@ -0,0 +1,147 @@
|
|
|
1
|
+
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
|
|
2
|
+
<html>
|
|
3
|
+
<head>
|
|
4
|
+
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
|
|
5
|
+
<title>Flot Examples: Visitors</title>
|
|
6
|
+
<link href="../examples.css" rel="stylesheet" type="text/css">
|
|
7
|
+
<!--[if lte IE 8]><script language="javascript" type="text/javascript" src="../../excanvas.min.js"></script><![endif]-->
|
|
8
|
+
<script language="javascript" type="text/javascript" src="../../jquery.js"></script>
|
|
9
|
+
<script language="javascript" type="text/javascript" src="../../jquery.flot.js"></script>
|
|
10
|
+
<script language="javascript" type="text/javascript" src="../../jquery.flot.time.js"></script>
|
|
11
|
+
<script language="javascript" type="text/javascript" src="../../jquery.flot.selection.js"></script>
|
|
12
|
+
<script type="text/javascript">
|
|
13
|
+
|
|
14
|
+
$(function() {
|
|
15
|
+
|
|
16
|
+
var d = [[1196463600000, 0], [1196550000000, 0], [1196636400000, 0], [1196722800000, 77], [1196809200000, 3636], [1196895600000, 3575], [1196982000000, 2736], [1197068400000, 1086], [1197154800000, 676], [1197241200000, 1205], [1197327600000, 906], [1197414000000, 710], [1197500400000, 639], [1197586800000, 540], [1197673200000, 435], [1197759600000, 301], [1197846000000, 575], [1197932400000, 481], [1198018800000, 591], [1198105200000, 608], [1198191600000, 459], [1198278000000, 234], [1198364400000, 1352], [1198450800000, 686], [1198537200000, 279], [1198623600000, 449], [1198710000000, 468], [1198796400000, 392], [1198882800000, 282], [1198969200000, 208], [1199055600000, 229], [1199142000000, 177], [1199228400000, 374], [1199314800000, 436], [1199401200000, 404], [1199487600000, 253], [1199574000000, 218], [1199660400000, 476], [1199746800000, 462], [1199833200000, 448], [1199919600000, 442], [1200006000000, 403], [1200092400000, 204], [1200178800000, 194], [1200265200000, 327], [1200351600000, 374], [1200438000000, 507], [1200524400000, 546], [1200610800000, 482], [1200697200000, 283], [1200783600000, 221], [1200870000000, 483], [1200956400000, 523], [1201042800000, 528], [1201129200000, 483], [1201215600000, 452], [1201302000000, 270], [1201388400000, 222], [1201474800000, 439], [1201561200000, 559], [1201647600000, 521], [1201734000000, 477], [1201820400000, 442], [1201906800000, 252], [1201993200000, 236], [1202079600000, 525], [1202166000000, 477], [1202252400000, 386], [1202338800000, 409], [1202425200000, 408], [1202511600000, 237], [1202598000000, 193], [1202684400000, 357], [1202770800000, 414], [1202857200000, 393], [1202943600000, 353], [1203030000000, 364], [1203116400000, 215], [1203202800000, 214], [1203289200000, 356], [1203375600000, 399], [1203462000000, 334], [1203548400000, 348], [1203634800000, 243], [1203721200000, 126], [1203807600000, 157], [1203894000000, 288]];
|
|
17
|
+
|
|
18
|
+
// first correct the timestamps - they are recorded as the daily
|
|
19
|
+
// midnights in UTC+0100, but Flot always displays dates in UTC
|
|
20
|
+
// so we have to add one hour to hit the midnights in the plot
|
|
21
|
+
|
|
22
|
+
for (var i = 0; i < d.length; ++i) {
|
|
23
|
+
d[i][0] += 60 * 60 * 1000;
|
|
24
|
+
}
|
|
25
|
+
|
|
26
|
+
// helper for returning the weekends in a period
|
|
27
|
+
|
|
28
|
+
function weekendAreas(axes) {
|
|
29
|
+
|
|
30
|
+
var markings = [],
|
|
31
|
+
d = new Date(axes.xaxis.min);
|
|
32
|
+
|
|
33
|
+
// go to the first Saturday
|
|
34
|
+
|
|
35
|
+
d.setUTCDate(d.getUTCDate() - ((d.getUTCDay() + 1) % 7))
|
|
36
|
+
d.setUTCSeconds(0);
|
|
37
|
+
d.setUTCMinutes(0);
|
|
38
|
+
d.setUTCHours(0);
|
|
39
|
+
|
|
40
|
+
var i = d.getTime();
|
|
41
|
+
|
|
42
|
+
// when we don't set yaxis, the rectangle automatically
|
|
43
|
+
// extends to infinity upwards and downwards
|
|
44
|
+
|
|
45
|
+
do {
|
|
46
|
+
markings.push({ xaxis: { from: i, to: i + 2 * 24 * 60 * 60 * 1000 } });
|
|
47
|
+
i += 7 * 24 * 60 * 60 * 1000;
|
|
48
|
+
} while (i < axes.xaxis.max);
|
|
49
|
+
|
|
50
|
+
return markings;
|
|
51
|
+
}
|
|
52
|
+
|
|
53
|
+
var options = {
|
|
54
|
+
xaxis: {
|
|
55
|
+
mode: "time",
|
|
56
|
+
tickLength: 5
|
|
57
|
+
},
|
|
58
|
+
selection: {
|
|
59
|
+
mode: "x"
|
|
60
|
+
},
|
|
61
|
+
grid: {
|
|
62
|
+
markings: weekendAreas
|
|
63
|
+
}
|
|
64
|
+
};
|
|
65
|
+
|
|
66
|
+
var plot = $.plot("#placeholder", [d], options);
|
|
67
|
+
|
|
68
|
+
var overview = $.plot("#overview", [d], {
|
|
69
|
+
series: {
|
|
70
|
+
lines: {
|
|
71
|
+
show: true,
|
|
72
|
+
lineWidth: 1
|
|
73
|
+
},
|
|
74
|
+
shadowSize: 0
|
|
75
|
+
},
|
|
76
|
+
xaxis: {
|
|
77
|
+
ticks: [],
|
|
78
|
+
mode: "time"
|
|
79
|
+
},
|
|
80
|
+
yaxis: {
|
|
81
|
+
ticks: [],
|
|
82
|
+
min: 0,
|
|
83
|
+
autoscaleMargin: 0.1
|
|
84
|
+
},
|
|
85
|
+
selection: {
|
|
86
|
+
mode: "x"
|
|
87
|
+
}
|
|
88
|
+
});
|
|
89
|
+
|
|
90
|
+
// now connect the two
|
|
91
|
+
|
|
92
|
+
$("#placeholder").bind("plotselected", function (event, ranges) {
|
|
93
|
+
|
|
94
|
+
// do the zooming
|
|
95
|
+
$.each(plot.getXAxes(), function(_, axis) {
|
|
96
|
+
var opts = axis.options;
|
|
97
|
+
opts.min = ranges.xaxis.from;
|
|
98
|
+
opts.max = ranges.xaxis.to;
|
|
99
|
+
});
|
|
100
|
+
plot.setupGrid();
|
|
101
|
+
plot.draw();
|
|
102
|
+
plot.clearSelection();
|
|
103
|
+
|
|
104
|
+
// don't fire event on the overview to prevent eternal loop
|
|
105
|
+
|
|
106
|
+
overview.setSelection(ranges, true);
|
|
107
|
+
});
|
|
108
|
+
|
|
109
|
+
$("#overview").bind("plotselected", function (event, ranges) {
|
|
110
|
+
plot.setSelection(ranges);
|
|
111
|
+
});
|
|
112
|
+
|
|
113
|
+
// Add the Flot version string to the footer
|
|
114
|
+
|
|
115
|
+
$("#footer").prepend("Flot " + $.plot.version + " – ");
|
|
116
|
+
});
|
|
117
|
+
|
|
118
|
+
</script>
|
|
119
|
+
</head>
|
|
120
|
+
<body>
|
|
121
|
+
|
|
122
|
+
<div id="header">
|
|
123
|
+
<h2>Visitors</h2>
|
|
124
|
+
</div>
|
|
125
|
+
|
|
126
|
+
<div id="content">
|
|
127
|
+
|
|
128
|
+
<div class="demo-container">
|
|
129
|
+
<div id="placeholder" class="demo-placeholder"></div>
|
|
130
|
+
</div>
|
|
131
|
+
|
|
132
|
+
<div class="demo-container" style="height:150px;">
|
|
133
|
+
<div id="overview" class="demo-placeholder"></div>
|
|
134
|
+
</div>
|
|
135
|
+
|
|
136
|
+
<p>This plot shows visitors per day to the Flot homepage, with weekends colored.</p>
|
|
137
|
+
|
|
138
|
+
<p>The smaller plot is linked to the main plot, so it acts as an overview. Try dragging a selection on either plot, and watch the behavior of the other.</p>
|
|
139
|
+
|
|
140
|
+
</div>
|
|
141
|
+
|
|
142
|
+
<div id="footer">
|
|
143
|
+
Copyright © 2007 - 2014 IOLA and Ole Laursen
|
|
144
|
+
</div>
|
|
145
|
+
|
|
146
|
+
</body>
|
|
147
|
+
</html>
|
|
@@ -0,0 +1,144 @@
|
|
|
1
|
+
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
|
|
2
|
+
<html>
|
|
3
|
+
<head>
|
|
4
|
+
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
|
|
5
|
+
<title>Flot Examples: Selection and zooming</title>
|
|
6
|
+
<link href="../examples.css" rel="stylesheet" type="text/css">
|
|
7
|
+
<!--[if lte IE 8]><script language="javascript" type="text/javascript" src="../../excanvas.min.js"></script><![endif]-->
|
|
8
|
+
<script language="javascript" type="text/javascript" src="../../jquery.js"></script>
|
|
9
|
+
<script language="javascript" type="text/javascript" src="../../jquery.flot.js"></script>
|
|
10
|
+
<script language="javascript" type="text/javascript" src="../../jquery.flot.selection.js"></script>
|
|
11
|
+
<script type="text/javascript">
|
|
12
|
+
|
|
13
|
+
$(function() {
|
|
14
|
+
|
|
15
|
+
// setup plot
|
|
16
|
+
|
|
17
|
+
function getData(x1, x2) {
|
|
18
|
+
|
|
19
|
+
var d = [];
|
|
20
|
+
for (var i = 0; i <= 100; ++i) {
|
|
21
|
+
var x = x1 + i * (x2 - x1) / 100;
|
|
22
|
+
d.push([x, Math.sin(x * Math.sin(x))]);
|
|
23
|
+
}
|
|
24
|
+
|
|
25
|
+
return [
|
|
26
|
+
{ label: "sin(x sin(x))", data: d }
|
|
27
|
+
];
|
|
28
|
+
}
|
|
29
|
+
|
|
30
|
+
var options = {
|
|
31
|
+
legend: {
|
|
32
|
+
show: false
|
|
33
|
+
},
|
|
34
|
+
series: {
|
|
35
|
+
lines: {
|
|
36
|
+
show: true
|
|
37
|
+
},
|
|
38
|
+
points: {
|
|
39
|
+
show: true
|
|
40
|
+
}
|
|
41
|
+
},
|
|
42
|
+
yaxis: {
|
|
43
|
+
ticks: 10
|
|
44
|
+
},
|
|
45
|
+
selection: {
|
|
46
|
+
mode: "xy"
|
|
47
|
+
}
|
|
48
|
+
};
|
|
49
|
+
|
|
50
|
+
var startData = getData(0, 3 * Math.PI);
|
|
51
|
+
|
|
52
|
+
var plot = $.plot("#placeholder", startData, options);
|
|
53
|
+
|
|
54
|
+
// Create the overview plot
|
|
55
|
+
|
|
56
|
+
var overview = $.plot("#overview", startData, {
|
|
57
|
+
legend: {
|
|
58
|
+
show: false
|
|
59
|
+
},
|
|
60
|
+
series: {
|
|
61
|
+
lines: {
|
|
62
|
+
show: true,
|
|
63
|
+
lineWidth: 1
|
|
64
|
+
},
|
|
65
|
+
shadowSize: 0
|
|
66
|
+
},
|
|
67
|
+
xaxis: {
|
|
68
|
+
ticks: 4
|
|
69
|
+
},
|
|
70
|
+
yaxis: {
|
|
71
|
+
ticks: 3,
|
|
72
|
+
min: -2,
|
|
73
|
+
max: 2
|
|
74
|
+
},
|
|
75
|
+
grid: {
|
|
76
|
+
color: "#999"
|
|
77
|
+
},
|
|
78
|
+
selection: {
|
|
79
|
+
mode: "xy"
|
|
80
|
+
}
|
|
81
|
+
});
|
|
82
|
+
|
|
83
|
+
// now connect the two
|
|
84
|
+
|
|
85
|
+
$("#placeholder").bind("plotselected", function (event, ranges) {
|
|
86
|
+
|
|
87
|
+
// clamp the zooming to prevent eternal zoom
|
|
88
|
+
|
|
89
|
+
if (ranges.xaxis.to - ranges.xaxis.from < 0.00001) {
|
|
90
|
+
ranges.xaxis.to = ranges.xaxis.from + 0.00001;
|
|
91
|
+
}
|
|
92
|
+
|
|
93
|
+
if (ranges.yaxis.to - ranges.yaxis.from < 0.00001) {
|
|
94
|
+
ranges.yaxis.to = ranges.yaxis.from + 0.00001;
|
|
95
|
+
}
|
|
96
|
+
|
|
97
|
+
// do the zooming
|
|
98
|
+
|
|
99
|
+
plot = $.plot("#placeholder", getData(ranges.xaxis.from, ranges.xaxis.to),
|
|
100
|
+
$.extend(true, {}, options, {
|
|
101
|
+
xaxis: { min: ranges.xaxis.from, max: ranges.xaxis.to },
|
|
102
|
+
yaxis: { min: ranges.yaxis.from, max: ranges.yaxis.to }
|
|
103
|
+
})
|
|
104
|
+
);
|
|
105
|
+
|
|
106
|
+
// don't fire event on the overview to prevent eternal loop
|
|
107
|
+
|
|
108
|
+
overview.setSelection(ranges, true);
|
|
109
|
+
});
|
|
110
|
+
|
|
111
|
+
$("#overview").bind("plotselected", function (event, ranges) {
|
|
112
|
+
plot.setSelection(ranges);
|
|
113
|
+
});
|
|
114
|
+
|
|
115
|
+
// Add the Flot version string to the footer
|
|
116
|
+
|
|
117
|
+
$("#footer").prepend("Flot " + $.plot.version + " – ");
|
|
118
|
+
});
|
|
119
|
+
|
|
120
|
+
</script>
|
|
121
|
+
</head>
|
|
122
|
+
<body>
|
|
123
|
+
|
|
124
|
+
<div id="header">
|
|
125
|
+
<h2>Selection and zooming</h2>
|
|
126
|
+
</div>
|
|
127
|
+
|
|
128
|
+
<div id="content">
|
|
129
|
+
|
|
130
|
+
<div class="demo-container">
|
|
131
|
+
<div id="placeholder" class="demo-placeholder" style="float:left; width:650px;"></div>
|
|
132
|
+
<div id="overview" class="demo-placeholder" style="float:right;width:160px; height:125px;"></div>
|
|
133
|
+
</div>
|
|
134
|
+
|
|
135
|
+
<p>Selection support makes it easy to construct flexible zooming schemes. With a few lines of code, the small overview plot to the right has been connected to the large plot. Try selecting a rectangle on either of them.</p>
|
|
136
|
+
|
|
137
|
+
</div>
|
|
138
|
+
|
|
139
|
+
<div id="footer">
|
|
140
|
+
Copyright © 2007 - 2014 IOLA and Ole Laursen
|
|
141
|
+
</div>
|
|
142
|
+
|
|
143
|
+
</body>
|
|
144
|
+
</html>
|
|
@@ -0,0 +1,1428 @@
|
|
|
1
|
+
// Copyright 2006 Google Inc.
|
|
2
|
+
//
|
|
3
|
+
// Licensed under the Apache License, Version 2.0 (the "License");
|
|
4
|
+
// you may not use this file except in compliance with the License.
|
|
5
|
+
// You may obtain a copy of the License at
|
|
6
|
+
//
|
|
7
|
+
// http://www.apache.org/licenses/LICENSE-2.0
|
|
8
|
+
//
|
|
9
|
+
// Unless required by applicable law or agreed to in writing, software
|
|
10
|
+
// distributed under the License is distributed on an "AS IS" BASIS,
|
|
11
|
+
// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
|
12
|
+
// See the License for the specific language governing permissions and
|
|
13
|
+
// limitations under the License.
|
|
14
|
+
|
|
15
|
+
|
|
16
|
+
// Known Issues:
|
|
17
|
+
//
|
|
18
|
+
// * Patterns only support repeat.
|
|
19
|
+
// * Radial gradient are not implemented. The VML version of these look very
|
|
20
|
+
// different from the canvas one.
|
|
21
|
+
// * Clipping paths are not implemented.
|
|
22
|
+
// * Coordsize. The width and height attribute have higher priority than the
|
|
23
|
+
// width and height style values which isn't correct.
|
|
24
|
+
// * Painting mode isn't implemented.
|
|
25
|
+
// * Canvas width/height should is using content-box by default. IE in
|
|
26
|
+
// Quirks mode will draw the canvas using border-box. Either change your
|
|
27
|
+
// doctype to HTML5
|
|
28
|
+
// (http://www.whatwg.org/specs/web-apps/current-work/#the-doctype)
|
|
29
|
+
// or use Box Sizing Behavior from WebFX
|
|
30
|
+
// (http://webfx.eae.net/dhtml/boxsizing/boxsizing.html)
|
|
31
|
+
// * Non uniform scaling does not correctly scale strokes.
|
|
32
|
+
// * Filling very large shapes (above 5000 points) is buggy.
|
|
33
|
+
// * Optimize. There is always room for speed improvements.
|
|
34
|
+
|
|
35
|
+
// Only add this code if we do not already have a canvas implementation
|
|
36
|
+
if (!document.createElement('canvas').getContext) {
|
|
37
|
+
|
|
38
|
+
(function() {
|
|
39
|
+
|
|
40
|
+
// alias some functions to make (compiled) code shorter
|
|
41
|
+
var m = Math;
|
|
42
|
+
var mr = m.round;
|
|
43
|
+
var ms = m.sin;
|
|
44
|
+
var mc = m.cos;
|
|
45
|
+
var abs = m.abs;
|
|
46
|
+
var sqrt = m.sqrt;
|
|
47
|
+
|
|
48
|
+
// this is used for sub pixel precision
|
|
49
|
+
var Z = 10;
|
|
50
|
+
var Z2 = Z / 2;
|
|
51
|
+
|
|
52
|
+
var IE_VERSION = +navigator.userAgent.match(/MSIE ([\d.]+)?/)[1];
|
|
53
|
+
|
|
54
|
+
/**
|
|
55
|
+
* This funtion is assigned to the <canvas> elements as element.getContext().
|
|
56
|
+
* @this {HTMLElement}
|
|
57
|
+
* @return {CanvasRenderingContext2D_}
|
|
58
|
+
*/
|
|
59
|
+
function getContext() {
|
|
60
|
+
return this.context_ ||
|
|
61
|
+
(this.context_ = new CanvasRenderingContext2D_(this));
|
|
62
|
+
}
|
|
63
|
+
|
|
64
|
+
var slice = Array.prototype.slice;
|
|
65
|
+
|
|
66
|
+
/**
|
|
67
|
+
* Binds a function to an object. The returned function will always use the
|
|
68
|
+
* passed in {@code obj} as {@code this}.
|
|
69
|
+
*
|
|
70
|
+
* Example:
|
|
71
|
+
*
|
|
72
|
+
* g = bind(f, obj, a, b)
|
|
73
|
+
* g(c, d) // will do f.call(obj, a, b, c, d)
|
|
74
|
+
*
|
|
75
|
+
* @param {Function} f The function to bind the object to
|
|
76
|
+
* @param {Object} obj The object that should act as this when the function
|
|
77
|
+
* is called
|
|
78
|
+
* @param {*} var_args Rest arguments that will be used as the initial
|
|
79
|
+
* arguments when the function is called
|
|
80
|
+
* @return {Function} A new function that has bound this
|
|
81
|
+
*/
|
|
82
|
+
function bind(f, obj, var_args) {
|
|
83
|
+
var a = slice.call(arguments, 2);
|
|
84
|
+
return function() {
|
|
85
|
+
return f.apply(obj, a.concat(slice.call(arguments)));
|
|
86
|
+
};
|
|
87
|
+
}
|
|
88
|
+
|
|
89
|
+
function encodeHtmlAttribute(s) {
|
|
90
|
+
return String(s).replace(/&/g, '&').replace(/"/g, '"');
|
|
91
|
+
}
|
|
92
|
+
|
|
93
|
+
function addNamespace(doc, prefix, urn) {
|
|
94
|
+
if (!doc.namespaces[prefix]) {
|
|
95
|
+
doc.namespaces.add(prefix, urn, '#default#VML');
|
|
96
|
+
}
|
|
97
|
+
}
|
|
98
|
+
|
|
99
|
+
function addNamespacesAndStylesheet(doc) {
|
|
100
|
+
addNamespace(doc, 'g_vml_', 'urn:schemas-microsoft-com:vml');
|
|
101
|
+
addNamespace(doc, 'g_o_', 'urn:schemas-microsoft-com:office:office');
|
|
102
|
+
|
|
103
|
+
// Setup default CSS. Only add one style sheet per document
|
|
104
|
+
if (!doc.styleSheets['ex_canvas_']) {
|
|
105
|
+
var ss = doc.createStyleSheet();
|
|
106
|
+
ss.owningElement.id = 'ex_canvas_';
|
|
107
|
+
ss.cssText = 'canvas{display:inline-block;overflow:hidden;' +
|
|
108
|
+
// default size is 300x150 in Gecko and Opera
|
|
109
|
+
'text-align:left;width:300px;height:150px}';
|
|
110
|
+
}
|
|
111
|
+
}
|
|
112
|
+
|
|
113
|
+
// Add namespaces and stylesheet at startup.
|
|
114
|
+
addNamespacesAndStylesheet(document);
|
|
115
|
+
|
|
116
|
+
var G_vmlCanvasManager_ = {
|
|
117
|
+
init: function(opt_doc) {
|
|
118
|
+
var doc = opt_doc || document;
|
|
119
|
+
// Create a dummy element so that IE will allow canvas elements to be
|
|
120
|
+
// recognized.
|
|
121
|
+
doc.createElement('canvas');
|
|
122
|
+
doc.attachEvent('onreadystatechange', bind(this.init_, this, doc));
|
|
123
|
+
},
|
|
124
|
+
|
|
125
|
+
init_: function(doc) {
|
|
126
|
+
// find all canvas elements
|
|
127
|
+
var els = doc.getElementsByTagName('canvas');
|
|
128
|
+
for (var i = 0; i < els.length; i++) {
|
|
129
|
+
this.initElement(els[i]);
|
|
130
|
+
}
|
|
131
|
+
},
|
|
132
|
+
|
|
133
|
+
/**
|
|
134
|
+
* Public initializes a canvas element so that it can be used as canvas
|
|
135
|
+
* element from now on. This is called automatically before the page is
|
|
136
|
+
* loaded but if you are creating elements using createElement you need to
|
|
137
|
+
* make sure this is called on the element.
|
|
138
|
+
* @param {HTMLElement} el The canvas element to initialize.
|
|
139
|
+
* @return {HTMLElement} the element that was created.
|
|
140
|
+
*/
|
|
141
|
+
initElement: function(el) {
|
|
142
|
+
if (!el.getContext) {
|
|
143
|
+
el.getContext = getContext;
|
|
144
|
+
|
|
145
|
+
// Add namespaces and stylesheet to document of the element.
|
|
146
|
+
addNamespacesAndStylesheet(el.ownerDocument);
|
|
147
|
+
|
|
148
|
+
// Remove fallback content. There is no way to hide text nodes so we
|
|
149
|
+
// just remove all childNodes. We could hide all elements and remove
|
|
150
|
+
// text nodes but who really cares about the fallback content.
|
|
151
|
+
el.innerHTML = '';
|
|
152
|
+
|
|
153
|
+
// do not use inline function because that will leak memory
|
|
154
|
+
el.attachEvent('onpropertychange', onPropertyChange);
|
|
155
|
+
el.attachEvent('onresize', onResize);
|
|
156
|
+
|
|
157
|
+
var attrs = el.attributes;
|
|
158
|
+
if (attrs.width && attrs.width.specified) {
|
|
159
|
+
// TODO: use runtimeStyle and coordsize
|
|
160
|
+
// el.getContext().setWidth_(attrs.width.nodeValue);
|
|
161
|
+
el.style.width = attrs.width.nodeValue + 'px';
|
|
162
|
+
} else {
|
|
163
|
+
el.width = el.clientWidth;
|
|
164
|
+
}
|
|
165
|
+
if (attrs.height && attrs.height.specified) {
|
|
166
|
+
// TODO: use runtimeStyle and coordsize
|
|
167
|
+
// el.getContext().setHeight_(attrs.height.nodeValue);
|
|
168
|
+
el.style.height = attrs.height.nodeValue + 'px';
|
|
169
|
+
} else {
|
|
170
|
+
el.height = el.clientHeight;
|
|
171
|
+
}
|
|
172
|
+
//el.getContext().setCoordsize_()
|
|
173
|
+
}
|
|
174
|
+
return el;
|
|
175
|
+
}
|
|
176
|
+
};
|
|
177
|
+
|
|
178
|
+
function onPropertyChange(e) {
|
|
179
|
+
var el = e.srcElement;
|
|
180
|
+
|
|
181
|
+
switch (e.propertyName) {
|
|
182
|
+
case 'width':
|
|
183
|
+
el.getContext().clearRect();
|
|
184
|
+
el.style.width = el.attributes.width.nodeValue + 'px';
|
|
185
|
+
// In IE8 this does not trigger onresize.
|
|
186
|
+
el.firstChild.style.width = el.clientWidth + 'px';
|
|
187
|
+
break;
|
|
188
|
+
case 'height':
|
|
189
|
+
el.getContext().clearRect();
|
|
190
|
+
el.style.height = el.attributes.height.nodeValue + 'px';
|
|
191
|
+
el.firstChild.style.height = el.clientHeight + 'px';
|
|
192
|
+
break;
|
|
193
|
+
}
|
|
194
|
+
}
|
|
195
|
+
|
|
196
|
+
function onResize(e) {
|
|
197
|
+
var el = e.srcElement;
|
|
198
|
+
if (el.firstChild) {
|
|
199
|
+
el.firstChild.style.width = el.clientWidth + 'px';
|
|
200
|
+
el.firstChild.style.height = el.clientHeight + 'px';
|
|
201
|
+
}
|
|
202
|
+
}
|
|
203
|
+
|
|
204
|
+
G_vmlCanvasManager_.init();
|
|
205
|
+
|
|
206
|
+
// precompute "00" to "FF"
|
|
207
|
+
var decToHex = [];
|
|
208
|
+
for (var i = 0; i < 16; i++) {
|
|
209
|
+
for (var j = 0; j < 16; j++) {
|
|
210
|
+
decToHex[i * 16 + j] = i.toString(16) + j.toString(16);
|
|
211
|
+
}
|
|
212
|
+
}
|
|
213
|
+
|
|
214
|
+
function createMatrixIdentity() {
|
|
215
|
+
return [
|
|
216
|
+
[1, 0, 0],
|
|
217
|
+
[0, 1, 0],
|
|
218
|
+
[0, 0, 1]
|
|
219
|
+
];
|
|
220
|
+
}
|
|
221
|
+
|
|
222
|
+
function matrixMultiply(m1, m2) {
|
|
223
|
+
var result = createMatrixIdentity();
|
|
224
|
+
|
|
225
|
+
for (var x = 0; x < 3; x++) {
|
|
226
|
+
for (var y = 0; y < 3; y++) {
|
|
227
|
+
var sum = 0;
|
|
228
|
+
|
|
229
|
+
for (var z = 0; z < 3; z++) {
|
|
230
|
+
sum += m1[x][z] * m2[z][y];
|
|
231
|
+
}
|
|
232
|
+
|
|
233
|
+
result[x][y] = sum;
|
|
234
|
+
}
|
|
235
|
+
}
|
|
236
|
+
return result;
|
|
237
|
+
}
|
|
238
|
+
|
|
239
|
+
function copyState(o1, o2) {
|
|
240
|
+
o2.fillStyle = o1.fillStyle;
|
|
241
|
+
o2.lineCap = o1.lineCap;
|
|
242
|
+
o2.lineJoin = o1.lineJoin;
|
|
243
|
+
o2.lineWidth = o1.lineWidth;
|
|
244
|
+
o2.miterLimit = o1.miterLimit;
|
|
245
|
+
o2.shadowBlur = o1.shadowBlur;
|
|
246
|
+
o2.shadowColor = o1.shadowColor;
|
|
247
|
+
o2.shadowOffsetX = o1.shadowOffsetX;
|
|
248
|
+
o2.shadowOffsetY = o1.shadowOffsetY;
|
|
249
|
+
o2.strokeStyle = o1.strokeStyle;
|
|
250
|
+
o2.globalAlpha = o1.globalAlpha;
|
|
251
|
+
o2.font = o1.font;
|
|
252
|
+
o2.textAlign = o1.textAlign;
|
|
253
|
+
o2.textBaseline = o1.textBaseline;
|
|
254
|
+
o2.arcScaleX_ = o1.arcScaleX_;
|
|
255
|
+
o2.arcScaleY_ = o1.arcScaleY_;
|
|
256
|
+
o2.lineScale_ = o1.lineScale_;
|
|
257
|
+
}
|
|
258
|
+
|
|
259
|
+
var colorData = {
|
|
260
|
+
aliceblue: '#F0F8FF',
|
|
261
|
+
antiquewhite: '#FAEBD7',
|
|
262
|
+
aquamarine: '#7FFFD4',
|
|
263
|
+
azure: '#F0FFFF',
|
|
264
|
+
beige: '#F5F5DC',
|
|
265
|
+
bisque: '#FFE4C4',
|
|
266
|
+
black: '#000000',
|
|
267
|
+
blanchedalmond: '#FFEBCD',
|
|
268
|
+
blueviolet: '#8A2BE2',
|
|
269
|
+
brown: '#A52A2A',
|
|
270
|
+
burlywood: '#DEB887',
|
|
271
|
+
cadetblue: '#5F9EA0',
|
|
272
|
+
chartreuse: '#7FFF00',
|
|
273
|
+
chocolate: '#D2691E',
|
|
274
|
+
coral: '#FF7F50',
|
|
275
|
+
cornflowerblue: '#6495ED',
|
|
276
|
+
cornsilk: '#FFF8DC',
|
|
277
|
+
crimson: '#DC143C',
|
|
278
|
+
cyan: '#00FFFF',
|
|
279
|
+
darkblue: '#00008B',
|
|
280
|
+
darkcyan: '#008B8B',
|
|
281
|
+
darkgoldenrod: '#B8860B',
|
|
282
|
+
darkgray: '#A9A9A9',
|
|
283
|
+
darkgreen: '#006400',
|
|
284
|
+
darkgrey: '#A9A9A9',
|
|
285
|
+
darkkhaki: '#BDB76B',
|
|
286
|
+
darkmagenta: '#8B008B',
|
|
287
|
+
darkolivegreen: '#556B2F',
|
|
288
|
+
darkorange: '#FF8C00',
|
|
289
|
+
darkorchid: '#9932CC',
|
|
290
|
+
darkred: '#8B0000',
|
|
291
|
+
darksalmon: '#E9967A',
|
|
292
|
+
darkseagreen: '#8FBC8F',
|
|
293
|
+
darkslateblue: '#483D8B',
|
|
294
|
+
darkslategray: '#2F4F4F',
|
|
295
|
+
darkslategrey: '#2F4F4F',
|
|
296
|
+
darkturquoise: '#00CED1',
|
|
297
|
+
darkviolet: '#9400D3',
|
|
298
|
+
deeppink: '#FF1493',
|
|
299
|
+
deepskyblue: '#00BFFF',
|
|
300
|
+
dimgray: '#696969',
|
|
301
|
+
dimgrey: '#696969',
|
|
302
|
+
dodgerblue: '#1E90FF',
|
|
303
|
+
firebrick: '#B22222',
|
|
304
|
+
floralwhite: '#FFFAF0',
|
|
305
|
+
forestgreen: '#228B22',
|
|
306
|
+
gainsboro: '#DCDCDC',
|
|
307
|
+
ghostwhite: '#F8F8FF',
|
|
308
|
+
gold: '#FFD700',
|
|
309
|
+
goldenrod: '#DAA520',
|
|
310
|
+
grey: '#808080',
|
|
311
|
+
greenyellow: '#ADFF2F',
|
|
312
|
+
honeydew: '#F0FFF0',
|
|
313
|
+
hotpink: '#FF69B4',
|
|
314
|
+
indianred: '#CD5C5C',
|
|
315
|
+
indigo: '#4B0082',
|
|
316
|
+
ivory: '#FFFFF0',
|
|
317
|
+
khaki: '#F0E68C',
|
|
318
|
+
lavender: '#E6E6FA',
|
|
319
|
+
lavenderblush: '#FFF0F5',
|
|
320
|
+
lawngreen: '#7CFC00',
|
|
321
|
+
lemonchiffon: '#FFFACD',
|
|
322
|
+
lightblue: '#ADD8E6',
|
|
323
|
+
lightcoral: '#F08080',
|
|
324
|
+
lightcyan: '#E0FFFF',
|
|
325
|
+
lightgoldenrodyellow: '#FAFAD2',
|
|
326
|
+
lightgreen: '#90EE90',
|
|
327
|
+
lightgrey: '#D3D3D3',
|
|
328
|
+
lightpink: '#FFB6C1',
|
|
329
|
+
lightsalmon: '#FFA07A',
|
|
330
|
+
lightseagreen: '#20B2AA',
|
|
331
|
+
lightskyblue: '#87CEFA',
|
|
332
|
+
lightslategray: '#778899',
|
|
333
|
+
lightslategrey: '#778899',
|
|
334
|
+
lightsteelblue: '#B0C4DE',
|
|
335
|
+
lightyellow: '#FFFFE0',
|
|
336
|
+
limegreen: '#32CD32',
|
|
337
|
+
linen: '#FAF0E6',
|
|
338
|
+
magenta: '#FF00FF',
|
|
339
|
+
mediumaquamarine: '#66CDAA',
|
|
340
|
+
mediumblue: '#0000CD',
|
|
341
|
+
mediumorchid: '#BA55D3',
|
|
342
|
+
mediumpurple: '#9370DB',
|
|
343
|
+
mediumseagreen: '#3CB371',
|
|
344
|
+
mediumslateblue: '#7B68EE',
|
|
345
|
+
mediumspringgreen: '#00FA9A',
|
|
346
|
+
mediumturquoise: '#48D1CC',
|
|
347
|
+
mediumvioletred: '#C71585',
|
|
348
|
+
midnightblue: '#191970',
|
|
349
|
+
mintcream: '#F5FFFA',
|
|
350
|
+
mistyrose: '#FFE4E1',
|
|
351
|
+
moccasin: '#FFE4B5',
|
|
352
|
+
navajowhite: '#FFDEAD',
|
|
353
|
+
oldlace: '#FDF5E6',
|
|
354
|
+
olivedrab: '#6B8E23',
|
|
355
|
+
orange: '#FFA500',
|
|
356
|
+
orangered: '#FF4500',
|
|
357
|
+
orchid: '#DA70D6',
|
|
358
|
+
palegoldenrod: '#EEE8AA',
|
|
359
|
+
palegreen: '#98FB98',
|
|
360
|
+
paleturquoise: '#AFEEEE',
|
|
361
|
+
palevioletred: '#DB7093',
|
|
362
|
+
papayawhip: '#FFEFD5',
|
|
363
|
+
peachpuff: '#FFDAB9',
|
|
364
|
+
peru: '#CD853F',
|
|
365
|
+
pink: '#FFC0CB',
|
|
366
|
+
plum: '#DDA0DD',
|
|
367
|
+
powderblue: '#B0E0E6',
|
|
368
|
+
rosybrown: '#BC8F8F',
|
|
369
|
+
royalblue: '#4169E1',
|
|
370
|
+
saddlebrown: '#8B4513',
|
|
371
|
+
salmon: '#FA8072',
|
|
372
|
+
sandybrown: '#F4A460',
|
|
373
|
+
seagreen: '#2E8B57',
|
|
374
|
+
seashell: '#FFF5EE',
|
|
375
|
+
sienna: '#A0522D',
|
|
376
|
+
skyblue: '#87CEEB',
|
|
377
|
+
slateblue: '#6A5ACD',
|
|
378
|
+
slategray: '#708090',
|
|
379
|
+
slategrey: '#708090',
|
|
380
|
+
snow: '#FFFAFA',
|
|
381
|
+
springgreen: '#00FF7F',
|
|
382
|
+
steelblue: '#4682B4',
|
|
383
|
+
tan: '#D2B48C',
|
|
384
|
+
thistle: '#D8BFD8',
|
|
385
|
+
tomato: '#FF6347',
|
|
386
|
+
turquoise: '#40E0D0',
|
|
387
|
+
violet: '#EE82EE',
|
|
388
|
+
wheat: '#F5DEB3',
|
|
389
|
+
whitesmoke: '#F5F5F5',
|
|
390
|
+
yellowgreen: '#9ACD32'
|
|
391
|
+
};
|
|
392
|
+
|
|
393
|
+
|
|
394
|
+
function getRgbHslContent(styleString) {
|
|
395
|
+
var start = styleString.indexOf('(', 3);
|
|
396
|
+
var end = styleString.indexOf(')', start + 1);
|
|
397
|
+
var parts = styleString.substring(start + 1, end).split(',');
|
|
398
|
+
// add alpha if needed
|
|
399
|
+
if (parts.length != 4 || styleString.charAt(3) != 'a') {
|
|
400
|
+
parts[3] = 1;
|
|
401
|
+
}
|
|
402
|
+
return parts;
|
|
403
|
+
}
|
|
404
|
+
|
|
405
|
+
function percent(s) {
|
|
406
|
+
return parseFloat(s) / 100;
|
|
407
|
+
}
|
|
408
|
+
|
|
409
|
+
function clamp(v, min, max) {
|
|
410
|
+
return Math.min(max, Math.max(min, v));
|
|
411
|
+
}
|
|
412
|
+
|
|
413
|
+
function hslToRgb(parts){
|
|
414
|
+
var r, g, b, h, s, l;
|
|
415
|
+
h = parseFloat(parts[0]) / 360 % 360;
|
|
416
|
+
if (h < 0)
|
|
417
|
+
h++;
|
|
418
|
+
s = clamp(percent(parts[1]), 0, 1);
|
|
419
|
+
l = clamp(percent(parts[2]), 0, 1);
|
|
420
|
+
if (s == 0) {
|
|
421
|
+
r = g = b = l; // achromatic
|
|
422
|
+
} else {
|
|
423
|
+
var q = l < 0.5 ? l * (1 + s) : l + s - l * s;
|
|
424
|
+
var p = 2 * l - q;
|
|
425
|
+
r = hueToRgb(p, q, h + 1 / 3);
|
|
426
|
+
g = hueToRgb(p, q, h);
|
|
427
|
+
b = hueToRgb(p, q, h - 1 / 3);
|
|
428
|
+
}
|
|
429
|
+
|
|
430
|
+
return '#' + decToHex[Math.floor(r * 255)] +
|
|
431
|
+
decToHex[Math.floor(g * 255)] +
|
|
432
|
+
decToHex[Math.floor(b * 255)];
|
|
433
|
+
}
|
|
434
|
+
|
|
435
|
+
function hueToRgb(m1, m2, h) {
|
|
436
|
+
if (h < 0)
|
|
437
|
+
h++;
|
|
438
|
+
if (h > 1)
|
|
439
|
+
h--;
|
|
440
|
+
|
|
441
|
+
if (6 * h < 1)
|
|
442
|
+
return m1 + (m2 - m1) * 6 * h;
|
|
443
|
+
else if (2 * h < 1)
|
|
444
|
+
return m2;
|
|
445
|
+
else if (3 * h < 2)
|
|
446
|
+
return m1 + (m2 - m1) * (2 / 3 - h) * 6;
|
|
447
|
+
else
|
|
448
|
+
return m1;
|
|
449
|
+
}
|
|
450
|
+
|
|
451
|
+
var processStyleCache = {};
|
|
452
|
+
|
|
453
|
+
function processStyle(styleString) {
|
|
454
|
+
if (styleString in processStyleCache) {
|
|
455
|
+
return processStyleCache[styleString];
|
|
456
|
+
}
|
|
457
|
+
|
|
458
|
+
var str, alpha = 1;
|
|
459
|
+
|
|
460
|
+
styleString = String(styleString);
|
|
461
|
+
if (styleString.charAt(0) == '#') {
|
|
462
|
+
str = styleString;
|
|
463
|
+
} else if (/^rgb/.test(styleString)) {
|
|
464
|
+
var parts = getRgbHslContent(styleString);
|
|
465
|
+
var str = '#', n;
|
|
466
|
+
for (var i = 0; i < 3; i++) {
|
|
467
|
+
if (parts[i].indexOf('%') != -1) {
|
|
468
|
+
n = Math.floor(percent(parts[i]) * 255);
|
|
469
|
+
} else {
|
|
470
|
+
n = +parts[i];
|
|
471
|
+
}
|
|
472
|
+
str += decToHex[clamp(n, 0, 255)];
|
|
473
|
+
}
|
|
474
|
+
alpha = +parts[3];
|
|
475
|
+
} else if (/^hsl/.test(styleString)) {
|
|
476
|
+
var parts = getRgbHslContent(styleString);
|
|
477
|
+
str = hslToRgb(parts);
|
|
478
|
+
alpha = parts[3];
|
|
479
|
+
} else {
|
|
480
|
+
str = colorData[styleString] || styleString;
|
|
481
|
+
}
|
|
482
|
+
return processStyleCache[styleString] = {color: str, alpha: alpha};
|
|
483
|
+
}
|
|
484
|
+
|
|
485
|
+
var DEFAULT_STYLE = {
|
|
486
|
+
style: 'normal',
|
|
487
|
+
variant: 'normal',
|
|
488
|
+
weight: 'normal',
|
|
489
|
+
size: 10,
|
|
490
|
+
family: 'sans-serif'
|
|
491
|
+
};
|
|
492
|
+
|
|
493
|
+
// Internal text style cache
|
|
494
|
+
var fontStyleCache = {};
|
|
495
|
+
|
|
496
|
+
function processFontStyle(styleString) {
|
|
497
|
+
if (fontStyleCache[styleString]) {
|
|
498
|
+
return fontStyleCache[styleString];
|
|
499
|
+
}
|
|
500
|
+
|
|
501
|
+
var el = document.createElement('div');
|
|
502
|
+
var style = el.style;
|
|
503
|
+
try {
|
|
504
|
+
style.font = styleString;
|
|
505
|
+
} catch (ex) {
|
|
506
|
+
// Ignore failures to set to invalid font.
|
|
507
|
+
}
|
|
508
|
+
|
|
509
|
+
return fontStyleCache[styleString] = {
|
|
510
|
+
style: style.fontStyle || DEFAULT_STYLE.style,
|
|
511
|
+
variant: style.fontVariant || DEFAULT_STYLE.variant,
|
|
512
|
+
weight: style.fontWeight || DEFAULT_STYLE.weight,
|
|
513
|
+
size: style.fontSize || DEFAULT_STYLE.size,
|
|
514
|
+
family: style.fontFamily || DEFAULT_STYLE.family
|
|
515
|
+
};
|
|
516
|
+
}
|
|
517
|
+
|
|
518
|
+
function getComputedStyle(style, element) {
|
|
519
|
+
var computedStyle = {};
|
|
520
|
+
|
|
521
|
+
for (var p in style) {
|
|
522
|
+
computedStyle[p] = style[p];
|
|
523
|
+
}
|
|
524
|
+
|
|
525
|
+
// Compute the size
|
|
526
|
+
var canvasFontSize = parseFloat(element.currentStyle.fontSize),
|
|
527
|
+
fontSize = parseFloat(style.size);
|
|
528
|
+
|
|
529
|
+
if (typeof style.size == 'number') {
|
|
530
|
+
computedStyle.size = style.size;
|
|
531
|
+
} else if (style.size.indexOf('px') != -1) {
|
|
532
|
+
computedStyle.size = fontSize;
|
|
533
|
+
} else if (style.size.indexOf('em') != -1) {
|
|
534
|
+
computedStyle.size = canvasFontSize * fontSize;
|
|
535
|
+
} else if(style.size.indexOf('%') != -1) {
|
|
536
|
+
computedStyle.size = (canvasFontSize / 100) * fontSize;
|
|
537
|
+
} else if (style.size.indexOf('pt') != -1) {
|
|
538
|
+
computedStyle.size = fontSize / .75;
|
|
539
|
+
} else {
|
|
540
|
+
computedStyle.size = canvasFontSize;
|
|
541
|
+
}
|
|
542
|
+
|
|
543
|
+
// Different scaling between normal text and VML text. This was found using
|
|
544
|
+
// trial and error to get the same size as non VML text.
|
|
545
|
+
computedStyle.size *= 0.981;
|
|
546
|
+
|
|
547
|
+
return computedStyle;
|
|
548
|
+
}
|
|
549
|
+
|
|
550
|
+
function buildStyle(style) {
|
|
551
|
+
return style.style + ' ' + style.variant + ' ' + style.weight + ' ' +
|
|
552
|
+
style.size + 'px ' + style.family;
|
|
553
|
+
}
|
|
554
|
+
|
|
555
|
+
var lineCapMap = {
|
|
556
|
+
'butt': 'flat',
|
|
557
|
+
'round': 'round'
|
|
558
|
+
};
|
|
559
|
+
|
|
560
|
+
function processLineCap(lineCap) {
|
|
561
|
+
return lineCapMap[lineCap] || 'square';
|
|
562
|
+
}
|
|
563
|
+
|
|
564
|
+
/**
|
|
565
|
+
* This class implements CanvasRenderingContext2D interface as described by
|
|
566
|
+
* the WHATWG.
|
|
567
|
+
* @param {HTMLElement} canvasElement The element that the 2D context should
|
|
568
|
+
* be associated with
|
|
569
|
+
*/
|
|
570
|
+
function CanvasRenderingContext2D_(canvasElement) {
|
|
571
|
+
this.m_ = createMatrixIdentity();
|
|
572
|
+
|
|
573
|
+
this.mStack_ = [];
|
|
574
|
+
this.aStack_ = [];
|
|
575
|
+
this.currentPath_ = [];
|
|
576
|
+
|
|
577
|
+
// Canvas context properties
|
|
578
|
+
this.strokeStyle = '#000';
|
|
579
|
+
this.fillStyle = '#000';
|
|
580
|
+
|
|
581
|
+
this.lineWidth = 1;
|
|
582
|
+
this.lineJoin = 'miter';
|
|
583
|
+
this.lineCap = 'butt';
|
|
584
|
+
this.miterLimit = Z * 1;
|
|
585
|
+
this.globalAlpha = 1;
|
|
586
|
+
this.font = '10px sans-serif';
|
|
587
|
+
this.textAlign = 'left';
|
|
588
|
+
this.textBaseline = 'alphabetic';
|
|
589
|
+
this.canvas = canvasElement;
|
|
590
|
+
|
|
591
|
+
var cssText = 'width:' + canvasElement.clientWidth + 'px;height:' +
|
|
592
|
+
canvasElement.clientHeight + 'px;overflow:hidden;position:absolute';
|
|
593
|
+
var el = canvasElement.ownerDocument.createElement('div');
|
|
594
|
+
el.style.cssText = cssText;
|
|
595
|
+
canvasElement.appendChild(el);
|
|
596
|
+
|
|
597
|
+
var overlayEl = el.cloneNode(false);
|
|
598
|
+
// Use a non transparent background.
|
|
599
|
+
overlayEl.style.backgroundColor = 'red';
|
|
600
|
+
overlayEl.style.filter = 'alpha(opacity=0)';
|
|
601
|
+
canvasElement.appendChild(overlayEl);
|
|
602
|
+
|
|
603
|
+
this.element_ = el;
|
|
604
|
+
this.arcScaleX_ = 1;
|
|
605
|
+
this.arcScaleY_ = 1;
|
|
606
|
+
this.lineScale_ = 1;
|
|
607
|
+
}
|
|
608
|
+
|
|
609
|
+
var contextPrototype = CanvasRenderingContext2D_.prototype;
|
|
610
|
+
contextPrototype.clearRect = function() {
|
|
611
|
+
if (this.textMeasureEl_) {
|
|
612
|
+
this.textMeasureEl_.removeNode(true);
|
|
613
|
+
this.textMeasureEl_ = null;
|
|
614
|
+
}
|
|
615
|
+
this.element_.innerHTML = '';
|
|
616
|
+
};
|
|
617
|
+
|
|
618
|
+
contextPrototype.beginPath = function() {
|
|
619
|
+
// TODO: Branch current matrix so that save/restore has no effect
|
|
620
|
+
// as per safari docs.
|
|
621
|
+
this.currentPath_ = [];
|
|
622
|
+
};
|
|
623
|
+
|
|
624
|
+
contextPrototype.moveTo = function(aX, aY) {
|
|
625
|
+
var p = getCoords(this, aX, aY);
|
|
626
|
+
this.currentPath_.push({type: 'moveTo', x: p.x, y: p.y});
|
|
627
|
+
this.currentX_ = p.x;
|
|
628
|
+
this.currentY_ = p.y;
|
|
629
|
+
};
|
|
630
|
+
|
|
631
|
+
contextPrototype.lineTo = function(aX, aY) {
|
|
632
|
+
var p = getCoords(this, aX, aY);
|
|
633
|
+
this.currentPath_.push({type: 'lineTo', x: p.x, y: p.y});
|
|
634
|
+
|
|
635
|
+
this.currentX_ = p.x;
|
|
636
|
+
this.currentY_ = p.y;
|
|
637
|
+
};
|
|
638
|
+
|
|
639
|
+
contextPrototype.bezierCurveTo = function(aCP1x, aCP1y,
|
|
640
|
+
aCP2x, aCP2y,
|
|
641
|
+
aX, aY) {
|
|
642
|
+
var p = getCoords(this, aX, aY);
|
|
643
|
+
var cp1 = getCoords(this, aCP1x, aCP1y);
|
|
644
|
+
var cp2 = getCoords(this, aCP2x, aCP2y);
|
|
645
|
+
bezierCurveTo(this, cp1, cp2, p);
|
|
646
|
+
};
|
|
647
|
+
|
|
648
|
+
// Helper function that takes the already fixed cordinates.
|
|
649
|
+
function bezierCurveTo(self, cp1, cp2, p) {
|
|
650
|
+
self.currentPath_.push({
|
|
651
|
+
type: 'bezierCurveTo',
|
|
652
|
+
cp1x: cp1.x,
|
|
653
|
+
cp1y: cp1.y,
|
|
654
|
+
cp2x: cp2.x,
|
|
655
|
+
cp2y: cp2.y,
|
|
656
|
+
x: p.x,
|
|
657
|
+
y: p.y
|
|
658
|
+
});
|
|
659
|
+
self.currentX_ = p.x;
|
|
660
|
+
self.currentY_ = p.y;
|
|
661
|
+
}
|
|
662
|
+
|
|
663
|
+
contextPrototype.quadraticCurveTo = function(aCPx, aCPy, aX, aY) {
|
|
664
|
+
// the following is lifted almost directly from
|
|
665
|
+
// http://developer.mozilla.org/en/docs/Canvas_tutorial:Drawing_shapes
|
|
666
|
+
|
|
667
|
+
var cp = getCoords(this, aCPx, aCPy);
|
|
668
|
+
var p = getCoords(this, aX, aY);
|
|
669
|
+
|
|
670
|
+
var cp1 = {
|
|
671
|
+
x: this.currentX_ + 2.0 / 3.0 * (cp.x - this.currentX_),
|
|
672
|
+
y: this.currentY_ + 2.0 / 3.0 * (cp.y - this.currentY_)
|
|
673
|
+
};
|
|
674
|
+
var cp2 = {
|
|
675
|
+
x: cp1.x + (p.x - this.currentX_) / 3.0,
|
|
676
|
+
y: cp1.y + (p.y - this.currentY_) / 3.0
|
|
677
|
+
};
|
|
678
|
+
|
|
679
|
+
bezierCurveTo(this, cp1, cp2, p);
|
|
680
|
+
};
|
|
681
|
+
|
|
682
|
+
contextPrototype.arc = function(aX, aY, aRadius,
|
|
683
|
+
aStartAngle, aEndAngle, aClockwise) {
|
|
684
|
+
aRadius *= Z;
|
|
685
|
+
var arcType = aClockwise ? 'at' : 'wa';
|
|
686
|
+
|
|
687
|
+
var xStart = aX + mc(aStartAngle) * aRadius - Z2;
|
|
688
|
+
var yStart = aY + ms(aStartAngle) * aRadius - Z2;
|
|
689
|
+
|
|
690
|
+
var xEnd = aX + mc(aEndAngle) * aRadius - Z2;
|
|
691
|
+
var yEnd = aY + ms(aEndAngle) * aRadius - Z2;
|
|
692
|
+
|
|
693
|
+
// IE won't render arches drawn counter clockwise if xStart == xEnd.
|
|
694
|
+
if (xStart == xEnd && !aClockwise) {
|
|
695
|
+
xStart += 0.125; // Offset xStart by 1/80 of a pixel. Use something
|
|
696
|
+
// that can be represented in binary
|
|
697
|
+
}
|
|
698
|
+
|
|
699
|
+
var p = getCoords(this, aX, aY);
|
|
700
|
+
var pStart = getCoords(this, xStart, yStart);
|
|
701
|
+
var pEnd = getCoords(this, xEnd, yEnd);
|
|
702
|
+
|
|
703
|
+
this.currentPath_.push({type: arcType,
|
|
704
|
+
x: p.x,
|
|
705
|
+
y: p.y,
|
|
706
|
+
radius: aRadius,
|
|
707
|
+
xStart: pStart.x,
|
|
708
|
+
yStart: pStart.y,
|
|
709
|
+
xEnd: pEnd.x,
|
|
710
|
+
yEnd: pEnd.y});
|
|
711
|
+
|
|
712
|
+
};
|
|
713
|
+
|
|
714
|
+
contextPrototype.rect = function(aX, aY, aWidth, aHeight) {
|
|
715
|
+
this.moveTo(aX, aY);
|
|
716
|
+
this.lineTo(aX + aWidth, aY);
|
|
717
|
+
this.lineTo(aX + aWidth, aY + aHeight);
|
|
718
|
+
this.lineTo(aX, aY + aHeight);
|
|
719
|
+
this.closePath();
|
|
720
|
+
};
|
|
721
|
+
|
|
722
|
+
contextPrototype.strokeRect = function(aX, aY, aWidth, aHeight) {
|
|
723
|
+
var oldPath = this.currentPath_;
|
|
724
|
+
this.beginPath();
|
|
725
|
+
|
|
726
|
+
this.moveTo(aX, aY);
|
|
727
|
+
this.lineTo(aX + aWidth, aY);
|
|
728
|
+
this.lineTo(aX + aWidth, aY + aHeight);
|
|
729
|
+
this.lineTo(aX, aY + aHeight);
|
|
730
|
+
this.closePath();
|
|
731
|
+
this.stroke();
|
|
732
|
+
|
|
733
|
+
this.currentPath_ = oldPath;
|
|
734
|
+
};
|
|
735
|
+
|
|
736
|
+
contextPrototype.fillRect = function(aX, aY, aWidth, aHeight) {
|
|
737
|
+
var oldPath = this.currentPath_;
|
|
738
|
+
this.beginPath();
|
|
739
|
+
|
|
740
|
+
this.moveTo(aX, aY);
|
|
741
|
+
this.lineTo(aX + aWidth, aY);
|
|
742
|
+
this.lineTo(aX + aWidth, aY + aHeight);
|
|
743
|
+
this.lineTo(aX, aY + aHeight);
|
|
744
|
+
this.closePath();
|
|
745
|
+
this.fill();
|
|
746
|
+
|
|
747
|
+
this.currentPath_ = oldPath;
|
|
748
|
+
};
|
|
749
|
+
|
|
750
|
+
contextPrototype.createLinearGradient = function(aX0, aY0, aX1, aY1) {
|
|
751
|
+
var gradient = new CanvasGradient_('gradient');
|
|
752
|
+
gradient.x0_ = aX0;
|
|
753
|
+
gradient.y0_ = aY0;
|
|
754
|
+
gradient.x1_ = aX1;
|
|
755
|
+
gradient.y1_ = aY1;
|
|
756
|
+
return gradient;
|
|
757
|
+
};
|
|
758
|
+
|
|
759
|
+
contextPrototype.createRadialGradient = function(aX0, aY0, aR0,
|
|
760
|
+
aX1, aY1, aR1) {
|
|
761
|
+
var gradient = new CanvasGradient_('gradientradial');
|
|
762
|
+
gradient.x0_ = aX0;
|
|
763
|
+
gradient.y0_ = aY0;
|
|
764
|
+
gradient.r0_ = aR0;
|
|
765
|
+
gradient.x1_ = aX1;
|
|
766
|
+
gradient.y1_ = aY1;
|
|
767
|
+
gradient.r1_ = aR1;
|
|
768
|
+
return gradient;
|
|
769
|
+
};
|
|
770
|
+
|
|
771
|
+
contextPrototype.drawImage = function(image, var_args) {
|
|
772
|
+
var dx, dy, dw, dh, sx, sy, sw, sh;
|
|
773
|
+
|
|
774
|
+
// to find the original width we overide the width and height
|
|
775
|
+
var oldRuntimeWidth = image.runtimeStyle.width;
|
|
776
|
+
var oldRuntimeHeight = image.runtimeStyle.height;
|
|
777
|
+
image.runtimeStyle.width = 'auto';
|
|
778
|
+
image.runtimeStyle.height = 'auto';
|
|
779
|
+
|
|
780
|
+
// get the original size
|
|
781
|
+
var w = image.width;
|
|
782
|
+
var h = image.height;
|
|
783
|
+
|
|
784
|
+
// and remove overides
|
|
785
|
+
image.runtimeStyle.width = oldRuntimeWidth;
|
|
786
|
+
image.runtimeStyle.height = oldRuntimeHeight;
|
|
787
|
+
|
|
788
|
+
if (arguments.length == 3) {
|
|
789
|
+
dx = arguments[1];
|
|
790
|
+
dy = arguments[2];
|
|
791
|
+
sx = sy = 0;
|
|
792
|
+
sw = dw = w;
|
|
793
|
+
sh = dh = h;
|
|
794
|
+
} else if (arguments.length == 5) {
|
|
795
|
+
dx = arguments[1];
|
|
796
|
+
dy = arguments[2];
|
|
797
|
+
dw = arguments[3];
|
|
798
|
+
dh = arguments[4];
|
|
799
|
+
sx = sy = 0;
|
|
800
|
+
sw = w;
|
|
801
|
+
sh = h;
|
|
802
|
+
} else if (arguments.length == 9) {
|
|
803
|
+
sx = arguments[1];
|
|
804
|
+
sy = arguments[2];
|
|
805
|
+
sw = arguments[3];
|
|
806
|
+
sh = arguments[4];
|
|
807
|
+
dx = arguments[5];
|
|
808
|
+
dy = arguments[6];
|
|
809
|
+
dw = arguments[7];
|
|
810
|
+
dh = arguments[8];
|
|
811
|
+
} else {
|
|
812
|
+
throw Error('Invalid number of arguments');
|
|
813
|
+
}
|
|
814
|
+
|
|
815
|
+
var d = getCoords(this, dx, dy);
|
|
816
|
+
|
|
817
|
+
var w2 = sw / 2;
|
|
818
|
+
var h2 = sh / 2;
|
|
819
|
+
|
|
820
|
+
var vmlStr = [];
|
|
821
|
+
|
|
822
|
+
var W = 10;
|
|
823
|
+
var H = 10;
|
|
824
|
+
|
|
825
|
+
// For some reason that I've now forgotten, using divs didn't work
|
|
826
|
+
vmlStr.push(' <g_vml_:group',
|
|
827
|
+
' coordsize="', Z * W, ',', Z * H, '"',
|
|
828
|
+
' coordorigin="0,0"' ,
|
|
829
|
+
' style="width:', W, 'px;height:', H, 'px;position:absolute;');
|
|
830
|
+
|
|
831
|
+
// If filters are necessary (rotation exists), create them
|
|
832
|
+
// filters are bog-slow, so only create them if abbsolutely necessary
|
|
833
|
+
// The following check doesn't account for skews (which don't exist
|
|
834
|
+
// in the canvas spec (yet) anyway.
|
|
835
|
+
|
|
836
|
+
if (this.m_[0][0] != 1 || this.m_[0][1] ||
|
|
837
|
+
this.m_[1][1] != 1 || this.m_[1][0]) {
|
|
838
|
+
var filter = [];
|
|
839
|
+
|
|
840
|
+
// Note the 12/21 reversal
|
|
841
|
+
filter.push('M11=', this.m_[0][0], ',',
|
|
842
|
+
'M12=', this.m_[1][0], ',',
|
|
843
|
+
'M21=', this.m_[0][1], ',',
|
|
844
|
+
'M22=', this.m_[1][1], ',',
|
|
845
|
+
'Dx=', mr(d.x / Z), ',',
|
|
846
|
+
'Dy=', mr(d.y / Z), '');
|
|
847
|
+
|
|
848
|
+
// Bounding box calculation (need to minimize displayed area so that
|
|
849
|
+
// filters don't waste time on unused pixels.
|
|
850
|
+
var max = d;
|
|
851
|
+
var c2 = getCoords(this, dx + dw, dy);
|
|
852
|
+
var c3 = getCoords(this, dx, dy + dh);
|
|
853
|
+
var c4 = getCoords(this, dx + dw, dy + dh);
|
|
854
|
+
|
|
855
|
+
max.x = m.max(max.x, c2.x, c3.x, c4.x);
|
|
856
|
+
max.y = m.max(max.y, c2.y, c3.y, c4.y);
|
|
857
|
+
|
|
858
|
+
vmlStr.push('padding:0 ', mr(max.x / Z), 'px ', mr(max.y / Z),
|
|
859
|
+
'px 0;filter:progid:DXImageTransform.Microsoft.Matrix(',
|
|
860
|
+
filter.join(''), ", sizingmethod='clip');");
|
|
861
|
+
|
|
862
|
+
} else {
|
|
863
|
+
vmlStr.push('top:', mr(d.y / Z), 'px;left:', mr(d.x / Z), 'px;');
|
|
864
|
+
}
|
|
865
|
+
|
|
866
|
+
vmlStr.push(' ">' ,
|
|
867
|
+
'<g_vml_:image src="', image.src, '"',
|
|
868
|
+
' style="width:', Z * dw, 'px;',
|
|
869
|
+
' height:', Z * dh, 'px"',
|
|
870
|
+
' cropleft="', sx / w, '"',
|
|
871
|
+
' croptop="', sy / h, '"',
|
|
872
|
+
' cropright="', (w - sx - sw) / w, '"',
|
|
873
|
+
' cropbottom="', (h - sy - sh) / h, '"',
|
|
874
|
+
' />',
|
|
875
|
+
'</g_vml_:group>');
|
|
876
|
+
|
|
877
|
+
this.element_.insertAdjacentHTML('BeforeEnd', vmlStr.join(''));
|
|
878
|
+
};
|
|
879
|
+
|
|
880
|
+
contextPrototype.stroke = function(aFill) {
|
|
881
|
+
var W = 10;
|
|
882
|
+
var H = 10;
|
|
883
|
+
// Divide the shape into chunks if it's too long because IE has a limit
|
|
884
|
+
// somewhere for how long a VML shape can be. This simple division does
|
|
885
|
+
// not work with fills, only strokes, unfortunately.
|
|
886
|
+
var chunkSize = 5000;
|
|
887
|
+
|
|
888
|
+
var min = {x: null, y: null};
|
|
889
|
+
var max = {x: null, y: null};
|
|
890
|
+
|
|
891
|
+
for (var j = 0; j < this.currentPath_.length; j += chunkSize) {
|
|
892
|
+
var lineStr = [];
|
|
893
|
+
var lineOpen = false;
|
|
894
|
+
|
|
895
|
+
lineStr.push('<g_vml_:shape',
|
|
896
|
+
' filled="', !!aFill, '"',
|
|
897
|
+
' style="position:absolute;width:', W, 'px;height:', H, 'px;"',
|
|
898
|
+
' coordorigin="0,0"',
|
|
899
|
+
' coordsize="', Z * W, ',', Z * H, '"',
|
|
900
|
+
' stroked="', !aFill, '"',
|
|
901
|
+
' path="');
|
|
902
|
+
|
|
903
|
+
var newSeq = false;
|
|
904
|
+
|
|
905
|
+
for (var i = j; i < Math.min(j + chunkSize, this.currentPath_.length); i++) {
|
|
906
|
+
if (i % chunkSize == 0 && i > 0) { // move into position for next chunk
|
|
907
|
+
lineStr.push(' m ', mr(this.currentPath_[i-1].x), ',', mr(this.currentPath_[i-1].y));
|
|
908
|
+
}
|
|
909
|
+
|
|
910
|
+
var p = this.currentPath_[i];
|
|
911
|
+
var c;
|
|
912
|
+
|
|
913
|
+
switch (p.type) {
|
|
914
|
+
case 'moveTo':
|
|
915
|
+
c = p;
|
|
916
|
+
lineStr.push(' m ', mr(p.x), ',', mr(p.y));
|
|
917
|
+
break;
|
|
918
|
+
case 'lineTo':
|
|
919
|
+
lineStr.push(' l ', mr(p.x), ',', mr(p.y));
|
|
920
|
+
break;
|
|
921
|
+
case 'close':
|
|
922
|
+
lineStr.push(' x ');
|
|
923
|
+
p = null;
|
|
924
|
+
break;
|
|
925
|
+
case 'bezierCurveTo':
|
|
926
|
+
lineStr.push(' c ',
|
|
927
|
+
mr(p.cp1x), ',', mr(p.cp1y), ',',
|
|
928
|
+
mr(p.cp2x), ',', mr(p.cp2y), ',',
|
|
929
|
+
mr(p.x), ',', mr(p.y));
|
|
930
|
+
break;
|
|
931
|
+
case 'at':
|
|
932
|
+
case 'wa':
|
|
933
|
+
lineStr.push(' ', p.type, ' ',
|
|
934
|
+
mr(p.x - this.arcScaleX_ * p.radius), ',',
|
|
935
|
+
mr(p.y - this.arcScaleY_ * p.radius), ' ',
|
|
936
|
+
mr(p.x + this.arcScaleX_ * p.radius), ',',
|
|
937
|
+
mr(p.y + this.arcScaleY_ * p.radius), ' ',
|
|
938
|
+
mr(p.xStart), ',', mr(p.yStart), ' ',
|
|
939
|
+
mr(p.xEnd), ',', mr(p.yEnd));
|
|
940
|
+
break;
|
|
941
|
+
}
|
|
942
|
+
|
|
943
|
+
|
|
944
|
+
// TODO: Following is broken for curves due to
|
|
945
|
+
// move to proper paths.
|
|
946
|
+
|
|
947
|
+
// Figure out dimensions so we can do gradient fills
|
|
948
|
+
// properly
|
|
949
|
+
if (p) {
|
|
950
|
+
if (min.x == null || p.x < min.x) {
|
|
951
|
+
min.x = p.x;
|
|
952
|
+
}
|
|
953
|
+
if (max.x == null || p.x > max.x) {
|
|
954
|
+
max.x = p.x;
|
|
955
|
+
}
|
|
956
|
+
if (min.y == null || p.y < min.y) {
|
|
957
|
+
min.y = p.y;
|
|
958
|
+
}
|
|
959
|
+
if (max.y == null || p.y > max.y) {
|
|
960
|
+
max.y = p.y;
|
|
961
|
+
}
|
|
962
|
+
}
|
|
963
|
+
}
|
|
964
|
+
lineStr.push(' ">');
|
|
965
|
+
|
|
966
|
+
if (!aFill) {
|
|
967
|
+
appendStroke(this, lineStr);
|
|
968
|
+
} else {
|
|
969
|
+
appendFill(this, lineStr, min, max);
|
|
970
|
+
}
|
|
971
|
+
|
|
972
|
+
lineStr.push('</g_vml_:shape>');
|
|
973
|
+
|
|
974
|
+
this.element_.insertAdjacentHTML('beforeEnd', lineStr.join(''));
|
|
975
|
+
}
|
|
976
|
+
};
|
|
977
|
+
|
|
978
|
+
function appendStroke(ctx, lineStr) {
|
|
979
|
+
var a = processStyle(ctx.strokeStyle);
|
|
980
|
+
var color = a.color;
|
|
981
|
+
var opacity = a.alpha * ctx.globalAlpha;
|
|
982
|
+
var lineWidth = ctx.lineScale_ * ctx.lineWidth;
|
|
983
|
+
|
|
984
|
+
// VML cannot correctly render a line if the width is less than 1px.
|
|
985
|
+
// In that case, we dilute the color to make the line look thinner.
|
|
986
|
+
if (lineWidth < 1) {
|
|
987
|
+
opacity *= lineWidth;
|
|
988
|
+
}
|
|
989
|
+
|
|
990
|
+
lineStr.push(
|
|
991
|
+
'<g_vml_:stroke',
|
|
992
|
+
' opacity="', opacity, '"',
|
|
993
|
+
' joinstyle="', ctx.lineJoin, '"',
|
|
994
|
+
' miterlimit="', ctx.miterLimit, '"',
|
|
995
|
+
' endcap="', processLineCap(ctx.lineCap), '"',
|
|
996
|
+
' weight="', lineWidth, 'px"',
|
|
997
|
+
' color="', color, '" />'
|
|
998
|
+
);
|
|
999
|
+
}
|
|
1000
|
+
|
|
1001
|
+
function appendFill(ctx, lineStr, min, max) {
|
|
1002
|
+
var fillStyle = ctx.fillStyle;
|
|
1003
|
+
var arcScaleX = ctx.arcScaleX_;
|
|
1004
|
+
var arcScaleY = ctx.arcScaleY_;
|
|
1005
|
+
var width = max.x - min.x;
|
|
1006
|
+
var height = max.y - min.y;
|
|
1007
|
+
if (fillStyle instanceof CanvasGradient_) {
|
|
1008
|
+
// TODO: Gradients transformed with the transformation matrix.
|
|
1009
|
+
var angle = 0;
|
|
1010
|
+
var focus = {x: 0, y: 0};
|
|
1011
|
+
|
|
1012
|
+
// additional offset
|
|
1013
|
+
var shift = 0;
|
|
1014
|
+
// scale factor for offset
|
|
1015
|
+
var expansion = 1;
|
|
1016
|
+
|
|
1017
|
+
if (fillStyle.type_ == 'gradient') {
|
|
1018
|
+
var x0 = fillStyle.x0_ / arcScaleX;
|
|
1019
|
+
var y0 = fillStyle.y0_ / arcScaleY;
|
|
1020
|
+
var x1 = fillStyle.x1_ / arcScaleX;
|
|
1021
|
+
var y1 = fillStyle.y1_ / arcScaleY;
|
|
1022
|
+
var p0 = getCoords(ctx, x0, y0);
|
|
1023
|
+
var p1 = getCoords(ctx, x1, y1);
|
|
1024
|
+
var dx = p1.x - p0.x;
|
|
1025
|
+
var dy = p1.y - p0.y;
|
|
1026
|
+
angle = Math.atan2(dx, dy) * 180 / Math.PI;
|
|
1027
|
+
|
|
1028
|
+
// The angle should be a non-negative number.
|
|
1029
|
+
if (angle < 0) {
|
|
1030
|
+
angle += 360;
|
|
1031
|
+
}
|
|
1032
|
+
|
|
1033
|
+
// Very small angles produce an unexpected result because they are
|
|
1034
|
+
// converted to a scientific notation string.
|
|
1035
|
+
if (angle < 1e-6) {
|
|
1036
|
+
angle = 0;
|
|
1037
|
+
}
|
|
1038
|
+
} else {
|
|
1039
|
+
var p0 = getCoords(ctx, fillStyle.x0_, fillStyle.y0_);
|
|
1040
|
+
focus = {
|
|
1041
|
+
x: (p0.x - min.x) / width,
|
|
1042
|
+
y: (p0.y - min.y) / height
|
|
1043
|
+
};
|
|
1044
|
+
|
|
1045
|
+
width /= arcScaleX * Z;
|
|
1046
|
+
height /= arcScaleY * Z;
|
|
1047
|
+
var dimension = m.max(width, height);
|
|
1048
|
+
shift = 2 * fillStyle.r0_ / dimension;
|
|
1049
|
+
expansion = 2 * fillStyle.r1_ / dimension - shift;
|
|
1050
|
+
}
|
|
1051
|
+
|
|
1052
|
+
// We need to sort the color stops in ascending order by offset,
|
|
1053
|
+
// otherwise IE won't interpret it correctly.
|
|
1054
|
+
var stops = fillStyle.colors_;
|
|
1055
|
+
stops.sort(function(cs1, cs2) {
|
|
1056
|
+
return cs1.offset - cs2.offset;
|
|
1057
|
+
});
|
|
1058
|
+
|
|
1059
|
+
var length = stops.length;
|
|
1060
|
+
var color1 = stops[0].color;
|
|
1061
|
+
var color2 = stops[length - 1].color;
|
|
1062
|
+
var opacity1 = stops[0].alpha * ctx.globalAlpha;
|
|
1063
|
+
var opacity2 = stops[length - 1].alpha * ctx.globalAlpha;
|
|
1064
|
+
|
|
1065
|
+
var colors = [];
|
|
1066
|
+
for (var i = 0; i < length; i++) {
|
|
1067
|
+
var stop = stops[i];
|
|
1068
|
+
colors.push(stop.offset * expansion + shift + ' ' + stop.color);
|
|
1069
|
+
}
|
|
1070
|
+
|
|
1071
|
+
// When colors attribute is used, the meanings of opacity and o:opacity2
|
|
1072
|
+
// are reversed.
|
|
1073
|
+
lineStr.push('<g_vml_:fill type="', fillStyle.type_, '"',
|
|
1074
|
+
' method="none" focus="100%"',
|
|
1075
|
+
' color="', color1, '"',
|
|
1076
|
+
' color2="', color2, '"',
|
|
1077
|
+
' colors="', colors.join(','), '"',
|
|
1078
|
+
' opacity="', opacity2, '"',
|
|
1079
|
+
' g_o_:opacity2="', opacity1, '"',
|
|
1080
|
+
' angle="', angle, '"',
|
|
1081
|
+
' focusposition="', focus.x, ',', focus.y, '" />');
|
|
1082
|
+
} else if (fillStyle instanceof CanvasPattern_) {
|
|
1083
|
+
if (width && height) {
|
|
1084
|
+
var deltaLeft = -min.x;
|
|
1085
|
+
var deltaTop = -min.y;
|
|
1086
|
+
lineStr.push('<g_vml_:fill',
|
|
1087
|
+
' position="',
|
|
1088
|
+
deltaLeft / width * arcScaleX * arcScaleX, ',',
|
|
1089
|
+
deltaTop / height * arcScaleY * arcScaleY, '"',
|
|
1090
|
+
' type="tile"',
|
|
1091
|
+
// TODO: Figure out the correct size to fit the scale.
|
|
1092
|
+
//' size="', w, 'px ', h, 'px"',
|
|
1093
|
+
' src="', fillStyle.src_, '" />');
|
|
1094
|
+
}
|
|
1095
|
+
} else {
|
|
1096
|
+
var a = processStyle(ctx.fillStyle);
|
|
1097
|
+
var color = a.color;
|
|
1098
|
+
var opacity = a.alpha * ctx.globalAlpha;
|
|
1099
|
+
lineStr.push('<g_vml_:fill color="', color, '" opacity="', opacity,
|
|
1100
|
+
'" />');
|
|
1101
|
+
}
|
|
1102
|
+
}
|
|
1103
|
+
|
|
1104
|
+
contextPrototype.fill = function() {
|
|
1105
|
+
this.stroke(true);
|
|
1106
|
+
};
|
|
1107
|
+
|
|
1108
|
+
contextPrototype.closePath = function() {
|
|
1109
|
+
this.currentPath_.push({type: 'close'});
|
|
1110
|
+
};
|
|
1111
|
+
|
|
1112
|
+
function getCoords(ctx, aX, aY) {
|
|
1113
|
+
var m = ctx.m_;
|
|
1114
|
+
return {
|
|
1115
|
+
x: Z * (aX * m[0][0] + aY * m[1][0] + m[2][0]) - Z2,
|
|
1116
|
+
y: Z * (aX * m[0][1] + aY * m[1][1] + m[2][1]) - Z2
|
|
1117
|
+
};
|
|
1118
|
+
};
|
|
1119
|
+
|
|
1120
|
+
contextPrototype.save = function() {
|
|
1121
|
+
var o = {};
|
|
1122
|
+
copyState(this, o);
|
|
1123
|
+
this.aStack_.push(o);
|
|
1124
|
+
this.mStack_.push(this.m_);
|
|
1125
|
+
this.m_ = matrixMultiply(createMatrixIdentity(), this.m_);
|
|
1126
|
+
};
|
|
1127
|
+
|
|
1128
|
+
contextPrototype.restore = function() {
|
|
1129
|
+
if (this.aStack_.length) {
|
|
1130
|
+
copyState(this.aStack_.pop(), this);
|
|
1131
|
+
this.m_ = this.mStack_.pop();
|
|
1132
|
+
}
|
|
1133
|
+
};
|
|
1134
|
+
|
|
1135
|
+
function matrixIsFinite(m) {
|
|
1136
|
+
return isFinite(m[0][0]) && isFinite(m[0][1]) &&
|
|
1137
|
+
isFinite(m[1][0]) && isFinite(m[1][1]) &&
|
|
1138
|
+
isFinite(m[2][0]) && isFinite(m[2][1]);
|
|
1139
|
+
}
|
|
1140
|
+
|
|
1141
|
+
function setM(ctx, m, updateLineScale) {
|
|
1142
|
+
if (!matrixIsFinite(m)) {
|
|
1143
|
+
return;
|
|
1144
|
+
}
|
|
1145
|
+
ctx.m_ = m;
|
|
1146
|
+
|
|
1147
|
+
if (updateLineScale) {
|
|
1148
|
+
// Get the line scale.
|
|
1149
|
+
// Determinant of this.m_ means how much the area is enlarged by the
|
|
1150
|
+
// transformation. So its square root can be used as a scale factor
|
|
1151
|
+
// for width.
|
|
1152
|
+
var det = m[0][0] * m[1][1] - m[0][1] * m[1][0];
|
|
1153
|
+
ctx.lineScale_ = sqrt(abs(det));
|
|
1154
|
+
}
|
|
1155
|
+
}
|
|
1156
|
+
|
|
1157
|
+
contextPrototype.translate = function(aX, aY) {
|
|
1158
|
+
var m1 = [
|
|
1159
|
+
[1, 0, 0],
|
|
1160
|
+
[0, 1, 0],
|
|
1161
|
+
[aX, aY, 1]
|
|
1162
|
+
];
|
|
1163
|
+
|
|
1164
|
+
setM(this, matrixMultiply(m1, this.m_), false);
|
|
1165
|
+
};
|
|
1166
|
+
|
|
1167
|
+
contextPrototype.rotate = function(aRot) {
|
|
1168
|
+
var c = mc(aRot);
|
|
1169
|
+
var s = ms(aRot);
|
|
1170
|
+
|
|
1171
|
+
var m1 = [
|
|
1172
|
+
[c, s, 0],
|
|
1173
|
+
[-s, c, 0],
|
|
1174
|
+
[0, 0, 1]
|
|
1175
|
+
];
|
|
1176
|
+
|
|
1177
|
+
setM(this, matrixMultiply(m1, this.m_), false);
|
|
1178
|
+
};
|
|
1179
|
+
|
|
1180
|
+
contextPrototype.scale = function(aX, aY) {
|
|
1181
|
+
this.arcScaleX_ *= aX;
|
|
1182
|
+
this.arcScaleY_ *= aY;
|
|
1183
|
+
var m1 = [
|
|
1184
|
+
[aX, 0, 0],
|
|
1185
|
+
[0, aY, 0],
|
|
1186
|
+
[0, 0, 1]
|
|
1187
|
+
];
|
|
1188
|
+
|
|
1189
|
+
setM(this, matrixMultiply(m1, this.m_), true);
|
|
1190
|
+
};
|
|
1191
|
+
|
|
1192
|
+
contextPrototype.transform = function(m11, m12, m21, m22, dx, dy) {
|
|
1193
|
+
var m1 = [
|
|
1194
|
+
[m11, m12, 0],
|
|
1195
|
+
[m21, m22, 0],
|
|
1196
|
+
[dx, dy, 1]
|
|
1197
|
+
];
|
|
1198
|
+
|
|
1199
|
+
setM(this, matrixMultiply(m1, this.m_), true);
|
|
1200
|
+
};
|
|
1201
|
+
|
|
1202
|
+
contextPrototype.setTransform = function(m11, m12, m21, m22, dx, dy) {
|
|
1203
|
+
var m = [
|
|
1204
|
+
[m11, m12, 0],
|
|
1205
|
+
[m21, m22, 0],
|
|
1206
|
+
[dx, dy, 1]
|
|
1207
|
+
];
|
|
1208
|
+
|
|
1209
|
+
setM(this, m, true);
|
|
1210
|
+
};
|
|
1211
|
+
|
|
1212
|
+
/**
|
|
1213
|
+
* The text drawing function.
|
|
1214
|
+
* The maxWidth argument isn't taken in account, since no browser supports
|
|
1215
|
+
* it yet.
|
|
1216
|
+
*/
|
|
1217
|
+
contextPrototype.drawText_ = function(text, x, y, maxWidth, stroke) {
|
|
1218
|
+
var m = this.m_,
|
|
1219
|
+
delta = 1000,
|
|
1220
|
+
left = 0,
|
|
1221
|
+
right = delta,
|
|
1222
|
+
offset = {x: 0, y: 0},
|
|
1223
|
+
lineStr = [];
|
|
1224
|
+
|
|
1225
|
+
var fontStyle = getComputedStyle(processFontStyle(this.font),
|
|
1226
|
+
this.element_);
|
|
1227
|
+
|
|
1228
|
+
var fontStyleString = buildStyle(fontStyle);
|
|
1229
|
+
|
|
1230
|
+
var elementStyle = this.element_.currentStyle;
|
|
1231
|
+
var textAlign = this.textAlign.toLowerCase();
|
|
1232
|
+
switch (textAlign) {
|
|
1233
|
+
case 'left':
|
|
1234
|
+
case 'center':
|
|
1235
|
+
case 'right':
|
|
1236
|
+
break;
|
|
1237
|
+
case 'end':
|
|
1238
|
+
textAlign = elementStyle.direction == 'ltr' ? 'right' : 'left';
|
|
1239
|
+
break;
|
|
1240
|
+
case 'start':
|
|
1241
|
+
textAlign = elementStyle.direction == 'rtl' ? 'right' : 'left';
|
|
1242
|
+
break;
|
|
1243
|
+
default:
|
|
1244
|
+
textAlign = 'left';
|
|
1245
|
+
}
|
|
1246
|
+
|
|
1247
|
+
// 1.75 is an arbitrary number, as there is no info about the text baseline
|
|
1248
|
+
switch (this.textBaseline) {
|
|
1249
|
+
case 'hanging':
|
|
1250
|
+
case 'top':
|
|
1251
|
+
offset.y = fontStyle.size / 1.75;
|
|
1252
|
+
break;
|
|
1253
|
+
case 'middle':
|
|
1254
|
+
break;
|
|
1255
|
+
default:
|
|
1256
|
+
case null:
|
|
1257
|
+
case 'alphabetic':
|
|
1258
|
+
case 'ideographic':
|
|
1259
|
+
case 'bottom':
|
|
1260
|
+
offset.y = -fontStyle.size / 2.25;
|
|
1261
|
+
break;
|
|
1262
|
+
}
|
|
1263
|
+
|
|
1264
|
+
switch(textAlign) {
|
|
1265
|
+
case 'right':
|
|
1266
|
+
left = delta;
|
|
1267
|
+
right = 0.05;
|
|
1268
|
+
break;
|
|
1269
|
+
case 'center':
|
|
1270
|
+
left = right = delta / 2;
|
|
1271
|
+
break;
|
|
1272
|
+
}
|
|
1273
|
+
|
|
1274
|
+
var d = getCoords(this, x + offset.x, y + offset.y);
|
|
1275
|
+
|
|
1276
|
+
lineStr.push('<g_vml_:line from="', -left ,' 0" to="', right ,' 0.05" ',
|
|
1277
|
+
' coordsize="100 100" coordorigin="0 0"',
|
|
1278
|
+
' filled="', !stroke, '" stroked="', !!stroke,
|
|
1279
|
+
'" style="position:absolute;width:1px;height:1px;">');
|
|
1280
|
+
|
|
1281
|
+
if (stroke) {
|
|
1282
|
+
appendStroke(this, lineStr);
|
|
1283
|
+
} else {
|
|
1284
|
+
// TODO: Fix the min and max params.
|
|
1285
|
+
appendFill(this, lineStr, {x: -left, y: 0},
|
|
1286
|
+
{x: right, y: fontStyle.size});
|
|
1287
|
+
}
|
|
1288
|
+
|
|
1289
|
+
var skewM = m[0][0].toFixed(3) + ',' + m[1][0].toFixed(3) + ',' +
|
|
1290
|
+
m[0][1].toFixed(3) + ',' + m[1][1].toFixed(3) + ',0,0';
|
|
1291
|
+
|
|
1292
|
+
var skewOffset = mr(d.x / Z) + ',' + mr(d.y / Z);
|
|
1293
|
+
|
|
1294
|
+
lineStr.push('<g_vml_:skew on="t" matrix="', skewM ,'" ',
|
|
1295
|
+
' offset="', skewOffset, '" origin="', left ,' 0" />',
|
|
1296
|
+
'<g_vml_:path textpathok="true" />',
|
|
1297
|
+
'<g_vml_:textpath on="true" string="',
|
|
1298
|
+
encodeHtmlAttribute(text),
|
|
1299
|
+
'" style="v-text-align:', textAlign,
|
|
1300
|
+
';font:', encodeHtmlAttribute(fontStyleString),
|
|
1301
|
+
'" /></g_vml_:line>');
|
|
1302
|
+
|
|
1303
|
+
this.element_.insertAdjacentHTML('beforeEnd', lineStr.join(''));
|
|
1304
|
+
};
|
|
1305
|
+
|
|
1306
|
+
contextPrototype.fillText = function(text, x, y, maxWidth) {
|
|
1307
|
+
this.drawText_(text, x, y, maxWidth, false);
|
|
1308
|
+
};
|
|
1309
|
+
|
|
1310
|
+
contextPrototype.strokeText = function(text, x, y, maxWidth) {
|
|
1311
|
+
this.drawText_(text, x, y, maxWidth, true);
|
|
1312
|
+
};
|
|
1313
|
+
|
|
1314
|
+
contextPrototype.measureText = function(text) {
|
|
1315
|
+
if (!this.textMeasureEl_) {
|
|
1316
|
+
var s = '<span style="position:absolute;' +
|
|
1317
|
+
'top:-20000px;left:0;padding:0;margin:0;border:none;' +
|
|
1318
|
+
'white-space:pre;"></span>';
|
|
1319
|
+
this.element_.insertAdjacentHTML('beforeEnd', s);
|
|
1320
|
+
this.textMeasureEl_ = this.element_.lastChild;
|
|
1321
|
+
}
|
|
1322
|
+
var doc = this.element_.ownerDocument;
|
|
1323
|
+
this.textMeasureEl_.innerHTML = '';
|
|
1324
|
+
this.textMeasureEl_.style.font = this.font;
|
|
1325
|
+
// Don't use innerHTML or innerText because they allow markup/whitespace.
|
|
1326
|
+
this.textMeasureEl_.appendChild(doc.createTextNode(text));
|
|
1327
|
+
return {width: this.textMeasureEl_.offsetWidth};
|
|
1328
|
+
};
|
|
1329
|
+
|
|
1330
|
+
/******** STUBS ********/
|
|
1331
|
+
contextPrototype.clip = function() {
|
|
1332
|
+
// TODO: Implement
|
|
1333
|
+
};
|
|
1334
|
+
|
|
1335
|
+
contextPrototype.arcTo = function() {
|
|
1336
|
+
// TODO: Implement
|
|
1337
|
+
};
|
|
1338
|
+
|
|
1339
|
+
contextPrototype.createPattern = function(image, repetition) {
|
|
1340
|
+
return new CanvasPattern_(image, repetition);
|
|
1341
|
+
};
|
|
1342
|
+
|
|
1343
|
+
// Gradient / Pattern Stubs
|
|
1344
|
+
function CanvasGradient_(aType) {
|
|
1345
|
+
this.type_ = aType;
|
|
1346
|
+
this.x0_ = 0;
|
|
1347
|
+
this.y0_ = 0;
|
|
1348
|
+
this.r0_ = 0;
|
|
1349
|
+
this.x1_ = 0;
|
|
1350
|
+
this.y1_ = 0;
|
|
1351
|
+
this.r1_ = 0;
|
|
1352
|
+
this.colors_ = [];
|
|
1353
|
+
}
|
|
1354
|
+
|
|
1355
|
+
CanvasGradient_.prototype.addColorStop = function(aOffset, aColor) {
|
|
1356
|
+
aColor = processStyle(aColor);
|
|
1357
|
+
this.colors_.push({offset: aOffset,
|
|
1358
|
+
color: aColor.color,
|
|
1359
|
+
alpha: aColor.alpha});
|
|
1360
|
+
};
|
|
1361
|
+
|
|
1362
|
+
function CanvasPattern_(image, repetition) {
|
|
1363
|
+
assertImageIsValid(image);
|
|
1364
|
+
switch (repetition) {
|
|
1365
|
+
case 'repeat':
|
|
1366
|
+
case null:
|
|
1367
|
+
case '':
|
|
1368
|
+
this.repetition_ = 'repeat';
|
|
1369
|
+
break
|
|
1370
|
+
case 'repeat-x':
|
|
1371
|
+
case 'repeat-y':
|
|
1372
|
+
case 'no-repeat':
|
|
1373
|
+
this.repetition_ = repetition;
|
|
1374
|
+
break;
|
|
1375
|
+
default:
|
|
1376
|
+
throwException('SYNTAX_ERR');
|
|
1377
|
+
}
|
|
1378
|
+
|
|
1379
|
+
this.src_ = image.src;
|
|
1380
|
+
this.width_ = image.width;
|
|
1381
|
+
this.height_ = image.height;
|
|
1382
|
+
}
|
|
1383
|
+
|
|
1384
|
+
function throwException(s) {
|
|
1385
|
+
throw new DOMException_(s);
|
|
1386
|
+
}
|
|
1387
|
+
|
|
1388
|
+
function assertImageIsValid(img) {
|
|
1389
|
+
if (!img || img.nodeType != 1 || img.tagName != 'IMG') {
|
|
1390
|
+
throwException('TYPE_MISMATCH_ERR');
|
|
1391
|
+
}
|
|
1392
|
+
if (img.readyState != 'complete') {
|
|
1393
|
+
throwException('INVALID_STATE_ERR');
|
|
1394
|
+
}
|
|
1395
|
+
}
|
|
1396
|
+
|
|
1397
|
+
function DOMException_(s) {
|
|
1398
|
+
this.code = this[s];
|
|
1399
|
+
this.message = s +': DOM Exception ' + this.code;
|
|
1400
|
+
}
|
|
1401
|
+
var p = DOMException_.prototype = new Error;
|
|
1402
|
+
p.INDEX_SIZE_ERR = 1;
|
|
1403
|
+
p.DOMSTRING_SIZE_ERR = 2;
|
|
1404
|
+
p.HIERARCHY_REQUEST_ERR = 3;
|
|
1405
|
+
p.WRONG_DOCUMENT_ERR = 4;
|
|
1406
|
+
p.INVALID_CHARACTER_ERR = 5;
|
|
1407
|
+
p.NO_DATA_ALLOWED_ERR = 6;
|
|
1408
|
+
p.NO_MODIFICATION_ALLOWED_ERR = 7;
|
|
1409
|
+
p.NOT_FOUND_ERR = 8;
|
|
1410
|
+
p.NOT_SUPPORTED_ERR = 9;
|
|
1411
|
+
p.INUSE_ATTRIBUTE_ERR = 10;
|
|
1412
|
+
p.INVALID_STATE_ERR = 11;
|
|
1413
|
+
p.SYNTAX_ERR = 12;
|
|
1414
|
+
p.INVALID_MODIFICATION_ERR = 13;
|
|
1415
|
+
p.NAMESPACE_ERR = 14;
|
|
1416
|
+
p.INVALID_ACCESS_ERR = 15;
|
|
1417
|
+
p.VALIDATION_ERR = 16;
|
|
1418
|
+
p.TYPE_MISMATCH_ERR = 17;
|
|
1419
|
+
|
|
1420
|
+
// set up externs
|
|
1421
|
+
G_vmlCanvasManager = G_vmlCanvasManager_;
|
|
1422
|
+
CanvasRenderingContext2D = CanvasRenderingContext2D_;
|
|
1423
|
+
CanvasGradient = CanvasGradient_;
|
|
1424
|
+
CanvasPattern = CanvasPattern_;
|
|
1425
|
+
DOMException = DOMException_;
|
|
1426
|
+
})();
|
|
1427
|
+
|
|
1428
|
+
} // if
|