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