mirror of
https://github.com/openseadragon/openseadragon.git
synced 2024-11-24 22:26:10 +03:00
564 lines
19 KiB
JavaScript
564 lines
19 KiB
JavaScript
/*
|
|
* OpenSeadragon - Rect
|
|
*
|
|
* Copyright (C) 2009 CodePlex Foundation
|
|
* Copyright (C) 2010-2013 OpenSeadragon contributors
|
|
*
|
|
* Redistribution and use in source and binary forms, with or without
|
|
* modification, are permitted provided that the following conditions are
|
|
* met:
|
|
*
|
|
* - Redistributions of source code must retain the above copyright notice,
|
|
* this list of conditions and the following disclaimer.
|
|
*
|
|
* - Redistributions in binary form must reproduce the above copyright
|
|
* notice, this list of conditions and the following disclaimer in the
|
|
* documentation and/or other materials provided with the distribution.
|
|
*
|
|
* - Neither the name of CodePlex Foundation nor the names of its
|
|
* contributors may be used to endorse or promote products derived from
|
|
* this software without specific prior written permission.
|
|
*
|
|
* THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS
|
|
* "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT
|
|
* LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR
|
|
* A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT
|
|
* OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL,
|
|
* SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED
|
|
* TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR
|
|
* PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF
|
|
* LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING
|
|
* NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF THIS
|
|
* SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
|
|
*/
|
|
|
|
(function($) {
|
|
|
|
/**
|
|
* @class Rect
|
|
* @classdesc A Rectangle is described by it top left coordinates (x, y), width,
|
|
* height and degrees of rotation around (x, y).
|
|
* Note that the coordinate system used is the one commonly used with images:
|
|
* x increases when going to the right
|
|
* y increases when going to the bottom
|
|
* degrees increases clockwise with 0 being the horizontal
|
|
*
|
|
* The constructor normalizes the rectangle to always have 0 <= degrees < 90
|
|
*
|
|
* @memberof OpenSeadragon
|
|
* @param {Number} [x=0] The vector component 'x'.
|
|
* @param {Number} [y=0] The vector component 'y'.
|
|
* @param {Number} [width=0] The vector component 'width'.
|
|
* @param {Number} [height=0] The vector component 'height'.
|
|
* @param {Number} [degrees=0] Rotation of the rectangle around (x,y) in degrees.
|
|
*/
|
|
$.Rect = function(x, y, width, height, degrees) {
|
|
/**
|
|
* The vector component 'x'.
|
|
* @member {Number} x
|
|
* @memberof OpenSeadragon.Rect#
|
|
*/
|
|
this.x = typeof (x) === "number" ? x : 0;
|
|
/**
|
|
* The vector component 'y'.
|
|
* @member {Number} y
|
|
* @memberof OpenSeadragon.Rect#
|
|
*/
|
|
this.y = typeof (y) === "number" ? y : 0;
|
|
/**
|
|
* The vector component 'width'.
|
|
* @member {Number} width
|
|
* @memberof OpenSeadragon.Rect#
|
|
*/
|
|
this.width = typeof (width) === "number" ? width : 0;
|
|
/**
|
|
* The vector component 'height'.
|
|
* @member {Number} height
|
|
* @memberof OpenSeadragon.Rect#
|
|
*/
|
|
this.height = typeof (height) === "number" ? height : 0;
|
|
|
|
/**
|
|
* The rotation of the rectangle, in degrees.
|
|
* @member {Number} degrees
|
|
* @memberof OpenSeadragon.Rect#
|
|
*/
|
|
this.degrees = typeof (degrees) === "number" ? degrees : 0;
|
|
|
|
// Normalizes the rectangle.
|
|
this.degrees = $.positiveModulo(this.degrees, 360);
|
|
var newTopLeft, newWidth;
|
|
if (this.degrees >= 270) {
|
|
newTopLeft = this.getTopRight();
|
|
this.x = newTopLeft.x;
|
|
this.y = newTopLeft.y;
|
|
newWidth = this.height;
|
|
this.height = this.width;
|
|
this.width = newWidth;
|
|
this.degrees -= 270;
|
|
} else if (this.degrees >= 180) {
|
|
newTopLeft = this.getBottomRight();
|
|
this.x = newTopLeft.x;
|
|
this.y = newTopLeft.y;
|
|
this.degrees -= 180;
|
|
} else if (this.degrees >= 90) {
|
|
newTopLeft = this.getBottomLeft();
|
|
this.x = newTopLeft.x;
|
|
this.y = newTopLeft.y;
|
|
newWidth = this.height;
|
|
this.height = this.width;
|
|
this.width = newWidth;
|
|
this.degrees -= 90;
|
|
}
|
|
};
|
|
|
|
/**
|
|
* Builds a rectangle having the 3 specified points as summits.
|
|
* @static
|
|
* @memberof OpenSeadragon.Rect
|
|
* @param {OpenSeadragon.Point} topLeft
|
|
* @param {OpenSeadragon.Point} topRight
|
|
* @param {OpenSeadragon.Point} bottomLeft
|
|
* @returns {OpenSeadragon.Rect}
|
|
*/
|
|
$.Rect.fromSummits = function(topLeft, topRight, bottomLeft) {
|
|
var width = topLeft.distanceTo(topRight);
|
|
var height = topLeft.distanceTo(bottomLeft);
|
|
var diff = topRight.minus(topLeft);
|
|
var radians = Math.atan(diff.y / diff.x);
|
|
if (diff.x < 0) {
|
|
radians += Math.PI;
|
|
} else if (diff.y < 0) {
|
|
radians += 2 * Math.PI;
|
|
}
|
|
return new $.Rect(
|
|
topLeft.x,
|
|
topLeft.y,
|
|
width,
|
|
height,
|
|
radians / Math.PI * 180);
|
|
};
|
|
|
|
/** @lends OpenSeadragon.Rect.prototype */
|
|
$.Rect.prototype = {
|
|
/**
|
|
* @function
|
|
* @returns {OpenSeadragon.Rect} a duplicate of this Rect
|
|
*/
|
|
clone: function() {
|
|
return new $.Rect(
|
|
this.x,
|
|
this.y,
|
|
this.width,
|
|
this.height,
|
|
this.degrees);
|
|
},
|
|
|
|
/**
|
|
* The aspect ratio is simply the ratio of width to height.
|
|
* @function
|
|
* @returns {Number} The ratio of width to height.
|
|
*/
|
|
getAspectRatio: function() {
|
|
return this.width / this.height;
|
|
},
|
|
|
|
/**
|
|
* Provides the coordinates of the upper-left corner of the rectangle as a
|
|
* point.
|
|
* @function
|
|
* @returns {OpenSeadragon.Point} The coordinate of the upper-left corner of
|
|
* the rectangle.
|
|
*/
|
|
getTopLeft: function() {
|
|
return new $.Point(
|
|
this.x,
|
|
this.y
|
|
);
|
|
},
|
|
|
|
/**
|
|
* Provides the coordinates of the bottom-right corner of the rectangle as a
|
|
* point.
|
|
* @function
|
|
* @returns {OpenSeadragon.Point} The coordinate of the bottom-right corner of
|
|
* the rectangle.
|
|
*/
|
|
getBottomRight: function() {
|
|
return new $.Point(this.x + this.width, this.y + this.height)
|
|
.rotate(this.degrees, this.getTopLeft());
|
|
},
|
|
|
|
/**
|
|
* Provides the coordinates of the top-right corner of the rectangle as a
|
|
* point.
|
|
* @function
|
|
* @returns {OpenSeadragon.Point} The coordinate of the top-right corner of
|
|
* the rectangle.
|
|
*/
|
|
getTopRight: function() {
|
|
return new $.Point(this.x + this.width, this.y)
|
|
.rotate(this.degrees, this.getTopLeft());
|
|
},
|
|
|
|
/**
|
|
* Provides the coordinates of the bottom-left corner of the rectangle as a
|
|
* point.
|
|
* @function
|
|
* @returns {OpenSeadragon.Point} The coordinate of the bottom-left corner of
|
|
* the rectangle.
|
|
*/
|
|
getBottomLeft: function() {
|
|
return new $.Point(this.x, this.y + this.height)
|
|
.rotate(this.degrees, this.getTopLeft());
|
|
},
|
|
|
|
/**
|
|
* Computes the center of the rectangle.
|
|
* @function
|
|
* @returns {OpenSeadragon.Point} The center of the rectangle as represented
|
|
* as represented by a 2-dimensional vector (x,y)
|
|
*/
|
|
getCenter: function() {
|
|
return new $.Point(
|
|
this.x + this.width / 2.0,
|
|
this.y + this.height / 2.0
|
|
).rotate(this.degrees, this.getTopLeft());
|
|
},
|
|
|
|
/**
|
|
* Returns the width and height component as a vector OpenSeadragon.Point
|
|
* @function
|
|
* @returns {OpenSeadragon.Point} The 2 dimensional vector representing the
|
|
* the width and height of the rectangle.
|
|
*/
|
|
getSize: function() {
|
|
return new $.Point(this.width, this.height);
|
|
},
|
|
|
|
/**
|
|
* Determines if two Rectangles have equivalent components.
|
|
* @function
|
|
* @param {OpenSeadragon.Rect} rectangle The Rectangle to compare to.
|
|
* @return {Boolean} 'true' if all components are equal, otherwise 'false'.
|
|
*/
|
|
equals: function(other) {
|
|
return (other instanceof $.Rect) &&
|
|
this.x === other.x &&
|
|
this.y === other.y &&
|
|
this.width === other.width &&
|
|
this.height === other.height &&
|
|
this.degrees === other.degrees;
|
|
},
|
|
|
|
/**
|
|
* Multiply all dimensions (except degrees) in this Rect by a factor and
|
|
* return a new Rect.
|
|
* @function
|
|
* @param {Number} factor The factor to multiply vector components.
|
|
* @returns {OpenSeadragon.Rect} A new rect representing the multiplication
|
|
* of the vector components by the factor
|
|
*/
|
|
times: function(factor) {
|
|
return new $.Rect(
|
|
this.x * factor,
|
|
this.y * factor,
|
|
this.width * factor,
|
|
this.height * factor,
|
|
this.degrees);
|
|
},
|
|
|
|
/**
|
|
* Translate/move this Rect by a vector and return new Rect.
|
|
* @function
|
|
* @param {OpenSeadragon.Point} delta The translation vector.
|
|
* @returns {OpenSeadragon.Rect} A new rect with altered position
|
|
*/
|
|
translate: function(delta) {
|
|
return new $.Rect(
|
|
this.x + delta.x,
|
|
this.y + delta.y,
|
|
this.width,
|
|
this.height,
|
|
this.degrees);
|
|
},
|
|
|
|
/**
|
|
* Returns the smallest rectangle that will contain this and the given
|
|
* rectangle bounding boxes.
|
|
* @param {OpenSeadragon.Rect} rect
|
|
* @return {OpenSeadragon.Rect} The new rectangle.
|
|
*/
|
|
union: function(rect) {
|
|
var thisBoundingBox = this.getBoundingBox();
|
|
var otherBoundingBox = rect.getBoundingBox();
|
|
|
|
var left = Math.min(thisBoundingBox.x, otherBoundingBox.x);
|
|
var top = Math.min(thisBoundingBox.y, otherBoundingBox.y);
|
|
var right = Math.max(
|
|
thisBoundingBox.x + thisBoundingBox.width,
|
|
otherBoundingBox.x + otherBoundingBox.width);
|
|
var bottom = Math.max(
|
|
thisBoundingBox.y + thisBoundingBox.height,
|
|
otherBoundingBox.y + otherBoundingBox.height);
|
|
|
|
return new $.Rect(
|
|
left,
|
|
top,
|
|
right - left,
|
|
bottom - top);
|
|
},
|
|
|
|
/**
|
|
* Returns the bounding box of the intersection of this rectangle with the
|
|
* given rectangle.
|
|
* @param {OpenSeadragon.Rect} rect
|
|
* @return {OpenSeadragon.Rect} the bounding box of the intersection
|
|
* or null if the rectangles don't intersect.
|
|
*/
|
|
intersection: function(rect) {
|
|
// Simplified version of Weiler Atherton clipping algorithm
|
|
// https://en.wikipedia.org/wiki/Weiler%E2%80%93Atherton_clipping_algorithm
|
|
// Because we just want the bounding box of the intersection,
|
|
// we can just compute the bounding box of:
|
|
// 1. all the summits of this which are inside rect
|
|
// 2. all the summits of rect which are inside this
|
|
// 3. all the intersections of rect and this
|
|
var EPSILON = 0.0000000001;
|
|
|
|
var intersectionPoints = [];
|
|
|
|
var thisTopLeft = this.getTopLeft();
|
|
if (rect.containsPoint(thisTopLeft, EPSILON)) {
|
|
intersectionPoints.push(thisTopLeft);
|
|
}
|
|
var thisTopRight = this.getTopRight();
|
|
if (rect.containsPoint(thisTopRight, EPSILON)) {
|
|
intersectionPoints.push(thisTopRight);
|
|
}
|
|
var thisBottomLeft = this.getBottomLeft();
|
|
if (rect.containsPoint(thisBottomLeft, EPSILON)) {
|
|
intersectionPoints.push(thisBottomLeft);
|
|
}
|
|
var thisBottomRight = this.getBottomRight();
|
|
if (rect.containsPoint(thisBottomRight, EPSILON)) {
|
|
intersectionPoints.push(thisBottomRight);
|
|
}
|
|
|
|
var rectTopLeft = rect.getTopLeft();
|
|
if (this.containsPoint(rectTopLeft, EPSILON)) {
|
|
intersectionPoints.push(rectTopLeft);
|
|
}
|
|
var rectTopRight = rect.getTopRight();
|
|
if (this.containsPoint(rectTopRight, EPSILON)) {
|
|
intersectionPoints.push(rectTopRight);
|
|
}
|
|
var rectBottomLeft = rect.getBottomLeft();
|
|
if (this.containsPoint(rectBottomLeft, EPSILON)) {
|
|
intersectionPoints.push(rectBottomLeft);
|
|
}
|
|
var rectBottomRight = rect.getBottomRight();
|
|
if (this.containsPoint(rectBottomRight, EPSILON)) {
|
|
intersectionPoints.push(rectBottomRight);
|
|
}
|
|
|
|
var thisSegments = this._getSegments();
|
|
var rectSegments = rect._getSegments();
|
|
for (var i = 0; i < thisSegments.length; i++) {
|
|
var thisSegment = thisSegments[i];
|
|
for (var j = 0; j < rectSegments.length; j++) {
|
|
var rectSegment = rectSegments[j];
|
|
var intersect = getIntersection(thisSegment[0], thisSegment[1],
|
|
rectSegment[0], rectSegment[1]);
|
|
if (intersect) {
|
|
intersectionPoints.push(intersect);
|
|
}
|
|
}
|
|
}
|
|
|
|
// Get intersection point of segments [a,b] and [c,d]
|
|
function getIntersection(a, b, c, d) {
|
|
// http://stackoverflow.com/a/1968345/1440403
|
|
var abVector = b.minus(a);
|
|
var cdVector = d.minus(c);
|
|
|
|
var denom = -cdVector.x * abVector.y + abVector.x * cdVector.y;
|
|
if (denom === 0) {
|
|
return null;
|
|
}
|
|
|
|
var s = (abVector.x * (a.y - c.y) - abVector.y * (a.x - c.x)) / denom;
|
|
var t = (cdVector.x * (a.y - c.y) - cdVector.y * (a.x - c.x)) / denom;
|
|
|
|
if (-EPSILON <= s && s <= 1 - EPSILON &&
|
|
-EPSILON <= t && t <= 1 - EPSILON) {
|
|
return new $.Point(a.x + t * abVector.x, a.y + t * abVector.y);
|
|
}
|
|
return null;
|
|
}
|
|
|
|
if (intersectionPoints.length === 0) {
|
|
return null;
|
|
}
|
|
|
|
var minX = intersectionPoints[0].x;
|
|
var maxX = intersectionPoints[0].x;
|
|
var minY = intersectionPoints[0].y;
|
|
var maxY = intersectionPoints[0].y;
|
|
for (var k = 1; k < intersectionPoints.length; k++) {
|
|
var point = intersectionPoints[k];
|
|
if (point.x < minX) {
|
|
minX = point.x;
|
|
}
|
|
if (point.x > maxX) {
|
|
maxX = point.x;
|
|
}
|
|
if (point.y < minY) {
|
|
minY = point.y;
|
|
}
|
|
if (point.y > maxY) {
|
|
maxY = point.y;
|
|
}
|
|
}
|
|
return new $.Rect(minX, minY, maxX - minX, maxY - minY);
|
|
},
|
|
|
|
// private
|
|
_getSegments: function() {
|
|
var topLeft = this.getTopLeft();
|
|
var topRight = this.getTopRight();
|
|
var bottomLeft = this.getBottomLeft();
|
|
var bottomRight = this.getBottomRight();
|
|
return [[topLeft, topRight],
|
|
[topRight, bottomRight],
|
|
[bottomRight, bottomLeft],
|
|
[bottomLeft, topLeft]];
|
|
},
|
|
|
|
/**
|
|
* Rotates a rectangle around a point.
|
|
* @function
|
|
* @param {Number} degrees The angle in degrees to rotate.
|
|
* @param {OpenSeadragon.Point} [pivot] The point about which to rotate.
|
|
* Defaults to the center of the rectangle.
|
|
* @return {OpenSeadragon.Rect}
|
|
*/
|
|
rotate: function(degrees, pivot) {
|
|
degrees = $.positiveModulo(degrees, 360);
|
|
if (degrees === 0) {
|
|
return this.clone();
|
|
}
|
|
|
|
pivot = pivot || this.getCenter();
|
|
var newTopLeft = this.getTopLeft().rotate(degrees, pivot);
|
|
var newTopRight = this.getTopRight().rotate(degrees, pivot);
|
|
|
|
var diff = newTopRight.minus(newTopLeft);
|
|
// Handle floating point error
|
|
diff = diff.apply(function(x) {
|
|
var EPSILON = 1e-15;
|
|
return Math.abs(x) < EPSILON ? 0 : x;
|
|
});
|
|
var radians = Math.atan(diff.y / diff.x);
|
|
if (diff.x < 0) {
|
|
radians += Math.PI;
|
|
} else if (diff.y < 0) {
|
|
radians += 2 * Math.PI;
|
|
}
|
|
return new $.Rect(
|
|
newTopLeft.x,
|
|
newTopLeft.y,
|
|
this.width,
|
|
this.height,
|
|
radians / Math.PI * 180);
|
|
},
|
|
|
|
/**
|
|
* Retrieves the smallest horizontal (degrees=0) rectangle which contains
|
|
* this rectangle.
|
|
* @returns {OpenSeadragon.Rect}
|
|
*/
|
|
getBoundingBox: function() {
|
|
if (this.degrees === 0) {
|
|
return this.clone();
|
|
}
|
|
var topLeft = this.getTopLeft();
|
|
var topRight = this.getTopRight();
|
|
var bottomLeft = this.getBottomLeft();
|
|
var bottomRight = this.getBottomRight();
|
|
var minX = Math.min(topLeft.x, topRight.x, bottomLeft.x, bottomRight.x);
|
|
var maxX = Math.max(topLeft.x, topRight.x, bottomLeft.x, bottomRight.x);
|
|
var minY = Math.min(topLeft.y, topRight.y, bottomLeft.y, bottomRight.y);
|
|
var maxY = Math.max(topLeft.y, topRight.y, bottomLeft.y, bottomRight.y);
|
|
return new $.Rect(
|
|
minX,
|
|
minY,
|
|
maxX - minX,
|
|
maxY - minY);
|
|
},
|
|
|
|
/**
|
|
* Retrieves the smallest horizontal (degrees=0) rectangle which contains
|
|
* this rectangle and has integers x, y, width and height
|
|
* @returns {OpenSeadragon.Rect}
|
|
*/
|
|
getIntegerBoundingBox: function() {
|
|
var boundingBox = this.getBoundingBox();
|
|
var x = Math.floor(boundingBox.x);
|
|
var y = Math.floor(boundingBox.y);
|
|
var width = Math.ceil(boundingBox.width + boundingBox.x - x);
|
|
var height = Math.ceil(boundingBox.height + boundingBox.y - y);
|
|
return new $.Rect(x, y, width, height);
|
|
},
|
|
|
|
/**
|
|
* Determines whether a point is inside this rectangle (edge included).
|
|
* @function
|
|
* @param {OpenSeadragon.Point} point
|
|
* @param {Number} [epsilon=0] the margin of error allowed
|
|
* @returns {Boolean} true if the point is inside this rectangle, false
|
|
* otherwise.
|
|
*/
|
|
containsPoint: function(point, epsilon) {
|
|
epsilon = epsilon || 0;
|
|
|
|
// See http://stackoverflow.com/a/2752754/1440403 for explanation
|
|
var topLeft = this.getTopLeft();
|
|
var topRight = this.getTopRight();
|
|
var bottomLeft = this.getBottomLeft();
|
|
var topDiff = topRight.minus(topLeft);
|
|
var leftDiff = bottomLeft.minus(topLeft);
|
|
|
|
return ((point.x - topLeft.x) * topDiff.x +
|
|
(point.y - topLeft.y) * topDiff.y >= -epsilon) &&
|
|
|
|
((point.x - topRight.x) * topDiff.x +
|
|
(point.y - topRight.y) * topDiff.y <= epsilon) &&
|
|
|
|
((point.x - topLeft.x) * leftDiff.x +
|
|
(point.y - topLeft.y) * leftDiff.y >= -epsilon) &&
|
|
|
|
((point.x - bottomLeft.x) * leftDiff.x +
|
|
(point.y - bottomLeft.y) * leftDiff.y <= epsilon);
|
|
},
|
|
|
|
/**
|
|
* Provides a string representation of the rectangle which is useful for
|
|
* debugging.
|
|
* @function
|
|
* @returns {String} A string representation of the rectangle.
|
|
*/
|
|
toString: function() {
|
|
return "[" +
|
|
(Math.round(this.x * 100) / 100) + ", " +
|
|
(Math.round(this.y * 100) / 100) + ", " +
|
|
(Math.round(this.width * 100) / 100) + "x" +
|
|
(Math.round(this.height * 100) / 100) + ", " +
|
|
(Math.round(this.degrees * 100) / 100) + "deg" +
|
|
"]";
|
|
}
|
|
};
|
|
|
|
|
|
}(OpenSeadragon));
|