OLD | NEW |
---|---|
1 // Copyright (c) 2011 The Chromium Authors. All rights reserved. | 1 // Copyright (c) 2011 The Chromium Authors. All rights reserved. |
2 // Use of this source code is governed by a BSD-style license that can be | 2 // Use of this source code is governed by a BSD-style license that can be |
3 // found in the LICENSE file. | 3 // found in the LICENSE file. |
4 | 4 |
5 /** | 5 /** |
6 * The ImageBuffer object holds an offscreen canvas object and | 6 * The ImageBuffer object holds an offscreen canvas object and |
7 * draws its content on the screen canvas applying scale and offset. | 7 * draws its content on the screen canvas applying scale and offset. |
8 * Supports pluggable overlays that modify the image appearance and behavior. | 8 * Supports pluggable overlays that modify the image appearance and behavior. |
9 * @constructor | 9 * @constructor |
10 */ | 10 */ |
11 function ImageBuffer(screenCanvas) { | 11 function ImageBuffer(screenCanvas) { |
12 this.screenCanvas_ = screenCanvas; | 12 this.screenCanvas_ = screenCanvas; |
13 | 13 |
14 this.viewport_ = new Viewport(this.repaint.bind(this)); | 14 this.viewport_ = new Viewport(this.repaint.bind(this)); |
15 this.viewport_.setScreenSize(screenCanvas.width, screenCanvas.height); | 15 this.viewport_.setScreenSize(screenCanvas.width, screenCanvas.height); |
16 | 16 |
17 this.content_ = new ImageBuffer.Content( | 17 this.content_ = new ImageBuffer.Content( |
18 this.viewport_, screenCanvas.ownerDocument); | 18 this.viewport_, screenCanvas.ownerDocument); |
19 | 19 |
20 this.overlays_ = []; | 20 this.overlays_ = []; |
21 this.addOverlay(new ImageBuffer.Margin(this.viewport_)); | 21 this.addOverlay(new ImageBuffer.Margin(this.viewport_)); |
22 this.addOverlay(this.content_); | 22 this.addOverlay(this.content_); |
23 this.addOverlay(new ImageBuffer.Overview(this.viewport_, this.content_)); | 23 // Do not need this for now. |
zel
2011/09/02 17:11:58
remove?
dgozman
2011/09/06 14:18:47
Done.
| |
24 // this.addOverlay(new ImageBuffer.Overview(this.viewport_, this.content_)); | |
24 } | 25 } |
25 | 26 |
26 ImageBuffer.prototype.getViewport = function() { return this.viewport_ }; | 27 ImageBuffer.prototype.getViewport = function() { return this.viewport_ }; |
27 | 28 |
28 ImageBuffer.prototype.getContent = function() { return this.content_ }; | 29 ImageBuffer.prototype.getContent = function() { return this.content_ }; |
29 | 30 |
30 /** | 31 /** |
31 * Loads the new content. | 32 * Loads the new content. |
32 * A string parameter is treated as an image url. | 33 * A string parameter is treated as an image url. |
33 * @param {String|HTMLImageElement|HTMLCanvasElement} source | 34 * @param {String|HTMLImageElement|HTMLCanvasElement} source |
(...skipping 145 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... | |
179 this.viewport_ = viewport; | 180 this.viewport_ = viewport; |
180 }; | 181 }; |
181 | 182 |
182 ImageBuffer.Margin.prototype = {__proto__: ImageBuffer.Overlay.prototype}; | 183 ImageBuffer.Margin.prototype = {__proto__: ImageBuffer.Overlay.prototype}; |
183 | 184 |
184 // Draw below everything including the content. | 185 // Draw below everything including the content. |
185 ImageBuffer.Margin.prototype.getZIndex = function() { return -2 }; | 186 ImageBuffer.Margin.prototype.getZIndex = function() { return -2 }; |
186 | 187 |
187 ImageBuffer.Margin.prototype.draw = function(context) { | 188 ImageBuffer.Margin.prototype.draw = function(context) { |
188 context.save(); | 189 context.save(); |
189 context.fillStyle = '#F0F0F0'; | 190 context.fillStyle = '#000000'; |
190 context.strokeStyle = '#000000'; | 191 context.strokeStyle = '#000000'; |
191 Rect.fillBetween(context, | 192 Rect.fillBetween(context, |
192 this.viewport_.getImageBoundsOnScreen(), | 193 this.viewport_.getImageBoundsOnScreen(), |
193 this.viewport_.getScreenBounds()); | 194 this.viewport_.getScreenBounds()); |
194 | 195 |
195 Rect.outline(context, this.viewport_.getImageBoundsOnScreen()); | 196 Rect.outline(context, this.viewport_.getImageBoundsOnScreen()); |
196 context.restore(); | 197 context.restore(); |
197 }; | 198 }; |
198 | 199 |
199 /** | 200 /** |
(...skipping 95 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... | |
295 0, 0, opt_width || this.canvas_.width, opt_height || this.canvas_.height); | 296 0, 0, opt_width || this.canvas_.width, opt_height || this.canvas_.height); |
296 }; | 297 }; |
297 | 298 |
298 /** | 299 /** |
299 * @param {HTMLImageElement|HTMLCanvasElement} image | 300 * @param {HTMLImageElement|HTMLCanvasElement} image |
300 */ | 301 */ |
301 ImageBuffer.Content.prototype.load = function(image) { | 302 ImageBuffer.Content.prototype.load = function(image) { |
302 this.canvas_.width = image.width; | 303 this.canvas_.width = image.width; |
303 this.canvas_.height = image.height; | 304 this.canvas_.height = image.height; |
304 | 305 |
306 this.clear(); | |
305 Rect.drawImage(this.canvas_.getContext("2d"), image); | 307 Rect.drawImage(this.canvas_.getContext("2d"), image); |
306 this.invalidateCaches(); | 308 this.invalidateCaches(); |
307 | 309 |
308 this.viewport_.setImageSize(image.width, image.height); | 310 this.viewport_.setImageSize(image.width, image.height); |
309 this.viewport_.fitImage(); | 311 this.viewport_.fitImage(); |
310 }; | 312 }; |
311 | 313 |
314 ImageBuffer.Content.prototype.clear = function() { | |
315 var context = this.canvas_.getContext("2d"); | |
316 context.globalAlpha = 1; | |
317 context.fillStyle = '#FFFFFF'; | |
318 Rect.fill(context, new Rect(this.canvas_)); | |
319 }; | |
320 | |
312 /** | 321 /** |
313 * @param {ImageData} imageData | 322 * @param {ImageData} imageData |
314 */ | 323 */ |
315 ImageBuffer.Content.prototype.drawImageData = function (imageData, x, y) { | 324 ImageBuffer.Content.prototype.drawImageData = function (imageData, x, y) { |
316 this.canvas_.getContext("2d").putImageData(imageData, x, y); | 325 this.canvas_.getContext("2d").putImageData(imageData, x, y); |
317 this.invalidateCaches(); | 326 this.invalidateCaches(); |
318 }; | 327 }; |
319 | 328 |
320 /** | 329 /** |
321 * The overview overlay draws the image thumbnail in the bottom right corner. | 330 * The overview overlay draws the image thumbnail in the bottom right corner. |
(...skipping 97 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... | |
419 function scale() { return -self.scale_;} | 428 function scale() { return -self.scale_;} |
420 function hit(x, y) { return self.bounds_ && self.bounds_.inside(x, y); } | 429 function hit(x, y) { return self.bounds_ && self.bounds_.inside(x, y); } |
421 return this.viewport_.createOffsetSetter(x, y, scale, hit); | 430 return this.viewport_.createOffsetSetter(x, y, scale, hit); |
422 } else if (cursor == 'crosshair') { | 431 } else if (cursor == 'crosshair') { |
423 // Force non-draggable behavior. | 432 // Force non-draggable behavior. |
424 return function() {}; | 433 return function() {}; |
425 } else { | 434 } else { |
426 return null; | 435 return null; |
427 } | 436 } |
428 }; | 437 }; |
OLD | NEW |