Mercurial > hg > extraction-interface

annotate geotemco/lib/excanvas/examples/example3.html @ 16:fb948097de39

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
fix bug: Edittaglist is working on Firefox. fix bug: name of regex used to show with strange <span id="transmark"></span> showing only on FF but not Saf. Change it to use "document.getElementById(id).textContent to get the pure text string.
author Zoe Hong <zhong@mpiwg-berlin.mpg.de>
date Fri, 20 Feb 2015 16:39:08 +0100
parents b12c99b7c3f0
children
Ignore whitespace changes - Everywhere: Within whitespace: At end of lines:
rev   line source
0
b12c99b7c3f0 commit for previous development
Zoe Hong <zhong@mpiwg-berlin.mpg.de>
parents:
diff changeset
1 <!DOCTYPE html>
b12c99b7c3f0 commit for previous development
Zoe Hong <zhong@mpiwg-berlin.mpg.de>
parents:
diff changeset
2
b12c99b7c3f0 commit for previous development
Zoe Hong <zhong@mpiwg-berlin.mpg.de>
parents:
diff changeset
3 <!--
b12c99b7c3f0 commit for previous development
Zoe Hong <zhong@mpiwg-berlin.mpg.de>
parents:
diff changeset
4
b12c99b7c3f0 commit for previous development
Zoe Hong <zhong@mpiwg-berlin.mpg.de>
parents:
diff changeset
5 Copyright 2006 Google Inc.
b12c99b7c3f0 commit for previous development
Zoe Hong <zhong@mpiwg-berlin.mpg.de>
parents:
diff changeset
6
b12c99b7c3f0 commit for previous development
Zoe Hong <zhong@mpiwg-berlin.mpg.de>
parents:
diff changeset
7 Licensed under the Apache License, Version 2.0 (the "License");
b12c99b7c3f0 commit for previous development
Zoe Hong <zhong@mpiwg-berlin.mpg.de>
parents:
diff changeset
8 you may not use this file except in compliance with the License.
b12c99b7c3f0 commit for previous development
Zoe Hong <zhong@mpiwg-berlin.mpg.de>
parents:
diff changeset
9 You may obtain a copy of the License at
b12c99b7c3f0 commit for previous development
Zoe Hong <zhong@mpiwg-berlin.mpg.de>
parents:
diff changeset
10
b12c99b7c3f0 commit for previous development
Zoe Hong <zhong@mpiwg-berlin.mpg.de>
parents:
diff changeset
11 http://www.apache.org/licenses/LICENSE-2.0
b12c99b7c3f0 commit for previous development
Zoe Hong <zhong@mpiwg-berlin.mpg.de>
parents:
diff changeset
12
b12c99b7c3f0 commit for previous development
Zoe Hong <zhong@mpiwg-berlin.mpg.de>
parents:
diff changeset
13 Unless required by applicable law or agreed to in writing, software
b12c99b7c3f0 commit for previous development
Zoe Hong <zhong@mpiwg-berlin.mpg.de>
parents:
diff changeset
14 distributed under the License is distributed on an "AS IS" BASIS,
b12c99b7c3f0 commit for previous development
Zoe Hong <zhong@mpiwg-berlin.mpg.de>
parents:
diff changeset
15 WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
b12c99b7c3f0 commit for previous development
Zoe Hong <zhong@mpiwg-berlin.mpg.de>
parents:
diff changeset
16 See the License for the specific language governing permissions and
b12c99b7c3f0 commit for previous development
Zoe Hong <zhong@mpiwg-berlin.mpg.de>
parents:
diff changeset
17 limitations under the License.
b12c99b7c3f0 commit for previous development
Zoe Hong <zhong@mpiwg-berlin.mpg.de>
parents:
diff changeset
18
b12c99b7c3f0 commit for previous development
Zoe Hong <zhong@mpiwg-berlin.mpg.de>
parents:
diff changeset
19 -->
b12c99b7c3f0 commit for previous development
Zoe Hong <zhong@mpiwg-berlin.mpg.de>
parents:
diff changeset
20
b12c99b7c3f0 commit for previous development
Zoe Hong <zhong@mpiwg-berlin.mpg.de>
parents:
diff changeset
21 <html>
b12c99b7c3f0 commit for previous development
Zoe Hong <zhong@mpiwg-berlin.mpg.de>
parents:
diff changeset
22 <head>
b12c99b7c3f0 commit for previous development
Zoe Hong <zhong@mpiwg-berlin.mpg.de>
parents:
diff changeset
23 <title></title>
b12c99b7c3f0 commit for previous development
Zoe Hong <zhong@mpiwg-berlin.mpg.de>
parents:
diff changeset
24 <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
b12c99b7c3f0 commit for previous development
Zoe Hong <zhong@mpiwg-berlin.mpg.de>
parents:
diff changeset
25 <!--[if IE]><script type="text/javascript" src="../excanvas.js"></script><![endif]-->
b12c99b7c3f0 commit for previous development
Zoe Hong <zhong@mpiwg-berlin.mpg.de>
parents:
diff changeset
26 <style type="text/css">
b12c99b7c3f0 commit for previous development
Zoe Hong <zhong@mpiwg-berlin.mpg.de>
parents:
diff changeset
27
b12c99b7c3f0 commit for previous development
Zoe Hong <zhong@mpiwg-berlin.mpg.de>
parents:
diff changeset
28 body {
b12c99b7c3f0 commit for previous development
Zoe Hong <zhong@mpiwg-berlin.mpg.de>
parents:
diff changeset
29 overflow: hidden;
b12c99b7c3f0 commit for previous development
Zoe Hong <zhong@mpiwg-berlin.mpg.de>
parents:
diff changeset
30 width: 100%;
b12c99b7c3f0 commit for previous development
Zoe Hong <zhong@mpiwg-berlin.mpg.de>
parents:
diff changeset
31 height: 100%;
b12c99b7c3f0 commit for previous development
Zoe Hong <zhong@mpiwg-berlin.mpg.de>
parents:
diff changeset
32 margin: 0;
b12c99b7c3f0 commit for previous development
Zoe Hong <zhong@mpiwg-berlin.mpg.de>
parents:
diff changeset
33 }
b12c99b7c3f0 commit for previous development
Zoe Hong <zhong@mpiwg-berlin.mpg.de>
parents:
diff changeset
34
b12c99b7c3f0 commit for previous development
Zoe Hong <zhong@mpiwg-berlin.mpg.de>
parents:
diff changeset
35 #image-rotator {
b12c99b7c3f0 commit for previous development
Zoe Hong <zhong@mpiwg-berlin.mpg.de>
parents:
diff changeset
36 position: absolute;
b12c99b7c3f0 commit for previous development
Zoe Hong <zhong@mpiwg-berlin.mpg.de>
parents:
diff changeset
37 left: 0;
b12c99b7c3f0 commit for previous development
Zoe Hong <zhong@mpiwg-berlin.mpg.de>
parents:
diff changeset
38 top: 0;
b12c99b7c3f0 commit for previous development
Zoe Hong <zhong@mpiwg-berlin.mpg.de>
parents:
diff changeset
39 width: 100%;
b12c99b7c3f0 commit for previous development
Zoe Hong <zhong@mpiwg-berlin.mpg.de>
parents:
diff changeset
40 height: 100%;
b12c99b7c3f0 commit for previous development
Zoe Hong <zhong@mpiwg-berlin.mpg.de>
parents:
diff changeset
41 }
b12c99b7c3f0 commit for previous development
Zoe Hong <zhong@mpiwg-berlin.mpg.de>
parents:
diff changeset
42
b12c99b7c3f0 commit for previous development
Zoe Hong <zhong@mpiwg-berlin.mpg.de>
parents:
diff changeset
43 #image-rotator .tool-bar {
b12c99b7c3f0 commit for previous development
Zoe Hong <zhong@mpiwg-berlin.mpg.de>
parents:
diff changeset
44 text-align: center;
b12c99b7c3f0 commit for previous development
Zoe Hong <zhong@mpiwg-berlin.mpg.de>
parents:
diff changeset
45 }
b12c99b7c3f0 commit for previous development
Zoe Hong <zhong@mpiwg-berlin.mpg.de>
parents:
diff changeset
46
b12c99b7c3f0 commit for previous development
Zoe Hong <zhong@mpiwg-berlin.mpg.de>
parents:
diff changeset
47 .tool-bar button {
b12c99b7c3f0 commit for previous development
Zoe Hong <zhong@mpiwg-berlin.mpg.de>
parents:
diff changeset
48 margin: 0.5em 0.5em 0 0;
b12c99b7c3f0 commit for previous development
Zoe Hong <zhong@mpiwg-berlin.mpg.de>
parents:
diff changeset
49 }
b12c99b7c3f0 commit for previous development
Zoe Hong <zhong@mpiwg-berlin.mpg.de>
parents:
diff changeset
50
b12c99b7c3f0 commit for previous development
Zoe Hong <zhong@mpiwg-berlin.mpg.de>
parents:
diff changeset
51 #image-rotator img,
b12c99b7c3f0 commit for previous development
Zoe Hong <zhong@mpiwg-berlin.mpg.de>
parents:
diff changeset
52 #image-rotator canvas {
b12c99b7c3f0 commit for previous development
Zoe Hong <zhong@mpiwg-berlin.mpg.de>
parents:
diff changeset
53 position: absolute;
b12c99b7c3f0 commit for previous development
Zoe Hong <zhong@mpiwg-berlin.mpg.de>
parents:
diff changeset
54 }
b12c99b7c3f0 commit for previous development
Zoe Hong <zhong@mpiwg-berlin.mpg.de>
parents:
diff changeset
55
b12c99b7c3f0 commit for previous development
Zoe Hong <zhong@mpiwg-berlin.mpg.de>
parents:
diff changeset
56 </style>
b12c99b7c3f0 commit for previous development
Zoe Hong <zhong@mpiwg-berlin.mpg.de>
parents:
diff changeset
57 <script type="text/javascript">
b12c99b7c3f0 commit for previous development
Zoe Hong <zhong@mpiwg-berlin.mpg.de>
parents:
diff changeset
58
b12c99b7c3f0 commit for previous development
Zoe Hong <zhong@mpiwg-berlin.mpg.de>
parents:
diff changeset
59 function sawFunc(a) {
b12c99b7c3f0 commit for previous development
Zoe Hong <zhong@mpiwg-berlin.mpg.de>
parents:
diff changeset
60 var PI = Math.PI;
b12c99b7c3f0 commit for previous development
Zoe Hong <zhong@mpiwg-berlin.mpg.de>
parents:
diff changeset
61 var PI2 = PI / 2;
b12c99b7c3f0 commit for previous development
Zoe Hong <zhong@mpiwg-berlin.mpg.de>
parents:
diff changeset
62 // make sure a is within 0 to PI
b12c99b7c3f0 commit for previous development
Zoe Hong <zhong@mpiwg-berlin.mpg.de>
parents:
diff changeset
63 a = a % PI;
b12c99b7c3f0 commit for previous development
Zoe Hong <zhong@mpiwg-berlin.mpg.de>
parents:
diff changeset
64 if (a < 0) {
b12c99b7c3f0 commit for previous development
Zoe Hong <zhong@mpiwg-berlin.mpg.de>
parents:
diff changeset
65 a += PI;
b12c99b7c3f0 commit for previous development
Zoe Hong <zhong@mpiwg-berlin.mpg.de>
parents:
diff changeset
66 }
b12c99b7c3f0 commit for previous development
Zoe Hong <zhong@mpiwg-berlin.mpg.de>
parents:
diff changeset
67 if (a < PI2) {
b12c99b7c3f0 commit for previous development
Zoe Hong <zhong@mpiwg-berlin.mpg.de>
parents:
diff changeset
68 return a / PI2;
b12c99b7c3f0 commit for previous development
Zoe Hong <zhong@mpiwg-berlin.mpg.de>
parents:
diff changeset
69 } else {
b12c99b7c3f0 commit for previous development
Zoe Hong <zhong@mpiwg-berlin.mpg.de>
parents:
diff changeset
70 return (PI - a) / PI2;
b12c99b7c3f0 commit for previous development
Zoe Hong <zhong@mpiwg-berlin.mpg.de>
parents:
diff changeset
71 }
b12c99b7c3f0 commit for previous development
Zoe Hong <zhong@mpiwg-berlin.mpg.de>
parents:
diff changeset
72 }
b12c99b7c3f0 commit for previous development
Zoe Hong <zhong@mpiwg-berlin.mpg.de>
parents:
diff changeset
73
b12c99b7c3f0 commit for previous development
Zoe Hong <zhong@mpiwg-berlin.mpg.de>
parents:
diff changeset
74 function easeInEaseOut(t) {
b12c99b7c3f0 commit for previous development
Zoe Hong <zhong@mpiwg-berlin.mpg.de>
parents:
diff changeset
75 var t2 = t * t;
b12c99b7c3f0 commit for previous development
Zoe Hong <zhong@mpiwg-berlin.mpg.de>
parents:
diff changeset
76 return 3 * t2 - 2 * t * t2;
b12c99b7c3f0 commit for previous development
Zoe Hong <zhong@mpiwg-berlin.mpg.de>
parents:
diff changeset
77 }
b12c99b7c3f0 commit for previous development
Zoe Hong <zhong@mpiwg-berlin.mpg.de>
parents:
diff changeset
78
b12c99b7c3f0 commit for previous development
Zoe Hong <zhong@mpiwg-berlin.mpg.de>
parents:
diff changeset
79 function ImageRotator(el, src, w, h) {
b12c99b7c3f0 commit for previous development
Zoe Hong <zhong@mpiwg-berlin.mpg.de>
parents:
diff changeset
80 this.element = el;
b12c99b7c3f0 commit for previous development
Zoe Hong <zhong@mpiwg-berlin.mpg.de>
parents:
diff changeset
81 this.toolBar = el.getElementsByTagName("div")[0];
b12c99b7c3f0 commit for previous development
Zoe Hong <zhong@mpiwg-berlin.mpg.de>
parents:
diff changeset
82 this.canvas = el.getElementsByTagName("canvas")[0];
b12c99b7c3f0 commit for previous development
Zoe Hong <zhong@mpiwg-berlin.mpg.de>
parents:
diff changeset
83 var images = el.getElementsByTagName("img");
b12c99b7c3f0 commit for previous development
Zoe Hong <zhong@mpiwg-berlin.mpg.de>
parents:
diff changeset
84 this.image = images[images.length - 1];
b12c99b7c3f0 commit for previous development
Zoe Hong <zhong@mpiwg-berlin.mpg.de>
parents:
diff changeset
85 var btns = el.getElementsByTagName("button");
b12c99b7c3f0 commit for previous development
Zoe Hong <zhong@mpiwg-berlin.mpg.de>
parents:
diff changeset
86 this.btnCw = btns[0];
b12c99b7c3f0 commit for previous development
Zoe Hong <zhong@mpiwg-berlin.mpg.de>
parents:
diff changeset
87 this.btnCcw = btns[1];
b12c99b7c3f0 commit for previous development
Zoe Hong <zhong@mpiwg-berlin.mpg.de>
parents:
diff changeset
88 var self = this;
b12c99b7c3f0 commit for previous development
Zoe Hong <zhong@mpiwg-berlin.mpg.de>
parents:
diff changeset
89 this.btnCcw.onclick = function () {
b12c99b7c3f0 commit for previous development
Zoe Hong <zhong@mpiwg-berlin.mpg.de>
parents:
diff changeset
90 self.rotateCcw();
b12c99b7c3f0 commit for previous development
Zoe Hong <zhong@mpiwg-berlin.mpg.de>
parents:
diff changeset
91 };
b12c99b7c3f0 commit for previous development
Zoe Hong <zhong@mpiwg-berlin.mpg.de>
parents:
diff changeset
92 this.btnCw.onclick = function () {
b12c99b7c3f0 commit for previous development
Zoe Hong <zhong@mpiwg-berlin.mpg.de>
parents:
diff changeset
93 self.rotateCw();
b12c99b7c3f0 commit for previous development
Zoe Hong <zhong@mpiwg-berlin.mpg.de>
parents:
diff changeset
94 };
b12c99b7c3f0 commit for previous development
Zoe Hong <zhong@mpiwg-berlin.mpg.de>
parents:
diff changeset
95 this.image.onload = function (e) {
b12c99b7c3f0 commit for previous development
Zoe Hong <zhong@mpiwg-berlin.mpg.de>
parents:
diff changeset
96 self.onImageLoad(e);
b12c99b7c3f0 commit for previous development
Zoe Hong <zhong@mpiwg-berlin.mpg.de>
parents:
diff changeset
97 };
b12c99b7c3f0 commit for previous development
Zoe Hong <zhong@mpiwg-berlin.mpg.de>
parents:
diff changeset
98 this.image.onerror = function (e) {
b12c99b7c3f0 commit for previous development
Zoe Hong <zhong@mpiwg-berlin.mpg.de>
parents:
diff changeset
99 self.onImageError(e);
b12c99b7c3f0 commit for previous development
Zoe Hong <zhong@mpiwg-berlin.mpg.de>
parents:
diff changeset
100 };
b12c99b7c3f0 commit for previous development
Zoe Hong <zhong@mpiwg-berlin.mpg.de>
parents:
diff changeset
101 this.image.onabort = function (e) {
b12c99b7c3f0 commit for previous development
Zoe Hong <zhong@mpiwg-berlin.mpg.de>
parents:
diff changeset
102 self.onImageAbort(e);
b12c99b7c3f0 commit for previous development
Zoe Hong <zhong@mpiwg-berlin.mpg.de>
parents:
diff changeset
103 };
b12c99b7c3f0 commit for previous development
Zoe Hong <zhong@mpiwg-berlin.mpg.de>
parents:
diff changeset
104 this.setImage(src, w, h);
b12c99b7c3f0 commit for previous development
Zoe Hong <zhong@mpiwg-berlin.mpg.de>
parents:
diff changeset
105 this.layout();
b12c99b7c3f0 commit for previous development
Zoe Hong <zhong@mpiwg-berlin.mpg.de>
parents:
diff changeset
106
b12c99b7c3f0 commit for previous development
Zoe Hong <zhong@mpiwg-berlin.mpg.de>
parents:
diff changeset
107 var onResize = function () {
b12c99b7c3f0 commit for previous development
Zoe Hong <zhong@mpiwg-berlin.mpg.de>
parents:
diff changeset
108 self.layout();
b12c99b7c3f0 commit for previous development
Zoe Hong <zhong@mpiwg-berlin.mpg.de>
parents:
diff changeset
109 };
b12c99b7c3f0 commit for previous development
Zoe Hong <zhong@mpiwg-berlin.mpg.de>
parents:
diff changeset
110 var onLoad = function () {
b12c99b7c3f0 commit for previous development
Zoe Hong <zhong@mpiwg-berlin.mpg.de>
parents:
diff changeset
111 self.onWindowLoad();
b12c99b7c3f0 commit for previous development
Zoe Hong <zhong@mpiwg-berlin.mpg.de>
parents:
diff changeset
112 };
b12c99b7c3f0 commit for previous development
Zoe Hong <zhong@mpiwg-berlin.mpg.de>
parents:
diff changeset
113 if (window.addEventListener) {
b12c99b7c3f0 commit for previous development
Zoe Hong <zhong@mpiwg-berlin.mpg.de>
parents:
diff changeset
114 window.addEventListener("resize", onResize, false);
b12c99b7c3f0 commit for previous development
Zoe Hong <zhong@mpiwg-berlin.mpg.de>
parents:
diff changeset
115 window.addEventListener("load", onLoad, false);
b12c99b7c3f0 commit for previous development
Zoe Hong <zhong@mpiwg-berlin.mpg.de>
parents:
diff changeset
116 } else if (window.attachEvent) {
b12c99b7c3f0 commit for previous development
Zoe Hong <zhong@mpiwg-berlin.mpg.de>
parents:
diff changeset
117 window.attachEvent("onresize", onResize);
b12c99b7c3f0 commit for previous development
Zoe Hong <zhong@mpiwg-berlin.mpg.de>
parents:
diff changeset
118 window.attachEvent("onload", onLoad);
b12c99b7c3f0 commit for previous development
Zoe Hong <zhong@mpiwg-berlin.mpg.de>
parents:
diff changeset
119 }
b12c99b7c3f0 commit for previous development
Zoe Hong <zhong@mpiwg-berlin.mpg.de>
parents:
diff changeset
120 }
b12c99b7c3f0 commit for previous development
Zoe Hong <zhong@mpiwg-berlin.mpg.de>
parents:
diff changeset
121
b12c99b7c3f0 commit for previous development
Zoe Hong <zhong@mpiwg-berlin.mpg.de>
parents:
diff changeset
122 ImageRotator.prototype = {
b12c99b7c3f0 commit for previous development
Zoe Hong <zhong@mpiwg-berlin.mpg.de>
parents:
diff changeset
123 getLoaded: function () {
b12c99b7c3f0 commit for previous development
Zoe Hong <zhong@mpiwg-berlin.mpg.de>
parents:
diff changeset
124 return this.imageLoaded && this.windowLoaded;
b12c99b7c3f0 commit for previous development
Zoe Hong <zhong@mpiwg-berlin.mpg.de>
parents:
diff changeset
125 },
b12c99b7c3f0 commit for previous development
Zoe Hong <zhong@mpiwg-berlin.mpg.de>
parents:
diff changeset
126 setImage: function (src, w, h) {
b12c99b7c3f0 commit for previous development
Zoe Hong <zhong@mpiwg-berlin.mpg.de>
parents:
diff changeset
127 this.imageLoaded = false;
b12c99b7c3f0 commit for previous development
Zoe Hong <zhong@mpiwg-berlin.mpg.de>
parents:
diff changeset
128 this.image.src = src;
b12c99b7c3f0 commit for previous development
Zoe Hong <zhong@mpiwg-berlin.mpg.de>
parents:
diff changeset
129 this.imageWidth = w;
b12c99b7c3f0 commit for previous development
Zoe Hong <zhong@mpiwg-berlin.mpg.de>
parents:
diff changeset
130 this.imageHeight = h;
b12c99b7c3f0 commit for previous development
Zoe Hong <zhong@mpiwg-berlin.mpg.de>
parents:
diff changeset
131 },
b12c99b7c3f0 commit for previous development
Zoe Hong <zhong@mpiwg-berlin.mpg.de>
parents:
diff changeset
132
b12c99b7c3f0 commit for previous development
Zoe Hong <zhong@mpiwg-berlin.mpg.de>
parents:
diff changeset
133 layout: function () {
b12c99b7c3f0 commit for previous development
Zoe Hong <zhong@mpiwg-berlin.mpg.de>
parents:
diff changeset
134 var PI2 = Math.PI / 2;
b12c99b7c3f0 commit for previous development
Zoe Hong <zhong@mpiwg-berlin.mpg.de>
parents:
diff changeset
135 var h = this.element.clientHeight;
b12c99b7c3f0 commit for previous development
Zoe Hong <zhong@mpiwg-berlin.mpg.de>
parents:
diff changeset
136 var w = this.element.clientWidth;
b12c99b7c3f0 commit for previous development
Zoe Hong <zhong@mpiwg-berlin.mpg.de>
parents:
diff changeset
137 var th = this.toolBar.offsetHeight;
b12c99b7c3f0 commit for previous development
Zoe Hong <zhong@mpiwg-berlin.mpg.de>
parents:
diff changeset
138 h -= this.toolBar.offsetHeight;
b12c99b7c3f0 commit for previous development
Zoe Hong <zhong@mpiwg-berlin.mpg.de>
parents:
diff changeset
139 if (!this.ctx || !this.getLoaded()) {
b12c99b7c3f0 commit for previous development
Zoe Hong <zhong@mpiwg-berlin.mpg.de>
parents:
diff changeset
140 this.btnCw.disabled = true;
b12c99b7c3f0 commit for previous development
Zoe Hong <zhong@mpiwg-berlin.mpg.de>
parents:
diff changeset
141 this.btnCcw.disabled = true;
b12c99b7c3f0 commit for previous development
Zoe Hong <zhong@mpiwg-berlin.mpg.de>
parents:
diff changeset
142 this.canvas.style.display = "none";
b12c99b7c3f0 commit for previous development
Zoe Hong <zhong@mpiwg-berlin.mpg.de>
parents:
diff changeset
143 this.image.style.display = "block";
b12c99b7c3f0 commit for previous development
Zoe Hong <zhong@mpiwg-berlin.mpg.de>
parents:
diff changeset
144 var ratio = Math.min(w / this.imageWidth, h / this.imageHeight, 1);
b12c99b7c3f0 commit for previous development
Zoe Hong <zhong@mpiwg-berlin.mpg.de>
parents:
diff changeset
145 var imgW = this.imageWidth * ratio;
b12c99b7c3f0 commit for previous development
Zoe Hong <zhong@mpiwg-berlin.mpg.de>
parents:
diff changeset
146 var imgH = this.imageHeight * ratio;
b12c99b7c3f0 commit for previous development
Zoe Hong <zhong@mpiwg-berlin.mpg.de>
parents:
diff changeset
147 var y = th + (h - imgH) / 2;
b12c99b7c3f0 commit for previous development
Zoe Hong <zhong@mpiwg-berlin.mpg.de>
parents:
diff changeset
148 var x = (w - imgW) / 2;
b12c99b7c3f0 commit for previous development
Zoe Hong <zhong@mpiwg-berlin.mpg.de>
parents:
diff changeset
149 this.image.style.left = Math.round(x) + "px";
b12c99b7c3f0 commit for previous development
Zoe Hong <zhong@mpiwg-berlin.mpg.de>
parents:
diff changeset
150 this.image.style.top = Math.round(y) + "px";
b12c99b7c3f0 commit for previous development
Zoe Hong <zhong@mpiwg-berlin.mpg.de>
parents:
diff changeset
151 this.image.style.width = Math.round(imgW) + "px";
b12c99b7c3f0 commit for previous development
Zoe Hong <zhong@mpiwg-berlin.mpg.de>
parents:
diff changeset
152 this.image.style.height = Math.round(imgH) + "px";
b12c99b7c3f0 commit for previous development
Zoe Hong <zhong@mpiwg-berlin.mpg.de>
parents:
diff changeset
153 } else {
b12c99b7c3f0 commit for previous development
Zoe Hong <zhong@mpiwg-berlin.mpg.de>
parents:
diff changeset
154 this.btnCw.disabled = this.isAnimating_;
b12c99b7c3f0 commit for previous development
Zoe Hong <zhong@mpiwg-berlin.mpg.de>
parents:
diff changeset
155 this.btnCcw.disabled = this.isAnimating_;
b12c99b7c3f0 commit for previous development
Zoe Hong <zhong@mpiwg-berlin.mpg.de>
parents:
diff changeset
156 this.canvas.style.display = "block";
b12c99b7c3f0 commit for previous development
Zoe Hong <zhong@mpiwg-berlin.mpg.de>
parents:
diff changeset
157 this.image.style.display = "none";
b12c99b7c3f0 commit for previous development
Zoe Hong <zhong@mpiwg-berlin.mpg.de>
parents:
diff changeset
158
b12c99b7c3f0 commit for previous development
Zoe Hong <zhong@mpiwg-berlin.mpg.de>
parents:
diff changeset
159 this.canvas.style.left = 0 + "px";
b12c99b7c3f0 commit for previous development
Zoe Hong <zhong@mpiwg-berlin.mpg.de>
parents:
diff changeset
160 this.canvas.style.top = th + "px";
b12c99b7c3f0 commit for previous development
Zoe Hong <zhong@mpiwg-berlin.mpg.de>
parents:
diff changeset
161 this.canvas.style.width = w + "px";
b12c99b7c3f0 commit for previous development
Zoe Hong <zhong@mpiwg-berlin.mpg.de>
parents:
diff changeset
162 this.canvas.width = w;
b12c99b7c3f0 commit for previous development
Zoe Hong <zhong@mpiwg-berlin.mpg.de>
parents:
diff changeset
163 this.canvas.style.height = h + "px";
b12c99b7c3f0 commit for previous development
Zoe Hong <zhong@mpiwg-berlin.mpg.de>
parents:
diff changeset
164 this.canvas.height = h;
b12c99b7c3f0 commit for previous development
Zoe Hong <zhong@mpiwg-berlin.mpg.de>
parents:
diff changeset
165
b12c99b7c3f0 commit for previous development
Zoe Hong <zhong@mpiwg-berlin.mpg.de>
parents:
diff changeset
166 this.ctx.save();
b12c99b7c3f0 commit for previous development
Zoe Hong <zhong@mpiwg-berlin.mpg.de>
parents:
diff changeset
167 this.ctx.clearRect(0, 0, w, h);
b12c99b7c3f0 commit for previous development
Zoe Hong <zhong@mpiwg-berlin.mpg.de>
parents:
diff changeset
168 this.ctx.translate(w / 2, h / 2);
b12c99b7c3f0 commit for previous development
Zoe Hong <zhong@mpiwg-berlin.mpg.de>
parents:
diff changeset
169 this.ctx.rotate(this.rotation);
b12c99b7c3f0 commit for previous development
Zoe Hong <zhong@mpiwg-berlin.mpg.de>
parents:
diff changeset
170 // 0 -> 1, sin(0) = 0
b12c99b7c3f0 commit for previous development
Zoe Hong <zhong@mpiwg-berlin.mpg.de>
parents:
diff changeset
171 // PI / 2 -> H / W, sin(PI/2) = 1
b12c99b7c3f0 commit for previous development
Zoe Hong <zhong@mpiwg-berlin.mpg.de>
parents:
diff changeset
172
b12c99b7c3f0 commit for previous development
Zoe Hong <zhong@mpiwg-berlin.mpg.de>
parents:
diff changeset
173 // sin(PI/2) = 1 -> limit factor is w and imgH
b12c99b7c3f0 commit for previous development
Zoe Hong <zhong@mpiwg-berlin.mpg.de>
parents:
diff changeset
174
b12c99b7c3f0 commit for previous development
Zoe Hong <zhong@mpiwg-berlin.mpg.de>
parents:
diff changeset
175 var iw = this.imageWidth;
b12c99b7c3f0 commit for previous development
Zoe Hong <zhong@mpiwg-berlin.mpg.de>
parents:
diff changeset
176 var ih = this.imageHeight;
b12c99b7c3f0 commit for previous development
Zoe Hong <zhong@mpiwg-berlin.mpg.de>
parents:
diff changeset
177 var scale;
b12c99b7c3f0 commit for previous development
Zoe Hong <zhong@mpiwg-berlin.mpg.de>
parents:
diff changeset
178 if (iw <= w && iw <= h && ih <= h && ih <= w) {
b12c99b7c3f0 commit for previous development
Zoe Hong <zhong@mpiwg-berlin.mpg.de>
parents:
diff changeset
179 scale = 1;
b12c99b7c3f0 commit for previous development
Zoe Hong <zhong@mpiwg-berlin.mpg.de>
parents:
diff changeset
180 } else {
b12c99b7c3f0 commit for previous development
Zoe Hong <zhong@mpiwg-berlin.mpg.de>
parents:
diff changeset
181 var sinr = sawFunc(this.rotation);
b12c99b7c3f0 commit for previous development
Zoe Hong <zhong@mpiwg-berlin.mpg.de>
parents:
diff changeset
182 var cosr = sawFunc(this.rotation + PI2);
b12c99b7c3f0 commit for previous development
Zoe Hong <zhong@mpiwg-berlin.mpg.de>
parents:
diff changeset
183 var ratio1 = sinr * Math.min(w / ih, h / iw);
b12c99b7c3f0 commit for previous development
Zoe Hong <zhong@mpiwg-berlin.mpg.de>
parents:
diff changeset
184 var ratio2 = cosr * Math.min(w / iw, h / ih);
b12c99b7c3f0 commit for previous development
Zoe Hong <zhong@mpiwg-berlin.mpg.de>
parents:
diff changeset
185 var ratio = Math.min(1, ratio1 + ratio2);
b12c99b7c3f0 commit for previous development
Zoe Hong <zhong@mpiwg-berlin.mpg.de>
parents:
diff changeset
186 scale = ratio;
b12c99b7c3f0 commit for previous development
Zoe Hong <zhong@mpiwg-berlin.mpg.de>
parents:
diff changeset
187 }
b12c99b7c3f0 commit for previous development
Zoe Hong <zhong@mpiwg-berlin.mpg.de>
parents:
diff changeset
188 this.ctx.scale(scale, scale);
b12c99b7c3f0 commit for previous development
Zoe Hong <zhong@mpiwg-berlin.mpg.de>
parents:
diff changeset
189 this.ctx.translate(-iw / 2, -ih / 2);
b12c99b7c3f0 commit for previous development
Zoe Hong <zhong@mpiwg-berlin.mpg.de>
parents:
diff changeset
190 this.ctx.drawImage(this.image, 0, 0, iw, ih);
b12c99b7c3f0 commit for previous development
Zoe Hong <zhong@mpiwg-berlin.mpg.de>
parents:
diff changeset
191 this.ctx.restore();
b12c99b7c3f0 commit for previous development
Zoe Hong <zhong@mpiwg-berlin.mpg.de>
parents:
diff changeset
192 }
b12c99b7c3f0 commit for previous development
Zoe Hong <zhong@mpiwg-berlin.mpg.de>
parents:
diff changeset
193 },
b12c99b7c3f0 commit for previous development
Zoe Hong <zhong@mpiwg-berlin.mpg.de>
parents:
diff changeset
194
b12c99b7c3f0 commit for previous development
Zoe Hong <zhong@mpiwg-berlin.mpg.de>
parents:
diff changeset
195 rotation: 0,
b12c99b7c3f0 commit for previous development
Zoe Hong <zhong@mpiwg-berlin.mpg.de>
parents:
diff changeset
196 animationDuration: 500,
b12c99b7c3f0 commit for previous development
Zoe Hong <zhong@mpiwg-berlin.mpg.de>
parents:
diff changeset
197
b12c99b7c3f0 commit for previous development
Zoe Hong <zhong@mpiwg-berlin.mpg.de>
parents:
diff changeset
198 rotateCcw: function () {
b12c99b7c3f0 commit for previous development
Zoe Hong <zhong@mpiwg-berlin.mpg.de>
parents:
diff changeset
199 if (!this.isAnimating_) {
b12c99b7c3f0 commit for previous development
Zoe Hong <zhong@mpiwg-berlin.mpg.de>
parents:
diff changeset
200 this.startTime_ = (new Date).valueOf();
b12c99b7c3f0 commit for previous development
Zoe Hong <zhong@mpiwg-berlin.mpg.de>
parents:
diff changeset
201 this.currentAngle_ = this.rotation;
b12c99b7c3f0 commit for previous development
Zoe Hong <zhong@mpiwg-berlin.mpg.de>
parents:
diff changeset
202 this.deltaAngle_ = Math.PI / 2;
b12c99b7c3f0 commit for previous development
Zoe Hong <zhong@mpiwg-berlin.mpg.de>
parents:
diff changeset
203 this.isAnimating_ = true;
b12c99b7c3f0 commit for previous development
Zoe Hong <zhong@mpiwg-berlin.mpg.de>
parents:
diff changeset
204 this.animCounter_ = 0;
b12c99b7c3f0 commit for previous development
Zoe Hong <zhong@mpiwg-berlin.mpg.de>
parents:
diff changeset
205 this.rotate_();
b12c99b7c3f0 commit for previous development
Zoe Hong <zhong@mpiwg-berlin.mpg.de>
parents:
diff changeset
206 }
b12c99b7c3f0 commit for previous development
Zoe Hong <zhong@mpiwg-berlin.mpg.de>
parents:
diff changeset
207 },
b12c99b7c3f0 commit for previous development
Zoe Hong <zhong@mpiwg-berlin.mpg.de>
parents:
diff changeset
208
b12c99b7c3f0 commit for previous development
Zoe Hong <zhong@mpiwg-berlin.mpg.de>
parents:
diff changeset
209 rotateCw: function () {
b12c99b7c3f0 commit for previous development
Zoe Hong <zhong@mpiwg-berlin.mpg.de>
parents:
diff changeset
210 if (!this.isAnimating_) {
b12c99b7c3f0 commit for previous development
Zoe Hong <zhong@mpiwg-berlin.mpg.de>
parents:
diff changeset
211 this.startTime_ = (new Date).valueOf();
b12c99b7c3f0 commit for previous development
Zoe Hong <zhong@mpiwg-berlin.mpg.de>
parents:
diff changeset
212 this.currentAngle_ = this.rotation;
b12c99b7c3f0 commit for previous development
Zoe Hong <zhong@mpiwg-berlin.mpg.de>
parents:
diff changeset
213 this.deltaAngle_ = -Math.PI / 2;
b12c99b7c3f0 commit for previous development
Zoe Hong <zhong@mpiwg-berlin.mpg.de>
parents:
diff changeset
214 this.isAnimating_ = true;
b12c99b7c3f0 commit for previous development
Zoe Hong <zhong@mpiwg-berlin.mpg.de>
parents:
diff changeset
215 this.animCounter_ = 0;
b12c99b7c3f0 commit for previous development
Zoe Hong <zhong@mpiwg-berlin.mpg.de>
parents:
diff changeset
216 this.rotate_();
b12c99b7c3f0 commit for previous development
Zoe Hong <zhong@mpiwg-berlin.mpg.de>
parents:
diff changeset
217 }
b12c99b7c3f0 commit for previous development
Zoe Hong <zhong@mpiwg-berlin.mpg.de>
parents:
diff changeset
218 },
b12c99b7c3f0 commit for previous development
Zoe Hong <zhong@mpiwg-berlin.mpg.de>
parents:
diff changeset
219
b12c99b7c3f0 commit for previous development
Zoe Hong <zhong@mpiwg-berlin.mpg.de>
parents:
diff changeset
220 rotate_: function () {
b12c99b7c3f0 commit for previous development
Zoe Hong <zhong@mpiwg-berlin.mpg.de>
parents:
diff changeset
221 if (this.isAnimating_) {
b12c99b7c3f0 commit for previous development
Zoe Hong <zhong@mpiwg-berlin.mpg.de>
parents:
diff changeset
222 var t = easeInEaseOut(Math.min(1, (new Date - this.startTime_) /
b12c99b7c3f0 commit for previous development
Zoe Hong <zhong@mpiwg-berlin.mpg.de>
parents:
diff changeset
223 this.animationDuration));
b12c99b7c3f0 commit for previous development
Zoe Hong <zhong@mpiwg-berlin.mpg.de>
parents:
diff changeset
224 this.rotation = t * this.deltaAngle_ + this.currentAngle_;
b12c99b7c3f0 commit for previous development
Zoe Hong <zhong@mpiwg-berlin.mpg.de>
parents:
diff changeset
225 if (t < 1) {
b12c99b7c3f0 commit for previous development
Zoe Hong <zhong@mpiwg-berlin.mpg.de>
parents:
diff changeset
226 var self = this;
b12c99b7c3f0 commit for previous development
Zoe Hong <zhong@mpiwg-berlin.mpg.de>
parents:
diff changeset
227 window.setTimeout(function () {
b12c99b7c3f0 commit for previous development
Zoe Hong <zhong@mpiwg-berlin.mpg.de>
parents:
diff changeset
228 self.rotate_();
b12c99b7c3f0 commit for previous development
Zoe Hong <zhong@mpiwg-berlin.mpg.de>
parents:
diff changeset
229 }, 10);
b12c99b7c3f0 commit for previous development
Zoe Hong <zhong@mpiwg-berlin.mpg.de>
parents:
diff changeset
230 } else {
b12c99b7c3f0 commit for previous development
Zoe Hong <zhong@mpiwg-berlin.mpg.de>
parents:
diff changeset
231 this.isAnimating_ = false;
b12c99b7c3f0 commit for previous development
Zoe Hong <zhong@mpiwg-berlin.mpg.de>
parents:
diff changeset
232 }
b12c99b7c3f0 commit for previous development
Zoe Hong <zhong@mpiwg-berlin.mpg.de>
parents:
diff changeset
233 this.layout();
b12c99b7c3f0 commit for previous development
Zoe Hong <zhong@mpiwg-berlin.mpg.de>
parents:
diff changeset
234 }
b12c99b7c3f0 commit for previous development
Zoe Hong <zhong@mpiwg-berlin.mpg.de>
parents:
diff changeset
235 },
b12c99b7c3f0 commit for previous development
Zoe Hong <zhong@mpiwg-berlin.mpg.de>
parents:
diff changeset
236
b12c99b7c3f0 commit for previous development
Zoe Hong <zhong@mpiwg-berlin.mpg.de>
parents:
diff changeset
237 onImageLoad: function (e) {
b12c99b7c3f0 commit for previous development
Zoe Hong <zhong@mpiwg-berlin.mpg.de>
parents:
diff changeset
238 this.imageLoaded = true;
b12c99b7c3f0 commit for previous development
Zoe Hong <zhong@mpiwg-berlin.mpg.de>
parents:
diff changeset
239 this.initCanvas();
b12c99b7c3f0 commit for previous development
Zoe Hong <zhong@mpiwg-berlin.mpg.de>
parents:
diff changeset
240 },
b12c99b7c3f0 commit for previous development
Zoe Hong <zhong@mpiwg-berlin.mpg.de>
parents:
diff changeset
241 onImageError: function (e) {
b12c99b7c3f0 commit for previous development
Zoe Hong <zhong@mpiwg-berlin.mpg.de>
parents:
diff changeset
242 this.imageLoaded = false;
b12c99b7c3f0 commit for previous development
Zoe Hong <zhong@mpiwg-berlin.mpg.de>
parents:
diff changeset
243 },
b12c99b7c3f0 commit for previous development
Zoe Hong <zhong@mpiwg-berlin.mpg.de>
parents:
diff changeset
244 onImageAbort: function (e) {
b12c99b7c3f0 commit for previous development
Zoe Hong <zhong@mpiwg-berlin.mpg.de>
parents:
diff changeset
245 this.imageLoaded = false;
b12c99b7c3f0 commit for previous development
Zoe Hong <zhong@mpiwg-berlin.mpg.de>
parents:
diff changeset
246 },
b12c99b7c3f0 commit for previous development
Zoe Hong <zhong@mpiwg-berlin.mpg.de>
parents:
diff changeset
247 onWindowLoad: function (e) {
b12c99b7c3f0 commit for previous development
Zoe Hong <zhong@mpiwg-berlin.mpg.de>
parents:
diff changeset
248 this.windowLoaded = true;
b12c99b7c3f0 commit for previous development
Zoe Hong <zhong@mpiwg-berlin.mpg.de>
parents:
diff changeset
249 this.initCanvas();
b12c99b7c3f0 commit for previous development
Zoe Hong <zhong@mpiwg-berlin.mpg.de>
parents:
diff changeset
250 },
b12c99b7c3f0 commit for previous development
Zoe Hong <zhong@mpiwg-berlin.mpg.de>
parents:
diff changeset
251
b12c99b7c3f0 commit for previous development
Zoe Hong <zhong@mpiwg-berlin.mpg.de>
parents:
diff changeset
252 initCanvas: function () {
b12c99b7c3f0 commit for previous development
Zoe Hong <zhong@mpiwg-berlin.mpg.de>
parents:
diff changeset
253 if (!this.ctx && this.getLoaded()) {
b12c99b7c3f0 commit for previous development
Zoe Hong <zhong@mpiwg-berlin.mpg.de>
parents:
diff changeset
254 // IE recreates the element?
b12c99b7c3f0 commit for previous development
Zoe Hong <zhong@mpiwg-berlin.mpg.de>
parents:
diff changeset
255 this.canvas = this.element.getElementsByTagName("canvas")[0];
b12c99b7c3f0 commit for previous development
Zoe Hong <zhong@mpiwg-berlin.mpg.de>
parents:
diff changeset
256 this.ctx = this.canvas.getContext("2d");
b12c99b7c3f0 commit for previous development
Zoe Hong <zhong@mpiwg-berlin.mpg.de>
parents:
diff changeset
257
b12c99b7c3f0 commit for previous development
Zoe Hong <zhong@mpiwg-berlin.mpg.de>
parents:
diff changeset
258 if (!this.ctx) {
b12c99b7c3f0 commit for previous development
Zoe Hong <zhong@mpiwg-berlin.mpg.de>
parents:
diff changeset
259 return;
b12c99b7c3f0 commit for previous development
Zoe Hong <zhong@mpiwg-berlin.mpg.de>
parents:
diff changeset
260 }
b12c99b7c3f0 commit for previous development
Zoe Hong <zhong@mpiwg-berlin.mpg.de>
parents:
diff changeset
261 this.layout();
b12c99b7c3f0 commit for previous development
Zoe Hong <zhong@mpiwg-berlin.mpg.de>
parents:
diff changeset
262 }
b12c99b7c3f0 commit for previous development
Zoe Hong <zhong@mpiwg-berlin.mpg.de>
parents:
diff changeset
263 }
b12c99b7c3f0 commit for previous development
Zoe Hong <zhong@mpiwg-berlin.mpg.de>
parents:
diff changeset
264 };
b12c99b7c3f0 commit for previous development
Zoe Hong <zhong@mpiwg-berlin.mpg.de>
parents:
diff changeset
265
b12c99b7c3f0 commit for previous development
Zoe Hong <zhong@mpiwg-berlin.mpg.de>
parents:
diff changeset
266 </script>
b12c99b7c3f0 commit for previous development
Zoe Hong <zhong@mpiwg-berlin.mpg.de>
parents:
diff changeset
267 </head>
b12c99b7c3f0 commit for previous development
Zoe Hong <zhong@mpiwg-berlin.mpg.de>
parents:
diff changeset
268 <body>
b12c99b7c3f0 commit for previous development
Zoe Hong <zhong@mpiwg-berlin.mpg.de>
parents:
diff changeset
269
b12c99b7c3f0 commit for previous development
Zoe Hong <zhong@mpiwg-berlin.mpg.de>
parents:
diff changeset
270 <div id="image-rotator">
b12c99b7c3f0 commit for previous development
Zoe Hong <zhong@mpiwg-berlin.mpg.de>
parents:
diff changeset
271 <div class="tool-bar">
b12c99b7c3f0 commit for previous development
Zoe Hong <zhong@mpiwg-berlin.mpg.de>
parents:
diff changeset
272 <button>Rotate Left</button><button>Rotate Right</button>
b12c99b7c3f0 commit for previous development
Zoe Hong <zhong@mpiwg-berlin.mpg.de>
parents:
diff changeset
273 </div>
b12c99b7c3f0 commit for previous development
Zoe Hong <zhong@mpiwg-berlin.mpg.de>
parents:
diff changeset
274 <canvas id="c"></canvas>
b12c99b7c3f0 commit for previous development
Zoe Hong <zhong@mpiwg-berlin.mpg.de>
parents:
diff changeset
275 <img src="" alt="">
b12c99b7c3f0 commit for previous development
Zoe Hong <zhong@mpiwg-berlin.mpg.de>
parents:
diff changeset
276 </div>
b12c99b7c3f0 commit for previous development
Zoe Hong <zhong@mpiwg-berlin.mpg.de>
parents:
diff changeset
277 <script type="text/javascript">
b12c99b7c3f0 commit for previous development
Zoe Hong <zhong@mpiwg-berlin.mpg.de>
parents:
diff changeset
278 new ImageRotator(document.getElementById("image-rotator"),
b12c99b7c3f0 commit for previous development
Zoe Hong <zhong@mpiwg-berlin.mpg.de>
parents:
diff changeset
279 "ff.jpg", 608, 380);
b12c99b7c3f0 commit for previous development
Zoe Hong <zhong@mpiwg-berlin.mpg.de>
parents:
diff changeset
280 </script>
b12c99b7c3f0 commit for previous development
Zoe Hong <zhong@mpiwg-berlin.mpg.de>
parents:
diff changeset
281
b12c99b7c3f0 commit for previous development
Zoe Hong <zhong@mpiwg-berlin.mpg.de>
parents:
diff changeset
282 </body>
b12c99b7c3f0 commit for previous development
Zoe Hong <zhong@mpiwg-berlin.mpg.de>
parents:
diff changeset
283 </html>
b12c99b7c3f0 commit for previous development
Zoe Hong <zhong@mpiwg-berlin.mpg.de>
parents:
diff changeset
284