OLD | NEW |
1 // Copyright 2014 The Chromium Authors. All rights reserved. | 1 // Copyright 2014 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 'use strict'; | 5 'use strict'; |
6 | 6 |
7 /** | 7 /** |
8 * Viewport class controls the way the image is displayed (scale, offset etc). | 8 * Viewport class controls the way the image is displayed (scale, offset etc). |
9 * @constructor | 9 * @constructor |
10 */ | 10 */ |
(...skipping 119 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
130 | 130 |
131 /** | 131 /** |
132 * Returns the value of zoom. | 132 * Returns the value of zoom. |
133 * @return {number} Zoom value. | 133 * @return {number} Zoom value. |
134 */ | 134 */ |
135 Viewport.prototype.getZoom = function() { | 135 Viewport.prototype.getZoom = function() { |
136 return this.zoom_; | 136 return this.zoom_; |
137 }; | 137 }; |
138 | 138 |
139 /** | 139 /** |
140 * Sets the nearset larger value of ZOOM_RATIOS. | 140 * Sets the nearest larger value of ZOOM_RATIOS. |
141 */ | 141 */ |
142 Viewport.prototype.zoomIn = function() { | 142 Viewport.prototype.zoomIn = function() { |
143 var zoom = Viewport.ZOOM_RATIOS[0]; | 143 var zoom = Viewport.ZOOM_RATIOS[0]; |
144 for (var i = 0; i < Viewport.ZOOM_RATIOS.length; i++) { | 144 for (var i = 0; i < Viewport.ZOOM_RATIOS.length; i++) { |
145 zoom = Viewport.ZOOM_RATIOS[i]; | 145 zoom = Viewport.ZOOM_RATIOS[i]; |
146 if (zoom > this.zoom_) | 146 if (zoom > this.zoom_) |
147 break; | 147 break; |
148 } | 148 } |
149 this.setZoom(zoom); | 149 this.setZoom(zoom); |
150 }; | 150 }; |
(...skipping 35 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
186 */ | 186 */ |
187 Viewport.prototype.getRotation = function() { | 187 Viewport.prototype.getRotation = function() { |
188 return this.rotation_; | 188 return this.rotation_; |
189 }; | 189 }; |
190 | 190 |
191 /** | 191 /** |
192 * Obtains the scale for the specified image size. | 192 * Obtains the scale for the specified image size. |
193 * | 193 * |
194 * @param {number} width Width of the full resolution image. | 194 * @param {number} width Width of the full resolution image. |
195 * @param {number} height Height of the full resolution image. | 195 * @param {number} height Height of the full resolution image. |
196 * @return {number} The ratio of the fullresotion image size and the calculated | 196 * @return {number} The ratio of the full resotion image size and the calculated |
197 * displayed image size. | 197 * displayed image size. |
198 */ | 198 */ |
199 Viewport.prototype.getFittingScaleForImageSize_ = function(width, height) { | 199 Viewport.prototype.getFittingScaleForImageSize_ = function(width, height) { |
200 var scaleX = this.screenBounds_.width / width; | 200 var scaleX = this.screenBounds_.width / width; |
201 var scaleY = this.screenBounds_.height / height; | 201 var scaleY = this.screenBounds_.height / height; |
202 // Scales > (1 / devicePixelRatio) do not look good. Also they are | 202 // Scales > (1 / devicePixelRatio) do not look good. Also they are |
203 // not really useful as we do not have any pixel-level operations. | 203 // not really useful as we do not have any pixel-level operations. |
204 return Math.min(1 / window.devicePixelRatio, scaleX, scaleY); | 204 return Math.min(1 / window.devicePixelRatio, scaleX, scaleY); |
205 }; | 205 }; |
206 | 206 |
(...skipping 203 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
410 ~~(this.imageBounds_.width * this.scale_), | 410 ~~(this.imageBounds_.width * this.scale_), |
411 ~~(this.imageBounds_.height * this.scale_), | 411 ~~(this.imageBounds_.height * this.scale_), |
412 0, | 412 0, |
413 0); | 413 0); |
414 if (!oldBounds || | 414 if (!oldBounds || |
415 this.imageElementBoundsOnScreen_.width != oldBounds.width || | 415 this.imageElementBoundsOnScreen_.width != oldBounds.width || |
416 this.imageElementBoundsOnScreen_.height != oldBounds.height) { | 416 this.imageElementBoundsOnScreen_.height != oldBounds.height) { |
417 this.generation_++; | 417 this.generation_++; |
418 } | 418 } |
419 | 419 |
420 // Image bounds on screen cliped with the screen bounds. | 420 // Image bounds on screen clipped with the screen bounds. |
421 var left = Math.max(this.imageBoundsOnScreen_.left, 0); | 421 var left = Math.max(this.imageBoundsOnScreen_.left, 0); |
422 var top = Math.max(this.imageBoundsOnScreen_.top, 0); | 422 var top = Math.max(this.imageBoundsOnScreen_.top, 0); |
423 var right = Math.min( | 423 var right = Math.min( |
424 this.imageBoundsOnScreen_.right, this.screenBounds_.width); | 424 this.imageBoundsOnScreen_.right, this.screenBounds_.width); |
425 var bottom = Math.min( | 425 var bottom = Math.min( |
426 this.imageBoundsOnScreen_.bottom, this.screenBounds_.height); | 426 this.imageBoundsOnScreen_.bottom, this.screenBounds_.height); |
427 this.imageBoundsOnScreenClipped_ = new Rect( | 427 this.imageBoundsOnScreenClipped_ = new Rect( |
428 left, top, right - left, bottom - top); | 428 left, top, right - left, bottom - top); |
429 }; | 429 }; |
430 | 430 |
(...skipping 62 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
493 var degree = orientation ? '-90deg' : '90deg'; | 493 var degree = orientation ? '-90deg' : '90deg'; |
494 return [ | 494 return [ |
495 'scale(' + scaleRatio + ')', | 495 'scale(' + scaleRatio + ')', |
496 'rotate(' + degree + ')', | 496 'rotate(' + degree + ')', |
497 this.getTransformation() | 497 this.getTransformation() |
498 ].join(' '); | 498 ].join(' '); |
499 }; | 499 }; |
500 | 500 |
501 /** | 501 /** |
502 * Obtains CSS transformation that makes the cropped image fit the original | 502 * Obtains CSS transformation that makes the cropped image fit the original |
503 * image. The new cropped image that the transformaton is applied to fits to the | 503 * image. The new cropped image that the transformation is applied to fits to |
504 * the cropped rectangle in the original image. | 504 * the cropped rectangle in the original image. |
505 * | 505 * |
506 * @param {number} imageWidth Width of the original image. | 506 * @param {number} imageWidth Width of the original image. |
507 * @param {number} imageHeight Height of the origianl image. | 507 * @param {number} imageHeight Height of the original image. |
508 * @param {Rect} imageCropRect Crop rectangle in the image's coordinate system. | 508 * @param {Rect} imageCropRect Crop rectangle in the image's coordinate system. |
509 * @return {string} Transformation description. | 509 * @return {string} Transformation description. |
510 */ | 510 */ |
511 Viewport.prototype.getInverseTransformForCroppedImage = | 511 Viewport.prototype.getInverseTransformForCroppedImage = |
512 function(imageWidth, imageHeight, imageCropRect) { | 512 function(imageWidth, imageHeight, imageCropRect) { |
513 var wholeScale = this.getFittingScaleForImageSize_( | 513 var wholeScale = this.getFittingScaleForImageSize_( |
514 imageWidth, imageHeight); | 514 imageWidth, imageHeight); |
515 var croppedScale = this.getFittingScaleForImageSize_( | 515 var croppedScale = this.getFittingScaleForImageSize_( |
516 imageCropRect.width, imageCropRect.height); | 516 imageCropRect.width, imageCropRect.height); |
517 var dx = | 517 var dx = |
518 (imageCropRect.left + imageCropRect.width / 2 - imageWidth / 2) * | 518 (imageCropRect.left + imageCropRect.width / 2 - imageWidth / 2) * |
519 wholeScale; | 519 wholeScale; |
520 var dy = | 520 var dy = |
521 (imageCropRect.top + imageCropRect.height / 2 - imageHeight / 2) * | 521 (imageCropRect.top + imageCropRect.height / 2 - imageHeight / 2) * |
522 wholeScale; | 522 wholeScale; |
523 return [ | 523 return [ |
524 'translate(' + dx + 'px,' + dy + 'px)', | 524 'translate(' + dx + 'px,' + dy + 'px)', |
525 'scale(' + wholeScale / croppedScale + ')', | 525 'scale(' + wholeScale / croppedScale + ')', |
526 this.getTransformation() | 526 this.getTransformation() |
527 ].join(' '); | 527 ].join(' '); |
528 }; | 528 }; |
529 | 529 |
530 /** | 530 /** |
531 * Obtains CSS transformaton that makes the image fit to the screen rectangle. | 531 * Obtains CSS transformation that makes the image fit to the screen rectangle. |
532 * | 532 * |
533 * @param {Rect} screenRect Screen rectangle. | 533 * @param {Rect} screenRect Screen rectangle. |
534 * @return {string} Transformation description. | 534 * @return {string} Transformation description. |
535 */ | 535 */ |
536 Viewport.prototype.getScreenRectTransformForImage = function(screenRect) { | 536 Viewport.prototype.getScreenRectTransformForImage = function(screenRect) { |
537 var imageBounds = this.getImageElementBoundsOnScreen(); | 537 var imageBounds = this.getImageElementBoundsOnScreen(); |
538 var scaleX = screenRect.width / imageBounds.width; | 538 var scaleX = screenRect.width / imageBounds.width; |
539 var scaleY = screenRect.height / imageBounds.height; | 539 var scaleY = screenRect.height / imageBounds.height; |
540 var screenWidth = this.screenBounds_.width; | 540 var screenWidth = this.screenBounds_.width; |
541 var screenHeight = this.screenBounds_.height; | 541 var screenHeight = this.screenBounds_.height; |
542 var dx = screenRect.left + screenRect.width / 2 - screenWidth / 2; | 542 var dx = screenRect.left + screenRect.width / 2 - screenWidth / 2; |
543 var dy = screenRect.top + screenRect.height / 2 - screenHeight / 2; | 543 var dy = screenRect.top + screenRect.height / 2 - screenHeight / 2; |
544 return [ | 544 return [ |
545 'translate(' + dx + 'px,' + dy + 'px)', | 545 'translate(' + dx + 'px,' + dy + 'px)', |
546 'scale(' + scaleX + ',' + scaleY + ')', | 546 'scale(' + scaleX + ',' + scaleY + ')', |
547 this.getTransformation() | 547 this.getTransformation() |
548 ].join(' '); | 548 ].join(' '); |
549 }; | 549 }; |
OLD | NEW |