Mercurial > defr > drupal > scald > dnd

comparison js/bt/other_libs/excanvas_0002/examples/example3.html @ 18:0d557e6e73f7

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