From cf7ff841a73eedcf71682e2a81ff993bdfc1ec2d Mon Sep 17 00:00:00 2001 From: Andreas Hocevar Date: Wed, 22 Jun 2016 09:14:53 +0200 Subject: [PATCH 1/7] Remove use of goog.vec.* --- externs/olx.js | 4 +- src/ol/dom/dom.js | 30 +-- src/ol/geom/flat/transformflatgeom.js | 14 +- src/ol/geom/simplegeometry.js | 2 +- src/ol/map.js | 15 +- src/ol/matrix.js | 247 ++++++++++++++++++ src/ol/render.js | 5 +- src/ol/render/canvas/canvasimmediate.js | 31 +-- src/ol/render/canvas/canvasreplay.js | 75 ++---- src/ol/render/webgl/webglreplay.js | 30 +-- .../canvas/canvasimagelayerrenderer.js | 17 +- src/ol/renderer/canvas/canvaslayerrenderer.js | 41 ++- src/ol/renderer/canvas/canvasmaprenderer.js | 11 +- .../canvas/canvastilelayerrenderer.js | 9 +- .../canvas/canvasvectortilelayerrenderer.js | 13 +- src/ol/renderer/dom/domimagelayerrenderer.js | 17 +- src/ol/renderer/dom/dommaprenderer.js | 9 +- src/ol/renderer/dom/domtilelayerrenderer.js | 17 +- src/ol/renderer/dom/domvectorlayerrenderer.js | 17 +- src/ol/renderer/layerrenderer.js | 5 +- src/ol/renderer/maprenderer.js | 7 +- .../renderer/webgl/webglimagelayerrenderer.js | 69 +++-- src/ol/renderer/webgl/webgllayerrenderer.js | 21 +- .../renderer/webgl/webgltilelayerrenderer.js | 38 ++- .../webgl/webglvectorlayerrenderer.js | 4 +- src/ol/source/imagevectorsource.js | 11 +- src/ol/source/rastersource.js | 6 +- src/ol/typedefs.js | 8 + src/ol/vec/mat4.js | 93 +------ test/spec/ol/dom/dom.test.js | 6 +- test/spec/ol/extent.test.js | 1 - .../ol/geom/flat/transformflatgeom.test.js | 8 +- test/spec/ol/render.test.js | 6 +- test/spec/ol/render/canvasimmediate.test.js | 7 +- .../canvas/canvaslayerrenderer.test.js | 8 +- .../webgl/webglimagelayerrenderer.test.js | 21 +- 36 files changed, 511 insertions(+), 412 deletions(-) create mode 100644 src/ol/matrix.js diff --git a/externs/olx.js b/externs/olx.js index ea8cc2fb2e..0102779c48 100644 --- a/externs/olx.js +++ b/externs/olx.js @@ -7383,7 +7383,7 @@ olx.view.FitOptions.prototype.maxZoom; /** * @typedef {{animate: boolean, * attributions: Object., - * coordinateToPixelMatrix: ol.vec.Mat4.Number, + * coordinateToPixelMatrix: ol.Matrix, * extent: (null|ol.Extent), * focus: ol.Coordinate, * index: number, @@ -7391,7 +7391,7 @@ olx.view.FitOptions.prototype.maxZoom; * layerStatesArray: Array., * logos: Object., * pixelRatio: number, - * pixelToCoordinateMatrix: ol.vec.Mat4.Number, + * pixelToCoordinateMatrix: ol.Matrix, * postRenderFunctions: Array., * size: ol.Size, * skippedFeatureUids: Object., diff --git a/src/ol/dom/dom.js b/src/ol/dom/dom.js index 9baa23a46b..222c838e3e 100644 --- a/src/ol/dom/dom.js +++ b/src/ol/dom/dom.js @@ -2,8 +2,8 @@ goog.provide('ol.dom'); goog.require('goog.asserts'); goog.require('goog.userAgent'); -goog.require('goog.vec.Mat4'); goog.require('ol'); +goog.require('ol.vec.Mat4'); /** @@ -127,7 +127,7 @@ ol.dom.setTransform = function(element, value) { /** * @param {!Element} element Element. - * @param {goog.vec.Mat4.Number} transform Matrix. + * @param {ol.Matrix} transform Matrix. * @param {number=} opt_precision Precision. */ ol.dom.transformElement2D = function(element, transform, opt_precision) { @@ -136,45 +136,35 @@ ol.dom.transformElement2D = function(element, transform, opt_precision) { var i; if (ol.dom.canUseCssTransform3D()) { var value3D; - + var transform3D = ol.vec.Mat4.fromMatrix(transform); if (opt_precision !== undefined) { /** @type {Array.} */ var strings3D = new Array(16); for (i = 0; i < 16; ++i) { - strings3D[i] = transform[i].toFixed(opt_precision); + strings3D[i] = transform3D[i].toFixed(opt_precision); } value3D = strings3D.join(','); } else { - value3D = transform.join(','); + value3D = transform3D.join(','); } ol.dom.setTransform(element, 'matrix3d(' + value3D + ')'); } else if (ol.dom.canUseCssTransform()) { - /** @type {Array.} */ - var transform2D = [ - goog.vec.Mat4.getElement(transform, 0, 0), - goog.vec.Mat4.getElement(transform, 1, 0), - goog.vec.Mat4.getElement(transform, 0, 1), - goog.vec.Mat4.getElement(transform, 1, 1), - goog.vec.Mat4.getElement(transform, 0, 3), - goog.vec.Mat4.getElement(transform, 1, 3) - ]; + /** @type {string} */ var value2D; if (opt_precision !== undefined) { /** @type {Array.} */ var strings2D = new Array(6); for (i = 0; i < 6; ++i) { - strings2D[i] = transform2D[i].toFixed(opt_precision); + strings2D[i] = transform[i].toFixed(opt_precision); } value2D = strings2D.join(','); } else { - value2D = transform2D.join(','); + value2D = transform.join(','); } ol.dom.setTransform(element, 'matrix(' + value2D + ')'); } else { - element.style.left = - Math.round(goog.vec.Mat4.getElement(transform, 0, 3)) + 'px'; - element.style.top = - Math.round(goog.vec.Mat4.getElement(transform, 1, 3)) + 'px'; + element.style.left = Math.round(transform[4]) + 'px'; + element.style.top = Math.round(transform[5]) + 'px'; // TODO: Add scaling here. This isn't quite as simple as multiplying // width/height, because that only changes the container size, not the diff --git a/src/ol/geom/flat/transformflatgeom.js b/src/ol/geom/flat/transformflatgeom.js index 29ca54a240..b28a9f68c2 100644 --- a/src/ol/geom/flat/transformflatgeom.js +++ b/src/ol/geom/flat/transformflatgeom.js @@ -1,32 +1,24 @@ goog.provide('ol.geom.flat.transform'); -goog.require('goog.vec.Mat4'); - /** * @param {Array.} flatCoordinates Flat coordinates. * @param {number} offset Offset. * @param {number} end End. * @param {number} stride Stride. - * @param {goog.vec.Mat4.Number} transform Transform. + * @param {ol.Matrix} transform Transform. * @param {Array.=} opt_dest Destination. * @return {Array.} Transformed coordinates. */ ol.geom.flat.transform.transform2D = function(flatCoordinates, offset, end, stride, transform, opt_dest) { - var m00 = goog.vec.Mat4.getElement(transform, 0, 0); - var m10 = goog.vec.Mat4.getElement(transform, 1, 0); - var m01 = goog.vec.Mat4.getElement(transform, 0, 1); - var m11 = goog.vec.Mat4.getElement(transform, 1, 1); - var m03 = goog.vec.Mat4.getElement(transform, 0, 3); - var m13 = goog.vec.Mat4.getElement(transform, 1, 3); var dest = opt_dest ? opt_dest : []; var i = 0; var j; for (j = offset; j < end; j += stride) { var x = flatCoordinates[j]; var y = flatCoordinates[j + 1]; - dest[i++] = m00 * x + m01 * y + m03; - dest[i++] = m10 * x + m11 * y + m13; + dest[i++] = transform[0] * x + transform[2] * y + transform[4]; + dest[i++] = transform[1] * x + transform[3] * y + transform[5]; } if (opt_dest && dest.length != i) { dest.length = i; diff --git a/src/ol/geom/simplegeometry.js b/src/ol/geom/simplegeometry.js index ba60eea240..c8c33f813f 100644 --- a/src/ol/geom/simplegeometry.js +++ b/src/ol/geom/simplegeometry.js @@ -294,7 +294,7 @@ ol.geom.SimpleGeometry.prototype.translate = function(deltaX, deltaY) { /** * @param {ol.geom.SimpleGeometry} simpleGeometry Simple geometry. - * @param {goog.vec.Mat4.Number} transform Transform. + * @param {ol.Matrix} transform Transform. * @param {Array.=} opt_dest Destination. * @return {Array.} Transformed flat coordinates. */ diff --git a/src/ol/map.js b/src/ol/map.js index 831a6831c8..5042f91bac 100644 --- a/src/ol/map.js +++ b/src/ol/map.js @@ -7,7 +7,6 @@ goog.provide('ol.MapProperty'); goog.require('goog.asserts'); goog.require('goog.async.nextTick'); -goog.require('goog.vec.Mat4'); goog.require('ol.Collection'); goog.require('ol.CollectionEventType'); goog.require('ol.MapBrowserEvent'); @@ -34,6 +33,7 @@ goog.require('ol.has'); goog.require('ol.interaction'); goog.require('ol.layer.Base'); goog.require('ol.layer.Group'); +goog.require('ol.matrix'); goog.require('ol.object'); goog.require('ol.proj'); goog.require('ol.proj.common'); @@ -43,7 +43,6 @@ goog.require('ol.renderer.dom.Map'); goog.require('ol.renderer.webgl.Map'); goog.require('ol.size'); goog.require('ol.structs.PriorityQueue'); -goog.require('ol.vec.Mat4'); /** @@ -203,15 +202,15 @@ ol.Map = function(options) { /** * @private - * @type {goog.vec.Mat4.Number} + * @type {ol.Matrix} */ - this.coordinateToPixelMatrix_ = goog.vec.Mat4.createNumber(); + this.coordinateToPixelMatrix_ = ol.matrix.create(); /** * @private - * @type {goog.vec.Mat4.Number} + * @type {ol.Matrix} */ - this.pixelToCoordinateMatrix_ = goog.vec.Mat4.createNumber(); + this.pixelToCoordinateMatrix_ = ol.matrix.create(); /** * @private @@ -765,7 +764,7 @@ ol.Map.prototype.getCoordinateFromPixel = function(pixel) { return null; } else { var vec2 = pixel.slice(); - return ol.vec.Mat4.multVec2(frameState.pixelToCoordinateMatrix, vec2, vec2); + return ol.matrix.multVec2(frameState.pixelToCoordinateMatrix, vec2, vec2); } }; @@ -854,7 +853,7 @@ ol.Map.prototype.getPixelFromCoordinate = function(coordinate) { return null; } else { var vec2 = coordinate.slice(0, 2); - return ol.vec.Mat4.multVec2(frameState.coordinateToPixelMatrix, vec2, vec2); + return ol.matrix.multVec2(frameState.coordinateToPixelMatrix, vec2, vec2); } }; diff --git a/src/ol/matrix.js b/src/ol/matrix.js new file mode 100644 index 0000000000..7fac02b363 --- /dev/null +++ b/src/ol/matrix.js @@ -0,0 +1,247 @@ +goog.provide('ol.matrix'); + +/** + * Collection of matrix transformation functions. The element order is + * compatible with the [SVGMatrix interface](https://developer.mozilla.org/en-US/docs/Web/API/SVGMatrix): + * ``` + * [ a c e ] + * [ b d f ] + * [ 0 0 1 ] + * ``` + */ + + +/** + * Create an identity matrix. + * @return {!ol.Matrix} Identity matrix. + */ +ol.matrix.create = function() { + return [1, 0, 0, 1, 0, 0]; +}; + + +/** + * Check if two matrices are equal. + * @param {!ol.Matrix} mat1 Matrix 1. + * @param {!ol.Matrix} mat2 Matrix 2. + * @return {boolean} Matrix 1 and Matrix 2 are equal. + */ +ol.matrix.equals = function(mat1, mat2) { + return mat1[0] == mat2[0] && + mat1[1] == mat2[1] && + mat1[2] == mat2[2] && + mat1[3] == mat2[3] && + mat1[4] == mat2[4] && + mat1[5] == mat2[5]; +}; + + +/** + * Resets the given matrix to an identity matrix. + * @param {!ol.Matrix} mat Matrix. + * @return {!ol.Matrix} Matrix. + */ +ol.matrix.makeIdentity = function(mat) { + return ol.matrix.setTransform(mat, 1, 0, 0, 1, 0, 0); +}; + + +/** + * Multiply two matrices with each other. + * @param {!ol.Matrix} mat1 Matrix 1. + * @param {!ol.Matrix} mat2 Matrix 2. + * @param {ol.Matrix=} opt_mat Optional matrix for the result. + * @return {!ol.Matrix} Result matrix. + */ +ol.matrix.multiply = function(mat1, mat2, opt_mat) { + var mat = opt_mat ? opt_mat : ol.matrix.create(); + ol.matrix.setTransform(mat, mat1[0], mat1[1], mat1[2], mat1[3], mat1[4], mat1[5]); + return ol.matrix.transform(mat, mat2[0], mat2[1], mat2[2], mat2[3], mat2[4], mat2[5]); +}; + +/** + * Set the transform for a given matrix. + * @param {!ol.Matrix} mat Matrix. + * @param {number} a The a component of the matrix. + * @param {number} b The b component of the matrix. + * @param {number} c The c component of the matrix. + * @param {number} d The d component of the matrix. + * @param {number} e The e component of the matrix. + * @param {number} f The f component of the matrix. + * @return {!ol.Matrix} Matrix with transform applied. + */ +ol.matrix.setTransform = function(mat, a, b, c, d, e, f) { + mat[0] = a; + mat[1] = b; + mat[2] = c; + mat[3] = d; + mat[4] = e; + mat[5] = f; + return mat; +}; + + +/** + * Set transform on one matrix from another matrix. + * @param {!ol.Matrix} mat1 Matrix to set transform to. + * @param {!ol.Matrix} mat2 Matrix to set transform from. + * @return {!ol.Matrix} mat1 with transform from mat2 applied. + */ +ol.matrix.setFromArray = function(mat1, mat2) { + mat1[0] = mat2[0]; + mat1[1] = mat2[1]; + mat1[2] = mat2[2]; + mat1[3] = mat2[3]; + mat1[4] = mat2[4]; + mat1[5] = mat2[5]; + return mat1; +}; + + +/** + * Rotates the given matrix. + * @param {!ol.Matrix} mat Matrix. + * @param {number} rotation Angle in radians. + * @return {!ol.Matrix} Rotated matrix. + */ +ol.matrix.rotate = function(mat, rotation) { + var cos = Math.cos(rotation); + var sin = Math.sin(rotation); + return ol.matrix.transform(mat, cos, sin, -sin, cos, 0, 0); +}; + + +/** + * Multiplies the given matrix with new matrix values. + * @see {@link ol.Matrix#multiply}. + * + * @param {!ol.Matrix} mat Matrix. + * @param {number} a The a component of the matrix. + * @param {number} b The b component of the matrix. + * @param {number} c The c component of the matrix. + * @param {number} d The d component of the matrix. + * @param {number} e The e component of the matrix. + * @param {number} f The f component of the matrix. + * @return {!ol.Matrix} Transformed matrix. + */ +ol.matrix.transform = function(mat, a, b, c, d, e, f) { + var matA = mat[0]; + var matB = mat[1]; + var matC = mat[2]; + var matD = mat[3]; + var matE = mat[4]; + var matF = mat[5]; + + mat[0] = matA * a + matC * b; + mat[1] = matB * a + matD * b; + mat[2] = matA * c + matC * d; + mat[3] = matB * c + matD * d; + mat[4] = matA * e + matC * f + matE; + mat[5] = matB * e + matD * f + matF; + + return mat; +}; + + +/** + * @param {!ol.Matrix} mat Matrix. + * @param {number} translateX1 Translate X1. + * @param {number} translateY1 Translate Y1. + * @param {number} scaleX Scale X. + * @param {number} scaleY Scale Y. + * @param {number} rotation Rotation. + * @param {number} translateX2 Translate X2. + * @param {number} translateY2 Translate Y2. + * @return {!ol.Matrix} Matrix. + */ +ol.matrix.makeTransform = function(mat, translateX1, translateY1, + scaleX, scaleY, rotation, translateX2, translateY2) { + ol.matrix.makeIdentity(mat); + if (translateX1 !== 0 || translateY1 !== 0) { + ol.matrix.translate(mat, translateX1, translateY1); + } + if (scaleX != 1 || scaleY != 1) { + ol.matrix.scale(mat, scaleX, scaleY); + } + if (rotation !== 0) { + ol.matrix.rotate(mat, rotation); + } + if (translateX2 !== 0 || translateY2 !== 0) { + ol.matrix.translate(mat, translateX2, translateY2); + } + return mat; +}; + + +/** + * Transforms the given vector with the given matrix storing the resulting, + * transformed vector into resultVec. + * + * @param {ol.Matrix} mat The matrix supplying the transformation. + * @param {Array.} vec The 2 element vector to transform. + * @param {Array.} resultVec The 2 element vector to receive the results + * (may be vec). + * @return {Array.} return resultVec so that operations can be + * chained together. + */ +ol.matrix.multVec2 = function(mat, vec, resultVec) { + var x = vec[0], y = vec[1]; + resultVec[0] = mat[0] * x + mat[2] * y + mat[4]; + resultVec[1] = mat[1] * x + mat[3] * y + mat[5]; + return resultVec; +}; + + +/** + * Scales the given matrix. + * @param {!ol.Matrix} mat Matrix. + * @param {number} sx Scale factor x. + * @param {number} sy Scale factor y. + * @return {!ol.Matrix} The scaled matrix. + */ +ol.matrix.scale = function(mat, sx, sy) { + return ol.matrix.transform(mat, sx, 0, 0, sy, 0, 0); +}; + + +/** + * Translate the given matrix. + * @param {!ol.Matrix} mat Matrix. + * @param {number} tx Translation x. + * @param {number} ty Translation y. + * @return {!ol.Matrix} The translated matrix. + */ +ol.matrix.translate = function(mat, tx, ty) { + return ol.matrix.transform(mat, 1, 0, 0, 1, tx, ty); +}; + + +/** + * Invert the given matrix. + * @param {!ol.Matrix} mat Matrix. + * @param {ol.Matrix=} opt_mat Optional matrix for the result. + * @return {!ol.Matrix} Inverse of the matrix. + */ +ol.matrix.invert = function(mat, opt_mat) { + var result = opt_mat ? opt_mat : ol.matrix.create(); + var det = ol.matrix.determinant(mat); + goog.asserts.assert(det !== 0, 'Matrix cannot be inverted.'); + + result[0] = mat[3] / det; + result[1] = -mat[1] / det; + result[2] = -mat[2] / det; + result[3] = mat[0] / det; + result[4] = (mat[2] * mat[5] - mat[3] * mat[4]) / det; + result[5] = -(mat[0] * mat[5] - mat[1] * mat[4]) / det; + return result; +}; + + +/** + * Returns the determinant of the given matrix. + * @param {!ol.Matrix} mat Matrix. + * @return {number} Determinant. + */ +ol.matrix.determinant = function(mat) { + return mat[0] * mat[3] - mat[1] * mat[2]; +}; diff --git a/src/ol/render.js b/src/ol/render.js index b55141bd14..81ec3fbcfa 100644 --- a/src/ol/render.js +++ b/src/ol/render.js @@ -1,8 +1,7 @@ goog.provide('ol.render'); -goog.require('goog.vec.Mat4'); +goog.require('ol.matrix'); goog.require('ol.render.canvas.Immediate'); -goog.require('ol.vec.Mat4'); /** @@ -37,7 +36,7 @@ ol.render.toContext = function(context, opt_options) { canvas.style.height = size[1] + 'px'; } var extent = [0, 0, canvas.width, canvas.height]; - var transform = ol.vec.Mat4.makeTransform2D(goog.vec.Mat4.createNumber(), + var transform = ol.matrix.makeTransform(ol.matrix.create(), 0, 0, pixelRatio, pixelRatio, 0, 0, 0); return new ol.render.canvas.Immediate(context, pixelRatio, extent, transform, 0); diff --git a/src/ol/render/canvas/canvasimmediate.js b/src/ol/render/canvas/canvasimmediate.js index b4af6db0db..e600c38cc6 100644 --- a/src/ol/render/canvas/canvasimmediate.js +++ b/src/ol/render/canvas/canvasimmediate.js @@ -5,7 +5,7 @@ goog.provide('ol.render.canvas.Immediate'); goog.require('goog.asserts'); -goog.require('goog.vec.Mat4'); +goog.require('ol.matrix'); goog.require('ol.array'); goog.require('ol.color'); goog.require('ol.colorlike'); @@ -15,7 +15,6 @@ goog.require('ol.geom.flat.transform'); goog.require('ol.has'); goog.require('ol.render.VectorContext'); goog.require('ol.render.canvas'); -goog.require('ol.vec.Mat4'); /** @@ -32,7 +31,7 @@ goog.require('ol.vec.Mat4'); * @param {CanvasRenderingContext2D} context Context. * @param {number} pixelRatio Pixel ratio. * @param {ol.Extent} extent Extent. - * @param {goog.vec.Mat4.Number} transform Transform. + * @param {ol.Matrix} transform Transform. * @param {number} viewRotation View rotation. * @struct */ @@ -59,7 +58,7 @@ ol.render.canvas.Immediate = function(context, pixelRatio, extent, transform, vi /** * @private - * @type {goog.vec.Mat4.Number} + * @type {ol.Matrix} */ this.transform_ = transform; @@ -227,9 +226,9 @@ ol.render.canvas.Immediate = function(context, pixelRatio, extent, transform, vi /** * @private - * @type {!goog.vec.Mat4.Number} + * @type {ol.Matrix} */ - this.tmpLocalTransform_ = goog.vec.Mat4.createNumber(); + this.tmpLocalTransform_ = ol.matrix.create(); }; ol.inherits(ol.render.canvas.Immediate, ol.render.VectorContext); @@ -273,16 +272,10 @@ ol.render.canvas.Immediate.prototype.drawImages_ = function(flatCoordinates, off if (rotation !== 0 || this.imageScale_ != 1) { var centerX = x + this.imageAnchorX_; var centerY = y + this.imageAnchorY_; - ol.vec.Mat4.makeTransform2D(localTransform, + ol.matrix.makeTransform(localTransform, centerX, centerY, this.imageScale_, this.imageScale_, rotation, -centerX, -centerY); - context.setTransform( - goog.vec.Mat4.getElement(localTransform, 0, 0), - goog.vec.Mat4.getElement(localTransform, 1, 0), - goog.vec.Mat4.getElement(localTransform, 0, 1), - goog.vec.Mat4.getElement(localTransform, 1, 1), - goog.vec.Mat4.getElement(localTransform, 0, 3), - goog.vec.Mat4.getElement(localTransform, 1, 3)); + context.setTransform.apply(context, localTransform); } context.drawImage(this.image_, this.imageOriginX_, this.imageOriginY_, this.imageWidth_, this.imageHeight_, x, y, @@ -326,15 +319,9 @@ ol.render.canvas.Immediate.prototype.drawText_ = function(flatCoordinates, offse var x = pixelCoordinates[offset] + this.textOffsetX_; var y = pixelCoordinates[offset + 1] + this.textOffsetY_; if (this.textRotation_ !== 0 || this.textScale_ != 1) { - var localTransform = ol.vec.Mat4.makeTransform2D(this.tmpLocalTransform_, + var localTransform = ol.matrix.makeTransform(this.tmpLocalTransform_, x, y, this.textScale_, this.textScale_, this.textRotation_, -x, -y); - context.setTransform( - goog.vec.Mat4.getElement(localTransform, 0, 0), - goog.vec.Mat4.getElement(localTransform, 1, 0), - goog.vec.Mat4.getElement(localTransform, 0, 1), - goog.vec.Mat4.getElement(localTransform, 1, 1), - goog.vec.Mat4.getElement(localTransform, 0, 3), - goog.vec.Mat4.getElement(localTransform, 1, 3)); + context.setTransform.apply(context, localTransform); } if (this.textStrokeState_) { context.strokeText(this.text_, x, y); diff --git a/src/ol/render/canvas/canvasreplay.js b/src/ol/render/canvas/canvasreplay.js index 3370db2737..74e451dfab 100644 --- a/src/ol/render/canvas/canvasreplay.js +++ b/src/ol/render/canvas/canvasreplay.js @@ -9,7 +9,7 @@ goog.provide('ol.render.canvas.ReplayGroup'); goog.provide('ol.render.canvas.TextReplay'); goog.require('goog.asserts'); -goog.require('goog.vec.Mat4'); +goog.require('ol.matrix'); goog.require('ol'); goog.require('ol.array'); goog.require('ol.color'); @@ -24,7 +24,6 @@ goog.require('ol.object'); goog.require('ol.render.IReplayGroup'); goog.require('ol.render.VectorContext'); goog.require('ol.render.canvas'); -goog.require('ol.vec.Mat4'); /** @@ -117,9 +116,9 @@ ol.render.canvas.Replay = function(tolerance, maxExtent, resolution) { /** * @private - * @type {goog.vec.Mat4.Number} + * @type {ol.Matrix} */ - this.renderedTransform_ = goog.vec.Mat4.createNumber(); + this.renderedTransform_ = ol.matrix.create(); /** * @protected @@ -135,15 +134,15 @@ ol.render.canvas.Replay = function(tolerance, maxExtent, resolution) { /** * @private - * @type {!goog.vec.Mat4.Number} + * @type {ol.Matrix} */ - this.tmpLocalTransform_ = goog.vec.Mat4.createNumber(); + this.tmpLocalTransform_ = ol.matrix.create(); /** * @private - * @type {!goog.vec.Mat4.Number} + * @type {ol.Matrix} */ - this.tmpLocalTransformInv_ = goog.vec.Mat4.createNumber(); + this.tmpLocalTransformInv_ = ol.matrix.create(); }; ol.inherits(ol.render.canvas.Replay, ol.render.VectorContext); @@ -223,7 +222,7 @@ ol.render.canvas.Replay.prototype.beginGeometry = function(geometry, feature) { * @private * @param {CanvasRenderingContext2D} context Context. * @param {number} pixelRatio Pixel ratio. - * @param {goog.vec.Mat4.Number} transform Transform. + * @param {ol.Matrix} transform Transform. * @param {number} viewRotation View rotation. * @param {Object.} skippedFeaturesHash Ids of features * to skip. @@ -240,13 +239,13 @@ ol.render.canvas.Replay.prototype.replay_ = function( instructions, featureCallback, opt_hitExtent) { /** @type {Array.} */ var pixelCoordinates; - if (ol.vec.Mat4.equals2D(transform, this.renderedTransform_)) { + if (ol.matrix.equals(transform, this.renderedTransform_)) { pixelCoordinates = this.pixelCoordinates_; } else { pixelCoordinates = ol.geom.flat.transform.transform2D( this.coordinates, 0, this.coordinates.length, 2, transform, this.pixelCoordinates_); - goog.vec.Mat4.setFromArray(this.renderedTransform_, transform); + ol.matrix.setFromArray(this.renderedTransform_, transform); goog.asserts.assert(pixelCoordinates === this.pixelCoordinates_, 'pixelCoordinates should be the same as this.pixelCoordinates_'); } @@ -332,16 +331,10 @@ ol.render.canvas.Replay.prototype.replay_ = function( if (scale != 1 || rotation !== 0) { var centerX = x + anchorX; var centerY = y + anchorY; - ol.vec.Mat4.makeTransform2D( + ol.matrix.makeTransform( localTransform, centerX, centerY, scale, scale, rotation, -centerX, -centerY); - context.transform( - goog.vec.Mat4.getElement(localTransform, 0, 0), - goog.vec.Mat4.getElement(localTransform, 1, 0), - goog.vec.Mat4.getElement(localTransform, 0, 1), - goog.vec.Mat4.getElement(localTransform, 1, 1), - goog.vec.Mat4.getElement(localTransform, 0, 3), - goog.vec.Mat4.getElement(localTransform, 1, 3)); + context.transform.apply(context, localTransform); } var alpha = context.globalAlpha; if (opacity != 1) { @@ -358,14 +351,8 @@ ol.render.canvas.Replay.prototype.replay_ = function( context.globalAlpha = alpha; } if (scale != 1 || rotation !== 0) { - goog.vec.Mat4.invert(localTransform, localTransformInv); - context.transform( - goog.vec.Mat4.getElement(localTransformInv, 0, 0), - goog.vec.Mat4.getElement(localTransformInv, 1, 0), - goog.vec.Mat4.getElement(localTransformInv, 0, 1), - goog.vec.Mat4.getElement(localTransformInv, 1, 1), - goog.vec.Mat4.getElement(localTransformInv, 0, 3), - goog.vec.Mat4.getElement(localTransformInv, 1, 3)); + ol.matrix.invert(localTransform, localTransformInv); + context.transform.apply(context, localTransformInv); } } ++i; @@ -402,15 +389,9 @@ ol.render.canvas.Replay.prototype.replay_ = function( x = pixelCoordinates[d] + offsetX; y = pixelCoordinates[d + 1] + offsetY; if (scale != 1 || rotation !== 0) { - ol.vec.Mat4.makeTransform2D( + ol.matrix.makeTransform( localTransform, x, y, scale, scale, rotation, -x, -y); - context.transform( - goog.vec.Mat4.getElement(localTransform, 0, 0), - goog.vec.Mat4.getElement(localTransform, 1, 0), - goog.vec.Mat4.getElement(localTransform, 0, 1), - goog.vec.Mat4.getElement(localTransform, 1, 1), - goog.vec.Mat4.getElement(localTransform, 0, 3), - goog.vec.Mat4.getElement(localTransform, 1, 3)); + context.transform.apply(context, localTransform); } // Support multiple lines separated by \n @@ -441,14 +422,8 @@ ol.render.canvas.Replay.prototype.replay_ = function( } if (scale != 1 || rotation !== 0) { - goog.vec.Mat4.invert(localTransform, localTransformInv); - context.transform( - goog.vec.Mat4.getElement(localTransformInv, 0, 0), - goog.vec.Mat4.getElement(localTransformInv, 1, 0), - goog.vec.Mat4.getElement(localTransformInv, 0, 1), - goog.vec.Mat4.getElement(localTransformInv, 1, 1), - goog.vec.Mat4.getElement(localTransformInv, 0, 3), - goog.vec.Mat4.getElement(localTransformInv, 1, 3)); + ol.matrix.invert(localTransform, localTransformInv); + context.transform.apply(context, localTransformInv); } } ++i; @@ -565,7 +540,7 @@ ol.render.canvas.Replay.prototype.replay_ = function( /** * @param {CanvasRenderingContext2D} context Context. * @param {number} pixelRatio Pixel ratio. - * @param {goog.vec.Mat4.Number} transform Transform. + * @param {ol.Matrix} transform Transform. * @param {number} viewRotation View rotation. * @param {Object.} skippedFeaturesHash Ids of features * to skip. @@ -580,7 +555,7 @@ ol.render.canvas.Replay.prototype.replay = function( /** * @param {CanvasRenderingContext2D} context Context. - * @param {goog.vec.Mat4.Number} transform Transform. + * @param {ol.Matrix} transform Transform. * @param {number} viewRotation View rotation. * @param {Object.} skippedFeaturesHash Ids of features * to skip. @@ -1883,9 +1858,9 @@ ol.render.canvas.ReplayGroup = function( /** * @private - * @type {!goog.vec.Mat4.Number} + * @type {ol.Matrix} */ - this.hitDetectionTransform_ = goog.vec.Mat4.createNumber(); + this.hitDetectionTransform_ = ol.matrix.create(); }; @@ -1920,7 +1895,7 @@ ol.render.canvas.ReplayGroup.prototype.forEachFeatureAtCoordinate = function( coordinate, resolution, rotation, skippedFeaturesHash, callback) { var transform = this.hitDetectionTransform_; - ol.vec.Mat4.makeTransform2D(transform, 0.5, 0.5, + ol.matrix.makeTransform(transform, 0.5, 0.5, 1 / resolution, -1 / resolution, -rotation, -coordinate[0], -coordinate[1]); @@ -1991,7 +1966,7 @@ ol.render.canvas.ReplayGroup.prototype.isEmpty = function() { /** * @param {CanvasRenderingContext2D} context Context. * @param {number} pixelRatio Pixel ratio. - * @param {goog.vec.Mat4.Number} transform Transform. + * @param {ol.Matrix} transform Transform. * @param {number} viewRotation View rotation. * @param {Object.} skippedFeaturesHash Ids of features * to skip. @@ -2044,7 +2019,7 @@ ol.render.canvas.ReplayGroup.prototype.replay = function(context, pixelRatio, /** * @private * @param {CanvasRenderingContext2D} context Context. - * @param {goog.vec.Mat4.Number} transform Transform. + * @param {ol.Matrix} transform Transform. * @param {number} viewRotation View rotation. * @param {Object.} skippedFeaturesHash Ids of features * to skip. diff --git a/src/ol/render/webgl/webglreplay.js b/src/ol/render/webgl/webglreplay.js index 687c70b2ad..a614ae537f 100644 --- a/src/ol/render/webgl/webglreplay.js +++ b/src/ol/render/webgl/webglreplay.js @@ -2,7 +2,7 @@ goog.provide('ol.render.webgl.ImageReplay'); goog.provide('ol.render.webgl.ReplayGroup'); goog.require('goog.asserts'); -goog.require('goog.vec.Mat4'); +goog.require('ol.matrix'); goog.require('ol.extent'); goog.require('ol.object'); goog.require('ol.render.IReplayGroup'); @@ -116,16 +116,16 @@ ol.render.webgl.ImageReplay = function(tolerance, maxExtent) { this.opacity_ = undefined; /** - * @type {!goog.vec.Mat4.Number} + * @type {ol.Matrix} * @private */ - this.offsetRotateMatrix_ = goog.vec.Mat4.createNumberIdentity(); + this.offsetRotateMatrix_ = ol.matrix.create(); /** - * @type {!goog.vec.Mat4.Number} + * @type {ol.Matrix} * @private */ - this.offsetScaleMatrix_ = goog.vec.Mat4.createNumberIdentity(); + this.offsetScaleMatrix_ = ol.matrix.create(); /** * @type {number|undefined} @@ -140,10 +140,10 @@ ol.render.webgl.ImageReplay = function(tolerance, maxExtent) { this.originY_ = undefined; /** - * @type {!goog.vec.Mat4.Number} + * @type {ol.Matrix} * @private */ - this.projectionMatrix_ = goog.vec.Mat4.createNumberIdentity(); + this.projectionMatrix_ = ol.matrix.create(); /** * @private @@ -553,7 +553,7 @@ ol.render.webgl.ImageReplay.prototype.replay = function(context, // set the "uniform" values var projectionMatrix = this.projectionMatrix_; - ol.vec.Mat4.makeTransform2D(projectionMatrix, + ol.matrix.makeTransform(projectionMatrix, 0.0, 0.0, 2 / (resolution * size[0]), 2 / (resolution * size[1]), @@ -561,18 +561,18 @@ ol.render.webgl.ImageReplay.prototype.replay = function(context, -(center[0] - this.origin_[0]), -(center[1] - this.origin_[1])); var offsetScaleMatrix = this.offsetScaleMatrix_; - goog.vec.Mat4.makeScale(offsetScaleMatrix, 2 / size[0], 2 / size[1], 1); + ol.matrix.makeIdentity(offsetScaleMatrix); + ol.matrix.scale(offsetScaleMatrix, 2 / size[0], 2 / size[1]); var offsetRotateMatrix = this.offsetRotateMatrix_; - goog.vec.Mat4.makeIdentity(offsetRotateMatrix); + ol.matrix.makeIdentity(offsetRotateMatrix); if (rotation !== 0) { - goog.vec.Mat4.rotateZ(offsetRotateMatrix, -rotation); + ol.matrix.rotate(offsetRotateMatrix, -rotation); } - gl.uniformMatrix4fv(locations.u_projectionMatrix, false, projectionMatrix); - gl.uniformMatrix4fv(locations.u_offsetScaleMatrix, false, offsetScaleMatrix); - gl.uniformMatrix4fv(locations.u_offsetRotateMatrix, false, - offsetRotateMatrix); + gl.uniformMatrix4fv(locations.u_projectionMatrix, false, ol.vec.Mat4.fromMatrix(projectionMatrix)); + gl.uniformMatrix4fv(locations.u_offsetScaleMatrix, false, ol.vec.Mat4.fromMatrix(offsetScaleMatrix)); + gl.uniformMatrix4fv(locations.u_offsetRotateMatrix, false, ol.vec.Mat4.fromMatrix(offsetRotateMatrix)); gl.uniform1f(locations.u_opacity, opacity); // draw! diff --git a/src/ol/renderer/canvas/canvasimagelayerrenderer.js b/src/ol/renderer/canvas/canvasimagelayerrenderer.js index b70d79d333..da32751b22 100644 --- a/src/ol/renderer/canvas/canvasimagelayerrenderer.js +++ b/src/ol/renderer/canvas/canvasimagelayerrenderer.js @@ -1,7 +1,7 @@ goog.provide('ol.renderer.canvas.ImageLayer'); goog.require('goog.asserts'); -goog.require('goog.vec.Mat4'); +goog.require('ol.matrix'); goog.require('ol.functions'); goog.require('ol.ImageBase'); goog.require('ol.ViewHint'); @@ -11,7 +11,6 @@ goog.require('ol.layer.Image'); goog.require('ol.proj'); goog.require('ol.renderer.canvas.Layer'); goog.require('ol.source.ImageVector'); -goog.require('ol.vec.Mat4'); /** @@ -31,13 +30,13 @@ ol.renderer.canvas.ImageLayer = function(imageLayer) { /** * @private - * @type {!goog.vec.Mat4.Number} + * @type {ol.Matrix} */ - this.imageTransform_ = goog.vec.Mat4.createNumber(); + this.imageTransform_ = ol.matrix.create(); /** * @private - * @type {?goog.vec.Mat4.Number} + * @type {?ol.Matrix} */ this.imageTransformInv_ = null; @@ -84,7 +83,7 @@ ol.renderer.canvas.ImageLayer.prototype.forEachLayerAtPixel = function(pixel, fr // for ImageVector sources use the original hit-detection logic, // so that for example also transparent polygons are detected var coordinate = pixel.slice(); - ol.vec.Mat4.multVec2( + ol.matrix.multVec2( frameState.pixelToCoordinateMatrix, coordinate, coordinate); var hasFeature = this.forEachFeatureAtCoordinate( coordinate, frameState, ol.functions.TRUE, this); @@ -97,8 +96,8 @@ ol.renderer.canvas.ImageLayer.prototype.forEachLayerAtPixel = function(pixel, fr } else { // for all other image sources directly check the image if (!this.imageTransformInv_) { - this.imageTransformInv_ = goog.vec.Mat4.createNumber(); - goog.vec.Mat4.invert(this.imageTransform_, this.imageTransformInv_); + this.imageTransformInv_ = ol.matrix.create(); + ol.matrix.invert(this.imageTransform_, this.imageTransformInv_); } var pixelOnCanvas = @@ -190,7 +189,7 @@ ol.renderer.canvas.ImageLayer.prototype.prepareFrame = function(frameState, laye var imagePixelRatio = image.getPixelRatio(); var scale = pixelRatio * imageResolution / (viewResolution * imagePixelRatio); - ol.vec.Mat4.makeTransform2D(this.imageTransform_, + ol.matrix.makeTransform(this.imageTransform_, pixelRatio * frameState.size[0] / 2, pixelRatio * frameState.size[1] / 2, scale, scale, diff --git a/src/ol/renderer/canvas/canvaslayerrenderer.js b/src/ol/renderer/canvas/canvaslayerrenderer.js index 852492ad4d..b4b42fa79e 100644 --- a/src/ol/renderer/canvas/canvaslayerrenderer.js +++ b/src/ol/renderer/canvas/canvaslayerrenderer.js @@ -1,7 +1,7 @@ goog.provide('ol.renderer.canvas.Layer'); goog.require('goog.asserts'); -goog.require('goog.vec.Mat4'); +goog.require('ol.matrix'); goog.require('ol.extent'); goog.require('ol.layer.Layer'); goog.require('ol.render.Event'); @@ -9,7 +9,6 @@ goog.require('ol.render.EventType'); goog.require('ol.render.canvas'); goog.require('ol.render.canvas.Immediate'); goog.require('ol.renderer.Layer'); -goog.require('ol.vec.Mat4'); /** @@ -23,9 +22,9 @@ ol.renderer.canvas.Layer = function(layer) { /** * @private - * @type {!goog.vec.Mat4.Number} + * @type {ol.Matrix} */ - this.transform_ = goog.vec.Mat4.createNumber(); + this.transform_ = ol.matrix.create(); }; ol.inherits(ol.renderer.canvas.Layer, ol.renderer.Layer); @@ -58,13 +57,13 @@ ol.renderer.canvas.Layer.prototype.composeFrame = function(frameState, layerStat var bottomRight = ol.extent.getBottomRight(extent); var bottomLeft = ol.extent.getBottomLeft(extent); - ol.vec.Mat4.multVec2(frameState.coordinateToPixelMatrix, + ol.matrix.multVec2(frameState.coordinateToPixelMatrix, topLeft, topLeft); - ol.vec.Mat4.multVec2(frameState.coordinateToPixelMatrix, + ol.matrix.multVec2(frameState.coordinateToPixelMatrix, topRight, topRight); - ol.vec.Mat4.multVec2(frameState.coordinateToPixelMatrix, + ol.matrix.multVec2(frameState.coordinateToPixelMatrix, bottomRight, bottomRight); - ol.vec.Mat4.multVec2(frameState.coordinateToPixelMatrix, + ol.matrix.multVec2(frameState.coordinateToPixelMatrix, bottomLeft, bottomLeft); context.save(); @@ -87,10 +86,10 @@ ol.renderer.canvas.Layer.prototype.composeFrame = function(frameState, layerStat // for performance reasons, context.setTransform is only used // when the view is rotated. see http://jsperf.com/canvas-transform - var dx = goog.vec.Mat4.getElement(imageTransform, 0, 3); - var dy = goog.vec.Mat4.getElement(imageTransform, 1, 3); - var dw = image.width * goog.vec.Mat4.getElement(imageTransform, 0, 0); - var dh = image.height * goog.vec.Mat4.getElement(imageTransform, 1, 1); + var dx = imageTransform[4]; + var dy = imageTransform[5]; + var dw = image.width * imageTransform[0]; + var dh = image.height * imageTransform[3]; context.drawImage(image, 0, 0, +image.width, +image.height, Math.round(dx), Math.round(dy), Math.round(dw), Math.round(dh)); context.globalAlpha = alpha; @@ -109,7 +108,7 @@ ol.renderer.canvas.Layer.prototype.composeFrame = function(frameState, layerStat * @param {ol.render.EventType} type Event type. * @param {CanvasRenderingContext2D} context Context. * @param {olx.FrameState} frameState Frame state. - * @param {goog.vec.Mat4.Number=} opt_transform Transform. + * @param {ol.Matrix=} opt_transform Transform. * @private */ ol.renderer.canvas.Layer.prototype.dispatchComposeEvent_ = function(type, context, frameState, opt_transform) { @@ -135,7 +134,7 @@ ol.renderer.canvas.Layer.prototype.dispatchComposeEvent_ = function(type, contex /** * @param {CanvasRenderingContext2D} context Context. * @param {olx.FrameState} frameState Frame state. - * @param {goog.vec.Mat4.Number=} opt_transform Transform. + * @param {ol.Matrix=} opt_transform Transform. * @protected */ ol.renderer.canvas.Layer.prototype.dispatchPostComposeEvent = function(context, frameState, opt_transform) { @@ -147,7 +146,7 @@ ol.renderer.canvas.Layer.prototype.dispatchPostComposeEvent = function(context, /** * @param {CanvasRenderingContext2D} context Context. * @param {olx.FrameState} frameState Frame state. - * @param {goog.vec.Mat4.Number=} opt_transform Transform. + * @param {ol.Matrix=} opt_transform Transform. * @protected */ ol.renderer.canvas.Layer.prototype.dispatchPreComposeEvent = function(context, frameState, opt_transform) { @@ -159,7 +158,7 @@ ol.renderer.canvas.Layer.prototype.dispatchPreComposeEvent = function(context, f /** * @param {CanvasRenderingContext2D} context Context. * @param {olx.FrameState} frameState Frame state. - * @param {goog.vec.Mat4.Number=} opt_transform Transform. + * @param {ol.Matrix=} opt_transform Transform. * @protected */ ol.renderer.canvas.Layer.prototype.dispatchRenderEvent = function(context, frameState, opt_transform) { @@ -175,7 +174,7 @@ ol.renderer.canvas.Layer.prototype.getImage = goog.abstractMethod; /** - * @return {!goog.vec.Mat4.Number} Image transform. + * @return {!ol.Matrix} Image transform. */ ol.renderer.canvas.Layer.prototype.getImageTransform = goog.abstractMethod; @@ -184,12 +183,12 @@ ol.renderer.canvas.Layer.prototype.getImageTransform = goog.abstractMethod; * @param {olx.FrameState} frameState Frame state. * @param {number} offsetX Offset on the x-axis in view coordinates. * @protected - * @return {!goog.vec.Mat4.Number} Transform. + * @return {!ol.Matrix} Transform. */ ol.renderer.canvas.Layer.prototype.getTransform = function(frameState, offsetX) { var viewState = frameState.viewState; var pixelRatio = frameState.pixelRatio; - return ol.vec.Mat4.makeTransform2D(this.transform_, + return ol.matrix.makeTransform(this.transform_, pixelRatio * frameState.size[0] / 2, pixelRatio * frameState.size[1] / 2, pixelRatio / viewState.resolution, @@ -210,13 +209,13 @@ ol.renderer.canvas.Layer.prototype.prepareFrame = goog.abstractMethod; /** * @param {ol.Pixel} pixelOnMap Pixel. - * @param {goog.vec.Mat4.Number} imageTransformInv The transformation matrix + * @param {ol.Matrix} imageTransformInv The transformation matrix * to convert from a map pixel to a canvas pixel. * @return {ol.Pixel} The pixel. * @protected */ ol.renderer.canvas.Layer.prototype.getPixelOnCanvas = function(pixelOnMap, imageTransformInv) { var pixelOnCanvas = [0, 0]; - ol.vec.Mat4.multVec2(imageTransformInv, pixelOnMap, pixelOnCanvas); + ol.matrix.multVec2(imageTransformInv, pixelOnMap, pixelOnCanvas); return pixelOnCanvas; }; diff --git a/src/ol/renderer/canvas/canvasmaprenderer.js b/src/ol/renderer/canvas/canvasmaprenderer.js index 7c8f599047..23afa5ac33 100644 --- a/src/ol/renderer/canvas/canvasmaprenderer.js +++ b/src/ol/renderer/canvas/canvasmaprenderer.js @@ -3,7 +3,7 @@ goog.provide('ol.renderer.canvas.Map'); goog.require('goog.asserts'); -goog.require('goog.vec.Mat4'); +goog.require('ol.matrix'); goog.require('ol'); goog.require('ol.RendererType'); goog.require('ol.array'); @@ -25,7 +25,6 @@ goog.require('ol.renderer.canvas.TileLayer'); goog.require('ol.renderer.canvas.VectorLayer'); goog.require('ol.renderer.canvas.VectorTileLayer'); goog.require('ol.source.State'); -goog.require('ol.vec.Mat4'); /** @@ -63,9 +62,9 @@ ol.renderer.canvas.Map = function(container, map) { /** * @private - * @type {!goog.vec.Mat4.Number} + * @type {ol.Matrix} */ - this.transform_ = goog.vec.Mat4.createNumber(); + this.transform_ = ol.matrix.create(); }; ol.inherits(ol.renderer.canvas.Map, ol.renderer.Map); @@ -118,13 +117,13 @@ ol.renderer.canvas.Map.prototype.dispatchComposeEvent_ = function(type, frameSta /** * @param {olx.FrameState} frameState Frame state. * @protected - * @return {!goog.vec.Mat4.Number} Transform. + * @return {!ol.Matrix} Transform. */ ol.renderer.canvas.Map.prototype.getTransform = function(frameState) { var pixelRatio = frameState.pixelRatio; var viewState = frameState.viewState; var resolution = viewState.resolution; - return ol.vec.Mat4.makeTransform2D(this.transform_, + return ol.matrix.makeTransform(this.transform_, this.canvas_.width / 2, this.canvas_.height / 2, pixelRatio / resolution, -pixelRatio / resolution, -viewState.rotation, diff --git a/src/ol/renderer/canvas/canvastilelayerrenderer.js b/src/ol/renderer/canvas/canvastilelayerrenderer.js index feaed6bffb..7b640f766b 100644 --- a/src/ol/renderer/canvas/canvastilelayerrenderer.js +++ b/src/ol/renderer/canvas/canvastilelayerrenderer.js @@ -3,7 +3,7 @@ goog.provide('ol.renderer.canvas.TileLayer'); goog.require('goog.asserts'); -goog.require('goog.vec.Mat4'); +goog.require('ol.matrix'); goog.require('ol.TileRange'); goog.require('ol.TileState'); goog.require('ol.array'); @@ -13,7 +13,6 @@ goog.require('ol.render.EventType'); goog.require('ol.renderer.canvas.Layer'); goog.require('ol.size'); goog.require('ol.source.Tile'); -goog.require('ol.vec.Mat4'); /** @@ -51,9 +50,9 @@ ol.renderer.canvas.TileLayer = function(tileLayer) { /** * @private - * @type {!goog.vec.Mat4.Number} + * @type {ol.Matrix} */ - this.imageTransform_ = goog.vec.Mat4.createNumber(); + this.imageTransform_ = ol.matrix.create(); /** * @protected @@ -327,7 +326,7 @@ ol.renderer.canvas.TileLayer.prototype.renderTileImages = function(context, fram if (hasRenderListeners) { var dX = drawOffsetX - offsetX / drawScale + offsetX; var dY = drawOffsetY - offsetY / drawScale + offsetY; - var imageTransform = ol.vec.Mat4.makeTransform2D(this.imageTransform_, + var imageTransform = ol.matrix.makeTransform(this.imageTransform_, drawSize / 2 - dX, drawSize / 2 - dY, pixelScale, -pixelScale, -rotation, -center[0] + dX / pixelScale, -center[1] - dY / pixelScale); this.dispatchRenderEvent(renderContext, frameState, imageTransform); diff --git a/src/ol/renderer/canvas/canvasvectortilelayerrenderer.js b/src/ol/renderer/canvas/canvasvectortilelayerrenderer.js index 56ea0cfe82..e701955383 100644 --- a/src/ol/renderer/canvas/canvasvectortilelayerrenderer.js +++ b/src/ol/renderer/canvas/canvasvectortilelayerrenderer.js @@ -2,7 +2,7 @@ goog.provide('ol.renderer.canvas.VectorTileLayer'); goog.require('goog.asserts'); goog.require('ol.events'); -goog.require('goog.vec.Mat4'); +goog.require('ol.matrix'); goog.require('ol.Feature'); goog.require('ol.VectorTile'); goog.require('ol.array'); @@ -17,7 +17,6 @@ goog.require('ol.renderer.canvas.TileLayer'); goog.require('ol.renderer.vector'); goog.require('ol.size'); goog.require('ol.source.VectorTile'); -goog.require('ol.vec.Mat4'); /** @@ -57,9 +56,9 @@ ol.renderer.canvas.VectorTileLayer = function(layer) { /** * @private - * @type {!goog.vec.Mat4.Number} + * @type {ol.Matrix} */ - this.tmpTransform_ = goog.vec.Mat4.createNumber(); + this.tmpTransform_ = ol.matrix.create(); // Use lower resolution for pure vector rendering. Closest resolution otherwise. this.zDirection = @@ -148,7 +147,7 @@ ol.renderer.canvas.VectorTileLayer.prototype.renderTileReplays_ = function( if (pixelSpace) { origin = ol.extent.getTopLeft(tileExtent); - tileTransform = ol.vec.Mat4.makeTransform2D(this.tmpTransform_, + tileTransform = ol.matrix.makeTransform(this.tmpTransform_, offsetX, offsetY, pixelScale * tilePixelResolution, pixelScale * tilePixelResolution, @@ -428,14 +427,14 @@ ol.renderer.canvas.VectorTileLayer.prototype.renderTileImage_ = function( tile.getTileCoord(), this.tmpExtent); var tileTransform; if (pixelSpace) { - tileTransform = ol.vec.Mat4.makeTransform2D(this.tmpTransform_, + tileTransform = ol.matrix.makeTransform(this.tmpTransform_, 0, 0, pixelScale * tilePixelResolution, pixelScale * tilePixelResolution, 0, -tileSize[0] * tilePixelRatio / 2, -tileSize[1] * tilePixelRatio / 2); } else { var tileCenter = ol.extent.getCenter(tileExtent); - tileTransform = ol.vec.Mat4.makeTransform2D(this.tmpTransform_, + tileTransform = ol.matrix.makeTransform(this.tmpTransform_, 0, 0, pixelScale, -pixelScale, 0, diff --git a/src/ol/renderer/dom/domimagelayerrenderer.js b/src/ol/renderer/dom/domimagelayerrenderer.js index a0d1a931c5..ec34d6a1f3 100644 --- a/src/ol/renderer/dom/domimagelayerrenderer.js +++ b/src/ol/renderer/dom/domimagelayerrenderer.js @@ -1,7 +1,7 @@ goog.provide('ol.renderer.dom.ImageLayer'); goog.require('goog.asserts'); -goog.require('goog.vec.Mat4'); +goog.require('ol.matrix'); goog.require('ol.ImageBase'); goog.require('ol.ViewHint'); goog.require('ol.dom'); @@ -9,7 +9,6 @@ goog.require('ol.extent'); goog.require('ol.layer.Image'); goog.require('ol.proj'); goog.require('ol.renderer.dom.Layer'); -goog.require('ol.vec.Mat4'); /** @@ -32,9 +31,9 @@ ol.renderer.dom.ImageLayer = function(imageLayer) { /** * @private - * @type {goog.vec.Mat4.Number} + * @type {ol.Matrix} */ - this.transform_ = goog.vec.Mat4.createNumberIdentity(); + this.transform_ = ol.matrix.create(); }; ol.inherits(ol.renderer.dom.ImageLayer, ol.renderer.dom.Layer); @@ -118,8 +117,8 @@ ol.renderer.dom.ImageLayer.prototype.prepareFrame = function(frameState, layerSt if (image) { var imageExtent = image.getExtent(); var imageResolution = image.getResolution(); - var transform = goog.vec.Mat4.createNumber(); - ol.vec.Mat4.makeTransform2D(transform, + var transform = ol.matrix.create(); + ol.matrix.makeTransform(transform, frameState.size[0] / 2, frameState.size[1] / 2, imageResolution / viewResolution, imageResolution / viewResolution, viewRotation, @@ -146,12 +145,12 @@ ol.renderer.dom.ImageLayer.prototype.prepareFrame = function(frameState, layerSt /** - * @param {goog.vec.Mat4.Number} transform Transform. + * @param {ol.Matrix} transform Transform. * @private */ ol.renderer.dom.ImageLayer.prototype.setTransform_ = function(transform) { - if (!ol.vec.Mat4.equals2D(transform, this.transform_)) { + if (!ol.matrix.equals(transform, this.transform_)) { ol.dom.transformElement2D(this.target, transform, 6); - goog.vec.Mat4.setFromArray(this.transform_, transform); + ol.matrix.setFromArray(this.transform_, transform); } }; diff --git a/src/ol/renderer/dom/dommaprenderer.js b/src/ol/renderer/dom/dommaprenderer.js index c6cf82d1bc..8186d26678 100644 --- a/src/ol/renderer/dom/dommaprenderer.js +++ b/src/ol/renderer/dom/dommaprenderer.js @@ -4,7 +4,7 @@ goog.require('goog.asserts'); goog.require('ol.events'); goog.require('ol.events.Event'); goog.require('ol.events.EventType'); -goog.require('goog.vec.Mat4'); +goog.require('ol.matrix'); goog.require('ol'); goog.require('ol.RendererType'); goog.require('ol.array'); @@ -23,7 +23,6 @@ goog.require('ol.renderer.dom.Layer'); goog.require('ol.renderer.dom.TileLayer'); goog.require('ol.renderer.dom.VectorLayer'); goog.require('ol.source.State'); -goog.require('ol.vec.Mat4'); /** @@ -50,9 +49,9 @@ ol.renderer.dom.Map = function(container, map) { /** * @private - * @type {!goog.vec.Mat4.Number} + * @type {ol.Matrix} */ - this.transform_ = goog.vec.Mat4.createNumber(); + this.transform_ = ol.matrix.create(); /** * @type {!Element} @@ -124,7 +123,7 @@ ol.renderer.dom.Map.prototype.dispatchComposeEvent_ = function(type, frameState) var context = this.context_; var canvas = context.canvas; - ol.vec.Mat4.makeTransform2D(this.transform_, + ol.matrix.makeTransform(this.transform_, canvas.width / 2, canvas.height / 2, pixelRatio / viewState.resolution, diff --git a/src/ol/renderer/dom/domtilelayerrenderer.js b/src/ol/renderer/dom/domtilelayerrenderer.js index 4797c5cc94..4ae1006c5c 100644 --- a/src/ol/renderer/dom/domtilelayerrenderer.js +++ b/src/ol/renderer/dom/domtilelayerrenderer.js @@ -4,7 +4,7 @@ goog.provide('ol.renderer.dom.TileLayer'); goog.require('goog.asserts'); -goog.require('goog.vec.Mat4'); +goog.require('ol.matrix'); goog.require('ol'); goog.require('ol.TileRange'); goog.require('ol.TileState'); @@ -16,7 +16,6 @@ goog.require('ol.layer.Tile'); goog.require('ol.renderer.dom.Layer'); goog.require('ol.size'); goog.require('ol.tilegrid.TileGrid'); -goog.require('ol.vec.Mat4'); /** @@ -200,7 +199,7 @@ ol.renderer.dom.TileLayer.prototype.prepareFrame = function(frameState, layerSta tileLayerZKeys.sort(ol.array.numberSafeCompareFunction); var i, ii, j, origin, resolution; - var transform = goog.vec.Mat4.createNumber(); + var transform = ol.matrix.create(); for (i = 0, ii = tileLayerZKeys.length; i < ii; ++i) { tileLayerZKey = tileLayerZKeys[i]; tileLayerZ = this.tileLayerZs_[tileLayerZKey]; @@ -211,7 +210,7 @@ ol.renderer.dom.TileLayer.prototype.prepareFrame = function(frameState, layerSta } resolution = tileLayerZ.getResolution(); origin = tileLayerZ.getOrigin(); - ol.vec.Mat4.makeTransform2D(transform, + ol.matrix.makeTransform(transform, frameState.size[0] / 2, frameState.size[1] / 2, resolution / viewState.resolution, resolution / viewState.resolution, @@ -314,9 +313,9 @@ ol.renderer.dom.TileLayerZ_ = function(tileGrid, tileCoordOrigin) { /** * @private - * @type {goog.vec.Mat4.Number} + * @type {ol.Matrix} */ - this.transform_ = goog.vec.Mat4.createNumberIdentity(); + this.transform_ = ol.matrix.create(); /** * @private @@ -437,11 +436,11 @@ ol.renderer.dom.TileLayerZ_.prototype.removeTilesOutsideExtent = function(extent /** - * @param {goog.vec.Mat4.Number} transform Transform. + * @param {ol.Matrix} transform Transform. */ ol.renderer.dom.TileLayerZ_.prototype.setTransform = function(transform) { - if (!ol.vec.Mat4.equals2D(transform, this.transform_)) { + if (!ol.matrix.equals(transform, this.transform_)) { ol.dom.transformElement2D(this.target, transform, 6); - goog.vec.Mat4.setFromArray(this.transform_, transform); + ol.matrix.setFromArray(this.transform_, transform); } }; diff --git a/src/ol/renderer/dom/domvectorlayerrenderer.js b/src/ol/renderer/dom/domvectorlayerrenderer.js index 116de9bc94..c30e87f006 100644 --- a/src/ol/renderer/dom/domvectorlayerrenderer.js +++ b/src/ol/renderer/dom/domvectorlayerrenderer.js @@ -2,7 +2,7 @@ goog.provide('ol.renderer.dom.VectorLayer'); goog.require('goog.asserts'); goog.require('ol.events'); -goog.require('goog.vec.Mat4'); +goog.require('ol.matrix'); goog.require('ol.ViewHint'); goog.require('ol.dom'); goog.require('ol.extent'); @@ -13,7 +13,6 @@ goog.require('ol.render.canvas.Immediate'); goog.require('ol.render.canvas.ReplayGroup'); goog.require('ol.renderer.dom.Layer'); goog.require('ol.renderer.vector'); -goog.require('ol.vec.Mat4'); /** @@ -76,15 +75,15 @@ ol.renderer.dom.VectorLayer = function(vectorLayer) { /** * @private - * @type {goog.vec.Mat4.Number} + * @type {ol.Matrix} */ - this.transform_ = goog.vec.Mat4.createNumber(); + this.transform_ = ol.matrix.create(); /** * @private - * @type {goog.vec.Mat4.Number} + * @type {ol.Matrix} */ - this.elementTransform_ = goog.vec.Mat4.createNumber(); + this.elementTransform_ = ol.matrix.create(); }; ol.inherits(ol.renderer.dom.VectorLayer, ol.renderer.dom.Layer); @@ -120,7 +119,7 @@ ol.renderer.dom.VectorLayer.prototype.composeFrame = function(frameState, layerS var imageWidth = viewWidth * pixelRatio; var imageHeight = viewHeight * pixelRatio; - var transform = ol.vec.Mat4.makeTransform2D(this.transform_, + var transform = ol.matrix.makeTransform(this.transform_, pixelRatio * viewWidth / 2, pixelRatio * viewHeight / 2, pixelRatio / viewResolution, @@ -134,7 +133,7 @@ ol.renderer.dom.VectorLayer.prototype.composeFrame = function(frameState, layerS context.canvas.width = imageWidth; context.canvas.height = imageHeight; - var elementTransform = ol.vec.Mat4.makeTransform2D(this.elementTransform_, + var elementTransform = ol.matrix.makeTransform(this.elementTransform_, 0, 0, 1 / pixelRatio, 1 / pixelRatio, 0, @@ -162,7 +161,7 @@ ol.renderer.dom.VectorLayer.prototype.composeFrame = function(frameState, layerS /** * @param {ol.render.EventType} type Event type. * @param {olx.FrameState} frameState Frame state. - * @param {goog.vec.Mat4.Number} transform Transform. + * @param {ol.Matrix} transform Transform. * @private */ ol.renderer.dom.VectorLayer.prototype.dispatchEvent_ = function(type, frameState, transform) { diff --git a/src/ol/renderer/layerrenderer.js b/src/ol/renderer/layerrenderer.js index e8eaea77c5..3dc1df3c37 100644 --- a/src/ol/renderer/layerrenderer.js +++ b/src/ol/renderer/layerrenderer.js @@ -10,10 +10,9 @@ goog.require('ol.Observable'); goog.require('ol.TileRange'); goog.require('ol.TileState'); goog.require('ol.layer.Layer'); -goog.require('ol.source.Source'); +goog.require('ol.matrix'); goog.require('ol.source.State'); goog.require('ol.source.Tile'); -goog.require('ol.vec.Mat4'); /** @@ -59,7 +58,7 @@ ol.renderer.Layer.prototype.forEachFeatureAtCoordinate = ol.nullFunction; */ ol.renderer.Layer.prototype.forEachLayerAtPixel = function(pixel, frameState, callback, thisArg) { var coordinate = pixel.slice(); - ol.vec.Mat4.multVec2( + ol.matrix.multVec2( frameState.pixelToCoordinateMatrix, coordinate, coordinate); var hasFeature = this.forEachFeatureAtCoordinate( diff --git a/src/ol/renderer/maprenderer.js b/src/ol/renderer/maprenderer.js index 38c131a593..d6a9e144d8 100644 --- a/src/ol/renderer/maprenderer.js +++ b/src/ol/renderer/maprenderer.js @@ -2,7 +2,7 @@ goog.provide('ol.RendererType'); goog.provide('ol.renderer.Map'); goog.require('goog.asserts'); -goog.require('goog.vec.Mat4'); +goog.require('ol.matrix'); goog.require('ol'); goog.require('ol.Disposable'); goog.require('ol.events'); @@ -12,7 +12,6 @@ goog.require('ol.functions'); goog.require('ol.layer.Layer'); goog.require('ol.renderer.Layer'); goog.require('ol.style.IconImageCache'); -goog.require('ol.vec.Mat4'); /** @@ -69,12 +68,12 @@ ol.renderer.Map.prototype.calculateMatrices2D = function(frameState) { var coordinateToPixelMatrix = frameState.coordinateToPixelMatrix; goog.asserts.assert(coordinateToPixelMatrix, 'frameState has a coordinateToPixelMatrix'); - ol.vec.Mat4.makeTransform2D(coordinateToPixelMatrix, + ol.matrix.makeTransform(coordinateToPixelMatrix, frameState.size[0] / 2, frameState.size[1] / 2, 1 / viewState.resolution, -1 / viewState.resolution, -viewState.rotation, -viewState.center[0], -viewState.center[1]); - var inverted = goog.vec.Mat4.invert( + var inverted = ol.matrix.invert( coordinateToPixelMatrix, frameState.pixelToCoordinateMatrix); goog.asserts.assert(inverted, 'matrix could be inverted'); }; diff --git a/src/ol/renderer/webgl/webglimagelayerrenderer.js b/src/ol/renderer/webgl/webglimagelayerrenderer.js index afe4641703..5b10f1eb9c 100644 --- a/src/ol/renderer/webgl/webglimagelayerrenderer.js +++ b/src/ol/renderer/webgl/webglimagelayerrenderer.js @@ -1,7 +1,7 @@ goog.provide('ol.renderer.webgl.ImageLayer'); goog.require('goog.asserts'); -goog.require('goog.vec.Mat4'); +goog.require('ol.matrix'); goog.require('goog.webgl'); goog.require('ol.ImageBase'); goog.require('ol.ViewHint'); @@ -12,7 +12,6 @@ goog.require('ol.layer.Image'); goog.require('ol.proj'); goog.require('ol.renderer.webgl.Layer'); goog.require('ol.source.ImageVector'); -goog.require('ol.vec.Mat4'); goog.require('ol.webgl.Context'); @@ -41,7 +40,7 @@ ol.renderer.webgl.ImageLayer = function(mapRenderer, imageLayer) { /** * @private - * @type {?goog.vec.Mat4.Number} + * @type {?ol.Matrix} */ this.hitTransformationMatrix_ = null; @@ -165,9 +164,9 @@ ol.renderer.webgl.ImageLayer.prototype.prepareFrame = function(frameState, layer // Translate and scale to flip the Y coord. var texCoordMatrix = this.texCoordMatrix; - goog.vec.Mat4.makeIdentity(texCoordMatrix); - goog.vec.Mat4.scale(texCoordMatrix, 1, -1, 1); - goog.vec.Mat4.translate(texCoordMatrix, 0, -1, 0); + ol.matrix.makeIdentity(texCoordMatrix); + ol.matrix.scale(texCoordMatrix, 1, -1); + ol.matrix.translate(texCoordMatrix, 0, -1); this.image_ = image; this.texture = texture; @@ -197,20 +196,18 @@ ol.renderer.webgl.ImageLayer.prototype.updateProjectionMatrix_ = function(canvas var canvasExtentHeight = canvasHeight * viewResolution; var projectionMatrix = this.projectionMatrix; - goog.vec.Mat4.makeIdentity(projectionMatrix); - goog.vec.Mat4.scale(projectionMatrix, + ol.matrix.makeIdentity(projectionMatrix); + ol.matrix.scale(projectionMatrix, pixelRatio * 2 / canvasExtentWidth, - pixelRatio * 2 / canvasExtentHeight, 1); - goog.vec.Mat4.rotateZ(projectionMatrix, -viewRotation); - goog.vec.Mat4.translate(projectionMatrix, + pixelRatio * 2 / canvasExtentHeight); + ol.matrix.rotate(projectionMatrix, -viewRotation); + ol.matrix.translate(projectionMatrix, imageExtent[0] - viewCenter[0], - imageExtent[1] - viewCenter[1], - 0); - goog.vec.Mat4.scale(projectionMatrix, + imageExtent[1] - viewCenter[1]); + ol.matrix.scale(projectionMatrix, (imageExtent[2] - imageExtent[0]) / 2, - (imageExtent[3] - imageExtent[1]) / 2, - 1); - goog.vec.Mat4.translate(projectionMatrix, 1, 1, 0); + (imageExtent[3] - imageExtent[1]) / 2); + ol.matrix.translate(projectionMatrix, 1, 1); }; @@ -237,7 +234,7 @@ ol.renderer.webgl.ImageLayer.prototype.forEachLayerAtPixel = function(pixel, fra // for ImageVector sources use the original hit-detection logic, // so that for example also transparent polygons are detected var coordinate = pixel.slice(); - ol.vec.Mat4.multVec2( + ol.matrix.multVec2( frameState.pixelToCoordinateMatrix, coordinate, coordinate); var hasFeature = this.forEachFeatureAtCoordinate( coordinate, frameState, ol.functions.TRUE, this); @@ -257,7 +254,7 @@ ol.renderer.webgl.ImageLayer.prototype.forEachLayerAtPixel = function(pixel, fra } var pixelOnFrameBuffer = [0, 0]; - ol.vec.Mat4.multVec2( + ol.matrix.multVec2( this.hitTransformationMatrix_, pixel, pixelOnFrameBuffer); if (pixelOnFrameBuffer[0] < 0 || pixelOnFrameBuffer[0] > imageSize[0] || @@ -289,36 +286,34 @@ ol.renderer.webgl.ImageLayer.prototype.forEachLayerAtPixel = function(pixel, fra * pixel on the map. * @param {ol.Size} mapSize The map size. * @param {ol.Size} imageSize The image size. - * @return {goog.vec.Mat4.Number} The transformation matrix. + * @return {ol.Matrix} The transformation matrix. * @private */ ol.renderer.webgl.ImageLayer.prototype.getHitTransformationMatrix_ = function(mapSize, imageSize) { // the first matrix takes a map pixel, flips the y-axis and scales to // a range between -1 ... 1 - var mapCoordMatrix = goog.vec.Mat4.createNumber(); - goog.vec.Mat4.makeIdentity(mapCoordMatrix); - goog.vec.Mat4.translate(mapCoordMatrix, -1, -1, 0); - goog.vec.Mat4.scale(mapCoordMatrix, 2 / mapSize[0], 2 / mapSize[1], 1); - goog.vec.Mat4.translate(mapCoordMatrix, 0, mapSize[1], 0); - goog.vec.Mat4.scale(mapCoordMatrix, 1, -1, 1); + var mapCoordMatrix = ol.matrix.create(); + ol.matrix.translate(mapCoordMatrix, -1, -1); + ol.matrix.scale(mapCoordMatrix, 2 / mapSize[0], 2 / mapSize[1]); + ol.matrix.translate(mapCoordMatrix, 0, mapSize[1]); + ol.matrix.scale(mapCoordMatrix, 1, -1); // the second matrix is the inverse of the projection matrix used in the // shader for drawing - var projectionMatrixInv = goog.vec.Mat4.createNumber(); - goog.vec.Mat4.invert(this.projectionMatrix, projectionMatrixInv); + var projectionMatrixInv = ol.matrix.create(); + ol.matrix.invert(this.projectionMatrix, projectionMatrixInv); // the third matrix scales to the image dimensions and flips the y-axis again - var imageCoordMatrix = goog.vec.Mat4.createNumber(); - goog.vec.Mat4.makeIdentity(imageCoordMatrix); - goog.vec.Mat4.translate(imageCoordMatrix, 0, imageSize[1], 0); - goog.vec.Mat4.scale(imageCoordMatrix, 1, -1, 1); - goog.vec.Mat4.scale(imageCoordMatrix, imageSize[0] / 2, imageSize[1] / 2, 1); - goog.vec.Mat4.translate(imageCoordMatrix, 1, 1, 0); + var imageCoordMatrix = ol.matrix.create(); + ol.matrix.translate(imageCoordMatrix, 0, imageSize[1]); + ol.matrix.scale(imageCoordMatrix, 1, -1); + ol.matrix.scale(imageCoordMatrix, imageSize[0] / 2, imageSize[1] / 2); + ol.matrix.translate(imageCoordMatrix, 1, 1); - var transformMatrix = goog.vec.Mat4.createNumber(); - goog.vec.Mat4.multMat( + var transformMatrix = ol.matrix.create(); + ol.matrix.multiply( imageCoordMatrix, projectionMatrixInv, transformMatrix); - goog.vec.Mat4.multMat( + ol.matrix.multiply( transformMatrix, mapCoordMatrix, transformMatrix); return transformMatrix; diff --git a/src/ol/renderer/webgl/webgllayerrenderer.js b/src/ol/renderer/webgl/webgllayerrenderer.js index 16734822f1..bd67d9bd8b 100644 --- a/src/ol/renderer/webgl/webgllayerrenderer.js +++ b/src/ol/renderer/webgl/webgllayerrenderer.js @@ -1,8 +1,8 @@ goog.provide('ol.renderer.webgl.Layer'); -goog.require('goog.vec.Mat4'); goog.require('goog.webgl'); goog.require('ol.layer.Layer'); +goog.require('ol.matrix'); goog.require('ol.render.Event'); goog.require('ol.render.EventType'); goog.require('ol.render.webgl.Immediate'); @@ -11,6 +11,7 @@ goog.require('ol.renderer.webgl.map.shader.Default'); goog.require('ol.renderer.webgl.map.shader.Default.Locations'); goog.require('ol.renderer.webgl.map.shader.DefaultFragment'); goog.require('ol.renderer.webgl.map.shader.DefaultVertex'); +goog.require('ol.vec.Mat4'); goog.require('ol.webgl.Buffer'); goog.require('ol.webgl.Context'); @@ -62,15 +63,15 @@ ol.renderer.webgl.Layer = function(mapRenderer, layer) { /** * @protected - * @type {!goog.vec.Mat4.Number} + * @type {ol.Matrix} */ - this.texCoordMatrix = goog.vec.Mat4.createNumber(); + this.texCoordMatrix = ol.matrix.create(); /** * @protected - * @type {!goog.vec.Mat4.Number} + * @type {ol.Matrix} */ - this.projectionMatrix = goog.vec.Mat4.createNumberIdentity(); + this.projectionMatrix = ol.matrix.create(); /** * @private @@ -167,10 +168,10 @@ ol.renderer.webgl.Layer.prototype.composeFrame = function(frameState, layerState gl.uniform1i(locations.u_texture, 0); } - gl.uniformMatrix4fv( - locations.u_texCoordMatrix, false, this.getTexCoordMatrix()); + gl.uniformMatrix4fv(locations.u_texCoordMatrix, false, + ol.vec.Mat4.fromMatrix(this.getTexCoordMatrix())); gl.uniformMatrix4fv(locations.u_projectionMatrix, false, - this.getProjectionMatrix()); + ol.vec.Mat4.fromMatrix(this.getProjectionMatrix())); gl.uniform1f(locations.u_opacity, layerState.opacity); gl.bindTexture(goog.webgl.TEXTURE_2D, this.getTexture()); gl.drawArrays(goog.webgl.TRIANGLE_STRIP, 0, 4); @@ -208,7 +209,7 @@ ol.renderer.webgl.Layer.prototype.dispatchComposeEvent_ = function(type, context /** - * @return {!goog.vec.Mat4.Number} Matrix. + * @return {!ol.Matrix} Matrix. */ ol.renderer.webgl.Layer.prototype.getTexCoordMatrix = function() { return this.texCoordMatrix; @@ -224,7 +225,7 @@ ol.renderer.webgl.Layer.prototype.getTexture = function() { /** - * @return {!goog.vec.Mat4.Number} Matrix. + * @return {!ol.Matrix} Matrix. */ ol.renderer.webgl.Layer.prototype.getProjectionMatrix = function() { return this.projectionMatrix; diff --git a/src/ol/renderer/webgl/webgltilelayerrenderer.js b/src/ol/renderer/webgl/webgltilelayerrenderer.js index 407a18d184..64da99b499 100644 --- a/src/ol/renderer/webgl/webgltilelayerrenderer.js +++ b/src/ol/renderer/webgl/webgltilelayerrenderer.js @@ -4,8 +4,7 @@ goog.provide('ol.renderer.webgl.TileLayer'); goog.require('goog.asserts'); -goog.require('goog.vec.Mat4'); -goog.require('goog.vec.Vec4'); +goog.require('ol.matrix'); goog.require('goog.webgl'); goog.require('ol.TileRange'); goog.require('ol.TileState'); @@ -18,7 +17,6 @@ goog.require('ol.renderer.webgl.tilelayer.shader.Fragment'); goog.require('ol.renderer.webgl.tilelayer.shader.Locations'); goog.require('ol.renderer.webgl.tilelayer.shader.Vertex'); goog.require('ol.size'); -goog.require('ol.vec.Mat4'); goog.require('ol.webgl.Buffer'); @@ -294,22 +292,21 @@ ol.renderer.webgl.TileLayer.prototype.prepareFrame = function(frameState, layerS /** @type {Array.} */ var zs = Object.keys(tilesToDrawByZ).map(Number); zs.sort(ol.array.numberSafeCompareFunction); - var u_tileOffset = goog.vec.Vec4.createFloat32(); - var i, ii, sx, sy, tileKey, tilesToDraw, tx, ty; + var u_tileOffset = new Float32Array(4); + var i, ii, tileKey, tilesToDraw; for (i = 0, ii = zs.length; i < ii; ++i) { tilesToDraw = tilesToDrawByZ[zs[i]]; for (tileKey in tilesToDraw) { tile = tilesToDraw[tileKey]; tileExtent = tileGrid.getTileCoordExtent(tile.tileCoord, tmpExtent); - sx = 2 * (tileExtent[2] - tileExtent[0]) / + u_tileOffset[0] = 2 * (tileExtent[2] - tileExtent[0]) / framebufferExtentDimension; - sy = 2 * (tileExtent[3] - tileExtent[1]) / + u_tileOffset[1] = 2 * (tileExtent[3] - tileExtent[1]) / framebufferExtentDimension; - tx = 2 * (tileExtent[0] - framebufferExtent[0]) / + u_tileOffset[2] = 2 * (tileExtent[0] - framebufferExtent[0]) / framebufferExtentDimension - 1; - ty = 2 * (tileExtent[1] - framebufferExtent[1]) / + u_tileOffset[3] = 2 * (tileExtent[1] - framebufferExtent[1]) / framebufferExtentDimension - 1; - goog.vec.Vec4.setFromValues(u_tileOffset, sx, sy, tx, ty); gl.uniform4fv(this.locations_.u_tileOffset, u_tileOffset); mapRenderer.bindTileTexture(tile, tilePixelSize, tileGutter * pixelRatio, goog.webgl.LINEAR, goog.webgl.LINEAR); @@ -354,26 +351,21 @@ ol.renderer.webgl.TileLayer.prototype.prepareFrame = function(frameState, layerS this.updateLogos(frameState, tileSource); var texCoordMatrix = this.texCoordMatrix; - goog.vec.Mat4.makeIdentity(texCoordMatrix); - goog.vec.Mat4.translate(texCoordMatrix, + ol.matrix.makeIdentity(texCoordMatrix); + ol.matrix.translate(texCoordMatrix, (center[0] - framebufferExtent[0]) / (framebufferExtent[2] - framebufferExtent[0]), (center[1] - framebufferExtent[1]) / - (framebufferExtent[3] - framebufferExtent[1]), - 0); + (framebufferExtent[3] - framebufferExtent[1])); if (viewState.rotation !== 0) { - goog.vec.Mat4.rotateZ(texCoordMatrix, viewState.rotation); + ol.matrix.rotate(texCoordMatrix, viewState.rotation); } - goog.vec.Mat4.scale(texCoordMatrix, + ol.matrix.scale(texCoordMatrix, frameState.size[0] * viewState.resolution / (framebufferExtent[2] - framebufferExtent[0]), frameState.size[1] * viewState.resolution / - (framebufferExtent[3] - framebufferExtent[1]), - 1); - goog.vec.Mat4.translate(texCoordMatrix, - -0.5, - -0.5, - 0); + (framebufferExtent[3] - framebufferExtent[1])); + ol.matrix.translate(texCoordMatrix, -0.5, -0.5); return true; }; @@ -392,7 +384,7 @@ ol.renderer.webgl.TileLayer.prototype.forEachLayerAtPixel = function(pixel, fram (frameState.size[1] - pixel[1]) / frameState.size[1]]; var pixelOnFrameBufferScaled = [0, 0]; - ol.vec.Mat4.multVec2( + ol.matrix.multVec2( this.texCoordMatrix, pixelOnMapScaled, pixelOnFrameBufferScaled); var pixelOnFrameBuffer = [ pixelOnFrameBufferScaled[0] * this.framebufferDimension, diff --git a/src/ol/renderer/webgl/webglvectorlayerrenderer.js b/src/ol/renderer/webgl/webglvectorlayerrenderer.js index 482bfa11af..6b9d04feb1 100644 --- a/src/ol/renderer/webgl/webglvectorlayerrenderer.js +++ b/src/ol/renderer/webgl/webglvectorlayerrenderer.js @@ -5,10 +5,10 @@ goog.require('ol.events'); goog.require('ol.ViewHint'); goog.require('ol.extent'); goog.require('ol.layer.Vector'); +goog.require('ol.matrix'); goog.require('ol.render.webgl.ReplayGroup'); goog.require('ol.renderer.vector'); goog.require('ol.renderer.webgl.Layer'); -goog.require('ol.vec.Mat4'); /** @@ -155,7 +155,7 @@ ol.renderer.webgl.VectorLayer.prototype.hasFeatureAtCoordinate = function(coordi */ ol.renderer.webgl.VectorLayer.prototype.forEachLayerAtPixel = function(pixel, frameState, callback, thisArg) { var coordinate = pixel.slice(); - ol.vec.Mat4.multVec2( + ol.matrix.multVec2( frameState.pixelToCoordinateMatrix, coordinate, coordinate); var hasFeature = this.hasFeatureAtCoordinate(coordinate, frameState); diff --git a/src/ol/source/imagevectorsource.js b/src/ol/source/imagevectorsource.js index c601e41eae..cbf04b8e8a 100644 --- a/src/ol/source/imagevectorsource.js +++ b/src/ol/source/imagevectorsource.js @@ -3,7 +3,7 @@ goog.provide('ol.source.ImageVector'); goog.require('goog.asserts'); goog.require('ol.events'); goog.require('ol.events.EventType'); -goog.require('goog.vec.Mat4'); +goog.require('ol.matrix'); goog.require('ol.dom'); goog.require('ol.extent'); goog.require('ol.render.canvas.ReplayGroup'); @@ -11,7 +11,6 @@ goog.require('ol.renderer.vector'); goog.require('ol.source.ImageCanvas'); goog.require('ol.source.Vector'); goog.require('ol.style.Style'); -goog.require('ol.vec.Mat4'); /** @@ -41,9 +40,9 @@ ol.source.ImageVector = function(options) { /** * @private - * @type {!goog.vec.Mat4.Number} + * @type {ol.Matrix} */ - this.transform_ = goog.vec.Mat4.createNumber(); + this.transform_ = ol.matrix.create(); /** * @private @@ -212,11 +211,11 @@ ol.source.ImageVector.prototype.getStyleFunction = function() { * @param {number} resolution Resolution. * @param {number} pixelRatio Pixel ratio. * @param {ol.Size} size Size. - * @return {!goog.vec.Mat4.Number} Transform. + * @return {!ol.Matrix} Transform. * @private */ ol.source.ImageVector.prototype.getTransform_ = function(center, resolution, pixelRatio, size) { - return ol.vec.Mat4.makeTransform2D(this.transform_, + return ol.matrix.makeTransform(this.transform_, size[0] / 2, size[1] / 2, pixelRatio / resolution, -pixelRatio / resolution, 0, diff --git a/src/ol/source/rastersource.js b/src/ol/source/rastersource.js index 2b1d6478ca..f59011b799 100644 --- a/src/ol/source/rastersource.js +++ b/src/ol/source/rastersource.js @@ -4,7 +4,7 @@ goog.provide('ol.source.RasterEvent'); goog.provide('ol.source.RasterEventType'); goog.require('goog.asserts'); -goog.require('goog.vec.Mat4'); +goog.require('ol.matrix'); goog.require('ol.ImageCanvas'); goog.require('ol.TileQueue'); goog.require('ol.dom'); @@ -120,7 +120,7 @@ ol.source.Raster = function(options) { this.frameState_ = { animate: false, attributions: {}, - coordinateToPixelMatrix: goog.vec.Mat4.createNumber(), + coordinateToPixelMatrix: ol.matrix.create(), extent: null, focus: null, index: 0, @@ -128,7 +128,7 @@ ol.source.Raster = function(options) { layerStatesArray: layerStatesArray, logos: {}, pixelRatio: 1, - pixelToCoordinateMatrix: goog.vec.Mat4.createNumber(), + pixelToCoordinateMatrix: ol.matrix.create(), postRenderFunctions: [], size: [0, 0], skippedFeatureUids: {}, diff --git a/src/ol/typedefs.js b/src/ol/typedefs.js index ffe8677a77..d2a60b3cf9 100644 --- a/src/ol/typedefs.js +++ b/src/ol/typedefs.js @@ -329,6 +329,14 @@ ol.LRUCacheEntry; ol.MapOptionsInternal; +/** + * An array representing a matrix for use in {@link ol.matrix}. The array has + * 6 elements, and the element order is `[a, b, c, d, e, f]`. + * @typedef {Array.} + */ +ol.Matrix; + + /** * @typedef {{depth: (Array.|undefined), * feature: ol.Feature, diff --git a/src/ol/vec/mat4.js b/src/ol/vec/mat4.js index 4fa6f5ca77..eca4fcacc7 100644 --- a/src/ol/vec/mat4.js +++ b/src/ol/vec/mat4.js @@ -1,90 +1,23 @@ goog.provide('ol.vec.Mat4'); -goog.provide('ol.vec.Mat4.Number'); - -goog.require('goog.vec.Mat4'); /** - * A alias for the goog.vec.Number type. - * @typedef {goog.vec.Number} + * @type {Array.} */ -ol.vec.Mat4.Number; +ol.vec.Mat4.tmpMatrix_ = [1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1]; /** - * @param {!goog.vec.Mat4.Number} mat Matrix. - * @param {number} translateX1 Translate X1. - * @param {number} translateY1 Translate Y1. - * @param {number} scaleX Scale X. - * @param {number} scaleY Scale Y. - * @param {number} rotation Rotation. - * @param {number} translateX2 Translate X2. - * @param {number} translateY2 Translate Y2. - * @return {!goog.vec.Mat4.Number} Matrix. + * @param {ol.Matrix} mat Transformation matrix. + * @return {Array.} 2D transformation matrix as flattened 4x4 matrix. */ -ol.vec.Mat4.makeTransform2D = function(mat, translateX1, translateY1, - scaleX, scaleY, rotation, translateX2, translateY2) { - goog.vec.Mat4.makeIdentity(mat); - if (translateX1 !== 0 || translateY1 !== 0) { - goog.vec.Mat4.translate(mat, translateX1, translateY1, 0); - } - if (scaleX != 1 || scaleY != 1) { - goog.vec.Mat4.scale(mat, scaleX, scaleY, 1); - } - if (rotation !== 0) { - goog.vec.Mat4.rotateZ(mat, rotation); - } - if (translateX2 !== 0 || translateY2 !== 0) { - goog.vec.Mat4.translate(mat, translateX2, translateY2, 0); - } - return mat; -}; - - -/** - * Returns true if mat1 and mat2 represent the same 2D transformation. - * @param {goog.vec.Mat4.Number} mat1 Matrix 1. - * @param {goog.vec.Mat4.Number} mat2 Matrix 2. - * @return {boolean} Equal 2D. - */ -ol.vec.Mat4.equals2D = function(mat1, mat2) { - return ( - goog.vec.Mat4.getElement(mat1, 0, 0) == - goog.vec.Mat4.getElement(mat2, 0, 0) && - goog.vec.Mat4.getElement(mat1, 1, 0) == - goog.vec.Mat4.getElement(mat2, 1, 0) && - goog.vec.Mat4.getElement(mat1, 0, 1) == - goog.vec.Mat4.getElement(mat2, 0, 1) && - goog.vec.Mat4.getElement(mat1, 1, 1) == - goog.vec.Mat4.getElement(mat2, 1, 1) && - goog.vec.Mat4.getElement(mat1, 0, 3) == - goog.vec.Mat4.getElement(mat2, 0, 3) && - goog.vec.Mat4.getElement(mat1, 1, 3) == - goog.vec.Mat4.getElement(mat2, 1, 3)); -}; - - -/** - * Transforms the given vector with the given matrix storing the resulting, - * transformed vector into resultVec. The input vector is multiplied against the - * upper 2x4 matrix omitting the projective component. - * - * @param {goog.vec.Mat4.Number} mat The matrix supplying the transformation. - * @param {Array.} vec The 3 element vector to transform. - * @param {Array.} resultVec The 3 element vector to receive the results - * (may be vec). - * @return {Array.} return resultVec so that operations can be - * chained together. - */ -ol.vec.Mat4.multVec2 = function(mat, vec, resultVec) { - var m00 = goog.vec.Mat4.getElement(mat, 0, 0); - var m10 = goog.vec.Mat4.getElement(mat, 1, 0); - var m01 = goog.vec.Mat4.getElement(mat, 0, 1); - var m11 = goog.vec.Mat4.getElement(mat, 1, 1); - var m03 = goog.vec.Mat4.getElement(mat, 0, 3); - var m13 = goog.vec.Mat4.getElement(mat, 1, 3); - var x = vec[0], y = vec[1]; - resultVec[0] = m00 * x + m01 * y + m03; - resultVec[1] = m10 * x + m11 * y + m13; - return resultVec; +ol.vec.Mat4.fromMatrix = function(mat) { + var mat4 = ol.vec.Mat4.tmpMatrix_; + mat4[0] = mat[0]; + mat4[1] = mat[1]; + mat4[4] = mat[2]; + mat4[5] = mat[3]; + mat4[12] = mat[4]; + mat4[13] = mat[5]; + return mat4; }; diff --git a/test/spec/ol/dom/dom.test.js b/test/spec/ol/dom/dom.test.js index d53e4552f9..bf69cb012f 100644 --- a/test/spec/ol/dom/dom.test.js +++ b/test/spec/ol/dom/dom.test.js @@ -147,8 +147,8 @@ describe('ol.dom', function() { describe('ol.dom.transformElement2D', function() { var element = null; - var transform = goog.vec.Mat4.createNumber(); - var transformFloat = goog.vec.Mat4.createNumber(); + var transform = ol.matrix.create(); + var transformFloat = ol.matrix.create(); transformFloat[0] = 0.12345; beforeEach(function() { element = document.createElement('div'); @@ -564,5 +564,5 @@ describe('ol.dom', function() { }); goog.require('goog.userAgent'); -goog.require('goog.vec.Mat4'); +goog.require('ol.matrix'); goog.require('ol.dom'); diff --git a/test/spec/ol/extent.test.js b/test/spec/ol/extent.test.js index dfeb399716..ea9f000a5f 100644 --- a/test/spec/ol/extent.test.js +++ b/test/spec/ol/extent.test.js @@ -864,7 +864,6 @@ describe('ol.extent', function() { }); -goog.require('goog.vec.Mat4'); goog.require('ol.extent'); goog.require('ol.extent.Corner'); goog.require('ol.extent.Relationship'); diff --git a/test/spec/ol/geom/flat/transformflatgeom.test.js b/test/spec/ol/geom/flat/transformflatgeom.test.js index 6bb9b564c9..c268af60e5 100644 --- a/test/spec/ol/geom/flat/transformflatgeom.test.js +++ b/test/spec/ol/geom/flat/transformflatgeom.test.js @@ -23,9 +23,11 @@ describe('ol.geom.flat.transform', function() { [-82.128838, 26.693342, 0], [-82.102127, 26.585724, 0]]] ]).transform('EPSG:4326', 'EPSG:3857'); - var transform = [0.0004088332670837288, 0, 0, 0, 0, - -0.0004088332670837288, 0, 0, 0, 0, 1, 0, 4480.991370439071, - 1529.5752568707105, 0, 1]; + var transform = [ + 0.0004088332670837288, 0, + 0, -0.0004088332670837288, + 4480.991370439071, 1529.5752568707105 + ]; var pixelCoordinates = ol.geom.transformSimpleGeometry2D( multiPolygonGeometry, transform, []); expect(pixelCoordinates[0]).to.roughlyEqual(806.6035275946265, 1e-9); diff --git a/test/spec/ol/render.test.js b/test/spec/ol/render.test.js index 662ad0fb4c..e54ae580c0 100644 --- a/test/spec/ol/render.test.js +++ b/test/spec/ol/render.test.js @@ -22,16 +22,16 @@ describe('ol.render', function() { [0, 0, size[0] * pixelRatio, size[1] * pixelRatio]); expect(canvas.style.width).to.be(size[0] + 'px'); expect(canvas.style.height).to.be(size[1] + 'px'); - var transform = ol.vec.Mat4.makeTransform2D(goog.vec.Mat4.createNumber(), + var transform = ol.matrix.makeTransform(ol.matrix.create(), 0, 0, pixelRatio, pixelRatio, 0, 0, 0); - expect(ol.vec.Mat4.equals2D(render.transform_, transform)).to.be.ok(); + expect(ol.matrix.equals(render.transform_, transform)).to.be.ok(); }); }); }); -goog.require('goog.vec.Mat4'); +goog.require('ol.matrix'); goog.require('ol.render'); goog.require('ol.render.canvas.Immediate'); goog.require('ol.vec.Mat4'); diff --git a/test/spec/ol/render/canvasimmediate.test.js b/test/spec/ol/render/canvasimmediate.test.js index 132fc0e4dc..c182fe5ed8 100644 --- a/test/spec/ol/render/canvasimmediate.test.js +++ b/test/spec/ol/render/canvasimmediate.test.js @@ -198,10 +198,9 @@ describe('ol.render.canvas.Immediate', function() { }; var transform = [ - 0.0004088332670837288, 0, 0, 0, - 0, -0.0004088332670837288, 0, 0, - 0, 0, 1, 0, - 4480.991370439071, 1529.5752568707105, 0, 1 + 0.0004088332670837288, 0, + 0, -0.0004088332670837288, + 4480.991370439071, 1529.5752568707105 ]; var extent = [ diff --git a/test/spec/ol/renderer/canvas/canvaslayerrenderer.test.js b/test/spec/ol/renderer/canvas/canvaslayerrenderer.test.js index 2dead6d8c0..f760cd8e04 100644 --- a/test/spec/ol/renderer/canvas/canvaslayerrenderer.test.js +++ b/test/spec/ol/renderer/canvas/canvaslayerrenderer.test.js @@ -23,11 +23,11 @@ describe('ol.renderer.canvas.Layer', function() { }, size: [10, 10], pixelRatio: 1, - coordinateToPixelMatrix: goog.vec.Mat4.createNumber(), - pixelToCoordinateMatrix: goog.vec.Mat4.createNumber() + coordinateToPixelMatrix: ol.matrix.create(), + pixelToCoordinateMatrix: ol.matrix.create() }; renderer.getImageTransform = function() { - return goog.vec.Mat4.createNumberIdentity(); + return ol.matrix.create(); }; ol.renderer.Map.prototype.calculateMatrices2D(frameState); var layerState = layer.getLayerState(); @@ -62,7 +62,7 @@ describe('ol.renderer.canvas.Layer', function() { goog.require('ol.render.canvas'); -goog.require('goog.vec.Mat4'); +goog.require('ol.matrix'); goog.require('ol.layer.Image'); goog.require('ol.renderer.Map'); goog.require('ol.renderer.canvas.Layer'); diff --git a/test/spec/ol/renderer/webgl/webglimagelayerrenderer.test.js b/test/spec/ol/renderer/webgl/webglimagelayerrenderer.test.js index 663cff60f3..d35dee0e75 100644 --- a/test/spec/ol/renderer/webgl/webglimagelayerrenderer.test.js +++ b/test/spec/ol/renderer/webgl/webglimagelayerrenderer.test.js @@ -49,39 +49,32 @@ describe('ol.renderer.webgl.ImageLayer', function() { pixelRatio, viewCenter, viewResolution, viewRotation, imageExtent); var matrix = renderer.getProjectionMatrix(); - var input; - var output = goog.vec.Vec4.createNumber(); + var output = ol.matrix.create(); - input = goog.vec.Vec4.createFromValues(-1, -1, 0, 1); - goog.vec.Mat4.multVec4(matrix, input, output); + ol.matrix.multVec2(matrix, [-1, -1], output); expect(output[0]).to.eql(-6); expect(output[1]).to.eql(-6); - input = goog.vec.Vec4.createFromValues(1, -1, 0, 1); - goog.vec.Mat4.multVec4(matrix, input, output); + ol.matrix.multVec2(matrix, [1, -1], output); expect(output[0]).to.eql(2); expect(output[1]).to.eql(-6); - input = goog.vec.Vec4.createFromValues(-1, 1, 0, 1); - goog.vec.Mat4.multVec4(matrix, input, output); + ol.matrix.multVec2(matrix, [-1, 1], output); expect(output[0]).to.eql(-6); expect(output[1]).to.eql(6); - input = goog.vec.Vec4.createFromValues(1, 1, 0, 1); - goog.vec.Mat4.multVec4(matrix, input, output); + ol.matrix.multVec2(matrix, [1, 1], output); expect(output[0]).to.eql(2); expect(output[1]).to.eql(6); - input = goog.vec.Vec4.createFromValues(0, 0, 0, 1); - goog.vec.Mat4.multVec4(matrix, input, output); + ol.matrix.multVec2(matrix, [0, 0], output); expect(output[0]).to.eql(-2); expect(output[1]).to.eql(0); }); }); }); -goog.require('goog.vec.Mat4'); -goog.require('goog.vec.Vec4'); +goog.require('ol.matrix'); goog.require('ol.Map'); goog.require('ol.proj.common'); goog.require('ol.layer.Image'); From 6b4ee42c902900e2387b2be000ae8c48d55ef374 Mon Sep 17 00:00:00 2001 From: Andreas Hocevar Date: Wed, 22 Jun 2016 23:41:00 +0200 Subject: [PATCH 2/7] Refactor to a more convenient internal API --- externs/olx.js | 4 +- src/ol/dom/dom.js | 2 +- src/ol/geom/flat/transformflatgeom.js | 2 +- src/ol/geom/simplegeometry.js | 2 +- src/ol/map.js | 21 +- src/ol/matrix.js | 247 ------------------ src/ol/render.js | 5 +- src/ol/render/canvas/canvasimmediate.js | 24 +- src/ol/render/canvas/canvasreplay.js | 58 ++-- src/ol/render/webgl/webglreplay.js | 35 ++- .../canvas/canvasimagelayerrenderer.js | 25 +- src/ol/renderer/canvas/canvaslayerrenderer.js | 52 ++-- src/ol/renderer/canvas/canvasmaprenderer.js | 19 +- .../canvas/canvastilelayerrenderer.js | 14 +- .../canvas/canvasvectortilelayerrenderer.js | 33 ++- src/ol/renderer/dom/domimagelayerrenderer.js | 24 +- src/ol/renderer/dom/dommaprenderer.js | 18 +- src/ol/renderer/dom/domtilelayerrenderer.js | 28 +- src/ol/renderer/dom/domvectorlayerrenderer.js | 33 ++- src/ol/renderer/layerrenderer.js | 7 +- src/ol/renderer/maprenderer.js | 24 +- .../renderer/webgl/webglimagelayerrenderer.js | 66 +++-- src/ol/renderer/webgl/webgllayerrenderer.js | 14 +- .../renderer/webgl/webgltilelayerrenderer.js | 17 +- .../webgl/webglvectorlayerrenderer.js | 7 +- src/ol/source/imagevectorsource.js | 17 +- src/ol/source/rastersource.js | 6 +- src/ol/transform.js | 203 ++++++++++++++ src/ol/typedefs.js | 6 +- src/ol/vec/mat4.js | 2 +- test/spec/ol/dom/dom.test.js | 6 +- test/spec/ol/render.test.js | 8 +- .../canvas/canvaslayerrenderer.test.js | 8 +- .../webgl/webglimagelayerrenderer.test.js | 14 +- 34 files changed, 497 insertions(+), 554 deletions(-) delete mode 100644 src/ol/matrix.js create mode 100644 src/ol/transform.js diff --git a/externs/olx.js b/externs/olx.js index 0102779c48..b898b489f1 100644 --- a/externs/olx.js +++ b/externs/olx.js @@ -7383,7 +7383,7 @@ olx.view.FitOptions.prototype.maxZoom; /** * @typedef {{animate: boolean, * attributions: Object., - * coordinateToPixelMatrix: ol.Matrix, + * coordinateToPixelTransform: ol.Transform, * extent: (null|ol.Extent), * focus: ol.Coordinate, * index: number, @@ -7391,7 +7391,7 @@ olx.view.FitOptions.prototype.maxZoom; * layerStatesArray: Array., * logos: Object., * pixelRatio: number, - * pixelToCoordinateMatrix: ol.Matrix, + * pixelToCoordinateTransform: ol.Transform, * postRenderFunctions: Array., * size: ol.Size, * skippedFeatureUids: Object., diff --git a/src/ol/dom/dom.js b/src/ol/dom/dom.js index 222c838e3e..adb166bf41 100644 --- a/src/ol/dom/dom.js +++ b/src/ol/dom/dom.js @@ -127,7 +127,7 @@ ol.dom.setTransform = function(element, value) { /** * @param {!Element} element Element. - * @param {ol.Matrix} transform Matrix. + * @param {ol.Transform} transform Matrix. * @param {number=} opt_precision Precision. */ ol.dom.transformElement2D = function(element, transform, opt_precision) { diff --git a/src/ol/geom/flat/transformflatgeom.js b/src/ol/geom/flat/transformflatgeom.js index b28a9f68c2..ae097afe57 100644 --- a/src/ol/geom/flat/transformflatgeom.js +++ b/src/ol/geom/flat/transformflatgeom.js @@ -6,7 +6,7 @@ goog.provide('ol.geom.flat.transform'); * @param {number} offset Offset. * @param {number} end End. * @param {number} stride Stride. - * @param {ol.Matrix} transform Transform. + * @param {ol.Transform} transform Transform. * @param {Array.=} opt_dest Destination. * @return {Array.} Transformed coordinates. */ diff --git a/src/ol/geom/simplegeometry.js b/src/ol/geom/simplegeometry.js index c8c33f813f..ca634a9dc5 100644 --- a/src/ol/geom/simplegeometry.js +++ b/src/ol/geom/simplegeometry.js @@ -294,7 +294,7 @@ ol.geom.SimpleGeometry.prototype.translate = function(deltaX, deltaY) { /** * @param {ol.geom.SimpleGeometry} simpleGeometry Simple geometry. - * @param {ol.Matrix} transform Transform. + * @param {ol.Transform} transform Transform. * @param {Array.=} opt_dest Destination. * @return {Array.} Transformed flat coordinates. */ diff --git a/src/ol/map.js b/src/ol/map.js index 5042f91bac..a4b484b2b9 100644 --- a/src/ol/map.js +++ b/src/ol/map.js @@ -33,7 +33,7 @@ goog.require('ol.has'); goog.require('ol.interaction'); goog.require('ol.layer.Base'); goog.require('ol.layer.Group'); -goog.require('ol.matrix'); +goog.require('ol.transform'); goog.require('ol.object'); goog.require('ol.proj'); goog.require('ol.proj.common'); @@ -202,15 +202,15 @@ ol.Map = function(options) { /** * @private - * @type {ol.Matrix} + * @type {ol.Transform} */ - this.coordinateToPixelMatrix_ = ol.matrix.create(); + this.coordinateToPixelTransform_ = ol.transform.create(); /** * @private - * @type {ol.Matrix} + * @type {ol.Transform} */ - this.pixelToCoordinateMatrix_ = ol.matrix.create(); + this.pixelToCoordinateTransform_ = ol.transform.create(); /** * @private @@ -763,8 +763,7 @@ ol.Map.prototype.getCoordinateFromPixel = function(pixel) { if (!frameState) { return null; } else { - var vec2 = pixel.slice(); - return ol.matrix.multVec2(frameState.pixelToCoordinateMatrix, vec2, vec2); + return ol.transform.apply(frameState.pixelToCoordinateTransform, pixel.slice()); } }; @@ -852,8 +851,8 @@ ol.Map.prototype.getPixelFromCoordinate = function(coordinate) { if (!frameState) { return null; } else { - var vec2 = coordinate.slice(0, 2); - return ol.matrix.multVec2(frameState.coordinateToPixelMatrix, vec2, vec2); + return ol.transform.apply(frameState.coordinateToPixelTransform, + coordinate.slice(0, 2)); } }; @@ -1297,7 +1296,7 @@ ol.Map.prototype.renderFrame_ = function(time) { frameState = /** @type {olx.FrameState} */ ({ animate: false, attributions: {}, - coordinateToPixelMatrix: this.coordinateToPixelMatrix_, + coordinateToPixelTransform: this.coordinateToPixelTransform_, extent: extent, focus: !this.focus_ ? viewState.center : this.focus_, index: this.frameIndex_++, @@ -1305,7 +1304,7 @@ ol.Map.prototype.renderFrame_ = function(time) { layerStatesArray: layerStatesArray, logos: ol.object.assign({}, this.logos_), pixelRatio: this.pixelRatio_, - pixelToCoordinateMatrix: this.pixelToCoordinateMatrix_, + pixelToCoordinateTransform: this.pixelToCoordinateTransform_, postRenderFunctions: [], size: size, skippedFeatureUids: this.skippedFeatureUids_, diff --git a/src/ol/matrix.js b/src/ol/matrix.js deleted file mode 100644 index 7fac02b363..0000000000 --- a/src/ol/matrix.js +++ /dev/null @@ -1,247 +0,0 @@ -goog.provide('ol.matrix'); - -/** - * Collection of matrix transformation functions. The element order is - * compatible with the [SVGMatrix interface](https://developer.mozilla.org/en-US/docs/Web/API/SVGMatrix): - * ``` - * [ a c e ] - * [ b d f ] - * [ 0 0 1 ] - * ``` - */ - - -/** - * Create an identity matrix. - * @return {!ol.Matrix} Identity matrix. - */ -ol.matrix.create = function() { - return [1, 0, 0, 1, 0, 0]; -}; - - -/** - * Check if two matrices are equal. - * @param {!ol.Matrix} mat1 Matrix 1. - * @param {!ol.Matrix} mat2 Matrix 2. - * @return {boolean} Matrix 1 and Matrix 2 are equal. - */ -ol.matrix.equals = function(mat1, mat2) { - return mat1[0] == mat2[0] && - mat1[1] == mat2[1] && - mat1[2] == mat2[2] && - mat1[3] == mat2[3] && - mat1[4] == mat2[4] && - mat1[5] == mat2[5]; -}; - - -/** - * Resets the given matrix to an identity matrix. - * @param {!ol.Matrix} mat Matrix. - * @return {!ol.Matrix} Matrix. - */ -ol.matrix.makeIdentity = function(mat) { - return ol.matrix.setTransform(mat, 1, 0, 0, 1, 0, 0); -}; - - -/** - * Multiply two matrices with each other. - * @param {!ol.Matrix} mat1 Matrix 1. - * @param {!ol.Matrix} mat2 Matrix 2. - * @param {ol.Matrix=} opt_mat Optional matrix for the result. - * @return {!ol.Matrix} Result matrix. - */ -ol.matrix.multiply = function(mat1, mat2, opt_mat) { - var mat = opt_mat ? opt_mat : ol.matrix.create(); - ol.matrix.setTransform(mat, mat1[0], mat1[1], mat1[2], mat1[3], mat1[4], mat1[5]); - return ol.matrix.transform(mat, mat2[0], mat2[1], mat2[2], mat2[3], mat2[4], mat2[5]); -}; - -/** - * Set the transform for a given matrix. - * @param {!ol.Matrix} mat Matrix. - * @param {number} a The a component of the matrix. - * @param {number} b The b component of the matrix. - * @param {number} c The c component of the matrix. - * @param {number} d The d component of the matrix. - * @param {number} e The e component of the matrix. - * @param {number} f The f component of the matrix. - * @return {!ol.Matrix} Matrix with transform applied. - */ -ol.matrix.setTransform = function(mat, a, b, c, d, e, f) { - mat[0] = a; - mat[1] = b; - mat[2] = c; - mat[3] = d; - mat[4] = e; - mat[5] = f; - return mat; -}; - - -/** - * Set transform on one matrix from another matrix. - * @param {!ol.Matrix} mat1 Matrix to set transform to. - * @param {!ol.Matrix} mat2 Matrix to set transform from. - * @return {!ol.Matrix} mat1 with transform from mat2 applied. - */ -ol.matrix.setFromArray = function(mat1, mat2) { - mat1[0] = mat2[0]; - mat1[1] = mat2[1]; - mat1[2] = mat2[2]; - mat1[3] = mat2[3]; - mat1[4] = mat2[4]; - mat1[5] = mat2[5]; - return mat1; -}; - - -/** - * Rotates the given matrix. - * @param {!ol.Matrix} mat Matrix. - * @param {number} rotation Angle in radians. - * @return {!ol.Matrix} Rotated matrix. - */ -ol.matrix.rotate = function(mat, rotation) { - var cos = Math.cos(rotation); - var sin = Math.sin(rotation); - return ol.matrix.transform(mat, cos, sin, -sin, cos, 0, 0); -}; - - -/** - * Multiplies the given matrix with new matrix values. - * @see {@link ol.Matrix#multiply}. - * - * @param {!ol.Matrix} mat Matrix. - * @param {number} a The a component of the matrix. - * @param {number} b The b component of the matrix. - * @param {number} c The c component of the matrix. - * @param {number} d The d component of the matrix. - * @param {number} e The e component of the matrix. - * @param {number} f The f component of the matrix. - * @return {!ol.Matrix} Transformed matrix. - */ -ol.matrix.transform = function(mat, a, b, c, d, e, f) { - var matA = mat[0]; - var matB = mat[1]; - var matC = mat[2]; - var matD = mat[3]; - var matE = mat[4]; - var matF = mat[5]; - - mat[0] = matA * a + matC * b; - mat[1] = matB * a + matD * b; - mat[2] = matA * c + matC * d; - mat[3] = matB * c + matD * d; - mat[4] = matA * e + matC * f + matE; - mat[5] = matB * e + matD * f + matF; - - return mat; -}; - - -/** - * @param {!ol.Matrix} mat Matrix. - * @param {number} translateX1 Translate X1. - * @param {number} translateY1 Translate Y1. - * @param {number} scaleX Scale X. - * @param {number} scaleY Scale Y. - * @param {number} rotation Rotation. - * @param {number} translateX2 Translate X2. - * @param {number} translateY2 Translate Y2. - * @return {!ol.Matrix} Matrix. - */ -ol.matrix.makeTransform = function(mat, translateX1, translateY1, - scaleX, scaleY, rotation, translateX2, translateY2) { - ol.matrix.makeIdentity(mat); - if (translateX1 !== 0 || translateY1 !== 0) { - ol.matrix.translate(mat, translateX1, translateY1); - } - if (scaleX != 1 || scaleY != 1) { - ol.matrix.scale(mat, scaleX, scaleY); - } - if (rotation !== 0) { - ol.matrix.rotate(mat, rotation); - } - if (translateX2 !== 0 || translateY2 !== 0) { - ol.matrix.translate(mat, translateX2, translateY2); - } - return mat; -}; - - -/** - * Transforms the given vector with the given matrix storing the resulting, - * transformed vector into resultVec. - * - * @param {ol.Matrix} mat The matrix supplying the transformation. - * @param {Array.} vec The 2 element vector to transform. - * @param {Array.} resultVec The 2 element vector to receive the results - * (may be vec). - * @return {Array.} return resultVec so that operations can be - * chained together. - */ -ol.matrix.multVec2 = function(mat, vec, resultVec) { - var x = vec[0], y = vec[1]; - resultVec[0] = mat[0] * x + mat[2] * y + mat[4]; - resultVec[1] = mat[1] * x + mat[3] * y + mat[5]; - return resultVec; -}; - - -/** - * Scales the given matrix. - * @param {!ol.Matrix} mat Matrix. - * @param {number} sx Scale factor x. - * @param {number} sy Scale factor y. - * @return {!ol.Matrix} The scaled matrix. - */ -ol.matrix.scale = function(mat, sx, sy) { - return ol.matrix.transform(mat, sx, 0, 0, sy, 0, 0); -}; - - -/** - * Translate the given matrix. - * @param {!ol.Matrix} mat Matrix. - * @param {number} tx Translation x. - * @param {number} ty Translation y. - * @return {!ol.Matrix} The translated matrix. - */ -ol.matrix.translate = function(mat, tx, ty) { - return ol.matrix.transform(mat, 1, 0, 0, 1, tx, ty); -}; - - -/** - * Invert the given matrix. - * @param {!ol.Matrix} mat Matrix. - * @param {ol.Matrix=} opt_mat Optional matrix for the result. - * @return {!ol.Matrix} Inverse of the matrix. - */ -ol.matrix.invert = function(mat, opt_mat) { - var result = opt_mat ? opt_mat : ol.matrix.create(); - var det = ol.matrix.determinant(mat); - goog.asserts.assert(det !== 0, 'Matrix cannot be inverted.'); - - result[0] = mat[3] / det; - result[1] = -mat[1] / det; - result[2] = -mat[2] / det; - result[3] = mat[0] / det; - result[4] = (mat[2] * mat[5] - mat[3] * mat[4]) / det; - result[5] = -(mat[0] * mat[5] - mat[1] * mat[4]) / det; - return result; -}; - - -/** - * Returns the determinant of the given matrix. - * @param {!ol.Matrix} mat Matrix. - * @return {number} Determinant. - */ -ol.matrix.determinant = function(mat) { - return mat[0] * mat[3] - mat[1] * mat[2]; -}; diff --git a/src/ol/render.js b/src/ol/render.js index 81ec3fbcfa..d8c66a7b2d 100644 --- a/src/ol/render.js +++ b/src/ol/render.js @@ -1,6 +1,6 @@ goog.provide('ol.render'); -goog.require('ol.matrix'); +goog.require('ol.transform'); goog.require('ol.render.canvas.Immediate'); @@ -36,8 +36,7 @@ ol.render.toContext = function(context, opt_options) { canvas.style.height = size[1] + 'px'; } var extent = [0, 0, canvas.width, canvas.height]; - var transform = ol.matrix.makeTransform(ol.matrix.create(), - 0, 0, pixelRatio, pixelRatio, 0, 0, 0); + var transform = ol.transform.scale(ol.transform.create(), pixelRatio, pixelRatio); return new ol.render.canvas.Immediate(context, pixelRatio, extent, transform, 0); }; diff --git a/src/ol/render/canvas/canvasimmediate.js b/src/ol/render/canvas/canvasimmediate.js index e600c38cc6..c4dd336dda 100644 --- a/src/ol/render/canvas/canvasimmediate.js +++ b/src/ol/render/canvas/canvasimmediate.js @@ -5,7 +5,7 @@ goog.provide('ol.render.canvas.Immediate'); goog.require('goog.asserts'); -goog.require('ol.matrix'); +goog.require('ol.transform'); goog.require('ol.array'); goog.require('ol.color'); goog.require('ol.colorlike'); @@ -31,7 +31,7 @@ goog.require('ol.render.canvas'); * @param {CanvasRenderingContext2D} context Context. * @param {number} pixelRatio Pixel ratio. * @param {ol.Extent} extent Extent. - * @param {ol.Matrix} transform Transform. + * @param {ol.Transform} transform Transform. * @param {number} viewRotation View rotation. * @struct */ @@ -58,7 +58,7 @@ ol.render.canvas.Immediate = function(context, pixelRatio, extent, transform, vi /** * @private - * @type {ol.Matrix} + * @type {ol.Transform} */ this.transform_ = transform; @@ -226,9 +226,9 @@ ol.render.canvas.Immediate = function(context, pixelRatio, extent, transform, vi /** * @private - * @type {ol.Matrix} + * @type {ol.Transform} */ - this.tmpLocalTransform_ = ol.matrix.create(); + this.tmpLocalTransform_ = ol.transform.create(); }; ol.inherits(ol.render.canvas.Immediate, ol.render.VectorContext); @@ -272,9 +272,10 @@ ol.render.canvas.Immediate.prototype.drawImages_ = function(flatCoordinates, off if (rotation !== 0 || this.imageScale_ != 1) { var centerX = x + this.imageAnchorX_; var centerY = y + this.imageAnchorY_; - ol.matrix.makeTransform(localTransform, - centerX, centerY, this.imageScale_, this.imageScale_, - rotation, -centerX, -centerY); + ol.transform.translate(ol.transform.reset(localTransform), centerX, centerY); + ol.transform.scale(localTransform, this.imageScale_, this.imageScale_); + ol.transform.rotate(localTransform, rotation); + ol.transform.translate(localTransform, -centerX, -centerY); context.setTransform.apply(context, localTransform); } context.drawImage(this.image_, this.imageOriginX_, this.imageOriginY_, @@ -319,8 +320,11 @@ ol.render.canvas.Immediate.prototype.drawText_ = function(flatCoordinates, offse var x = pixelCoordinates[offset] + this.textOffsetX_; var y = pixelCoordinates[offset + 1] + this.textOffsetY_; if (this.textRotation_ !== 0 || this.textScale_ != 1) { - var localTransform = ol.matrix.makeTransform(this.tmpLocalTransform_, - x, y, this.textScale_, this.textScale_, this.textRotation_, -x, -y); + var localTransform = ol.transform.reset(this.tmpLocalTransform_); + ol.transform.translate(localTransform, x, y); + ol.transform.scale(localTransform, this.textScale_, this.textScale_); + ol.transform.rotate(localTransform, this.textRotation_); + ol.transform.translate(localTransform, -x, -y); context.setTransform.apply(context, localTransform); } if (this.textStrokeState_) { diff --git a/src/ol/render/canvas/canvasreplay.js b/src/ol/render/canvas/canvasreplay.js index 74e451dfab..9f1085ccae 100644 --- a/src/ol/render/canvas/canvasreplay.js +++ b/src/ol/render/canvas/canvasreplay.js @@ -9,7 +9,7 @@ goog.provide('ol.render.canvas.ReplayGroup'); goog.provide('ol.render.canvas.TextReplay'); goog.require('goog.asserts'); -goog.require('ol.matrix'); +goog.require('ol.transform'); goog.require('ol'); goog.require('ol.array'); goog.require('ol.color'); @@ -116,9 +116,9 @@ ol.render.canvas.Replay = function(tolerance, maxExtent, resolution) { /** * @private - * @type {ol.Matrix} + * @type {ol.Transform} */ - this.renderedTransform_ = ol.matrix.create(); + this.renderedTransform_ = ol.transform.create(); /** * @protected @@ -134,15 +134,15 @@ ol.render.canvas.Replay = function(tolerance, maxExtent, resolution) { /** * @private - * @type {ol.Matrix} + * @type {ol.Transform} */ - this.tmpLocalTransform_ = ol.matrix.create(); + this.tmpLocalTransform_ = ol.transform.create(); /** * @private - * @type {ol.Matrix} + * @type {ol.Transform} */ - this.tmpLocalTransformInv_ = ol.matrix.create(); + this.tmpLocalTransformInv_ = ol.transform.create(); }; ol.inherits(ol.render.canvas.Replay, ol.render.VectorContext); @@ -222,7 +222,7 @@ ol.render.canvas.Replay.prototype.beginGeometry = function(geometry, feature) { * @private * @param {CanvasRenderingContext2D} context Context. * @param {number} pixelRatio Pixel ratio. - * @param {ol.Matrix} transform Transform. + * @param {ol.Transform} transform Transform. * @param {number} viewRotation View rotation. * @param {Object.} skippedFeaturesHash Ids of features * to skip. @@ -239,13 +239,13 @@ ol.render.canvas.Replay.prototype.replay_ = function( instructions, featureCallback, opt_hitExtent) { /** @type {Array.} */ var pixelCoordinates; - if (ol.matrix.equals(transform, this.renderedTransform_)) { + if (ol.array.equals(transform, this.renderedTransform_)) { pixelCoordinates = this.pixelCoordinates_; } else { pixelCoordinates = ol.geom.flat.transform.transform2D( this.coordinates, 0, this.coordinates.length, 2, transform, this.pixelCoordinates_); - ol.matrix.setFromArray(this.renderedTransform_, transform); + ol.transform.setFromArray(this.renderedTransform_, transform); goog.asserts.assert(pixelCoordinates === this.pixelCoordinates_, 'pixelCoordinates should be the same as this.pixelCoordinates_'); } @@ -331,9 +331,10 @@ ol.render.canvas.Replay.prototype.replay_ = function( if (scale != 1 || rotation !== 0) { var centerX = x + anchorX; var centerY = y + anchorY; - ol.matrix.makeTransform( - localTransform, centerX, centerY, scale, scale, - rotation, -centerX, -centerY); + ol.transform.translate(ol.transform.reset(localTransform), centerX, centerY); + ol.transform.scale(localTransform, scale, scale); + ol.transform.rotate(localTransform, rotation); + ol.transform.translate(localTransform, -centerX, -centerY); context.transform.apply(context, localTransform); } var alpha = context.globalAlpha; @@ -351,7 +352,7 @@ ol.render.canvas.Replay.prototype.replay_ = function( context.globalAlpha = alpha; } if (scale != 1 || rotation !== 0) { - ol.matrix.invert(localTransform, localTransformInv); + ol.transform.invert(ol.transform.setFromArray(localTransformInv, localTransform)); context.transform.apply(context, localTransformInv); } } @@ -389,8 +390,10 @@ ol.render.canvas.Replay.prototype.replay_ = function( x = pixelCoordinates[d] + offsetX; y = pixelCoordinates[d + 1] + offsetY; if (scale != 1 || rotation !== 0) { - ol.matrix.makeTransform( - localTransform, x, y, scale, scale, rotation, -x, -y); + ol.transform.translate(ol.transform.reset(localTransform), x, y); + ol.transform.scale(localTransform, scale, scale); + ol.transform.rotate(localTransform, rotation); + ol.transform.translate(localTransform, -x, -y); context.transform.apply(context, localTransform); } @@ -422,7 +425,7 @@ ol.render.canvas.Replay.prototype.replay_ = function( } if (scale != 1 || rotation !== 0) { - ol.matrix.invert(localTransform, localTransformInv); + ol.transform.invert(ol.transform.setFromArray(localTransformInv, localTransform)); context.transform.apply(context, localTransformInv); } } @@ -540,7 +543,7 @@ ol.render.canvas.Replay.prototype.replay_ = function( /** * @param {CanvasRenderingContext2D} context Context. * @param {number} pixelRatio Pixel ratio. - * @param {ol.Matrix} transform Transform. + * @param {ol.Transform} transform Transform. * @param {number} viewRotation View rotation. * @param {Object.} skippedFeaturesHash Ids of features * to skip. @@ -555,7 +558,7 @@ ol.render.canvas.Replay.prototype.replay = function( /** * @param {CanvasRenderingContext2D} context Context. - * @param {ol.Matrix} transform Transform. + * @param {ol.Transform} transform Transform. * @param {number} viewRotation View rotation. * @param {Object.} skippedFeaturesHash Ids of features * to skip. @@ -1858,9 +1861,9 @@ ol.render.canvas.ReplayGroup = function( /** * @private - * @type {ol.Matrix} + * @type {ol.Transform} */ - this.hitDetectionTransform_ = ol.matrix.create(); + this.hitDetectionTransform_ = ol.transform.create(); }; @@ -1894,10 +1897,11 @@ ol.render.canvas.ReplayGroup.prototype.finish = function() { ol.render.canvas.ReplayGroup.prototype.forEachFeatureAtCoordinate = function( coordinate, resolution, rotation, skippedFeaturesHash, callback) { - var transform = this.hitDetectionTransform_; - ol.matrix.makeTransform(transform, 0.5, 0.5, - 1 / resolution, -1 / resolution, -rotation, - -coordinate[0], -coordinate[1]); + var transform = ol.transform.reset(this.hitDetectionTransform_); + ol.transform.translate(transform, 0.5, 0.5); + ol.transform.scale(transform, 1 / resolution, -1 / resolution); + ol.transform.rotate(transform, -rotation); + ol.transform.translate(transform, -coordinate[0], -coordinate[1]); var context = this.hitDetectionContext_; context.clearRect(0, 0, 1, 1); @@ -1966,7 +1970,7 @@ ol.render.canvas.ReplayGroup.prototype.isEmpty = function() { /** * @param {CanvasRenderingContext2D} context Context. * @param {number} pixelRatio Pixel ratio. - * @param {ol.Matrix} transform Transform. + * @param {ol.Transform} transform Transform. * @param {number} viewRotation View rotation. * @param {Object.} skippedFeaturesHash Ids of features * to skip. @@ -2019,7 +2023,7 @@ ol.render.canvas.ReplayGroup.prototype.replay = function(context, pixelRatio, /** * @private * @param {CanvasRenderingContext2D} context Context. - * @param {ol.Matrix} transform Transform. + * @param {ol.Transform} transform Transform. * @param {number} viewRotation View rotation. * @param {Object.} skippedFeaturesHash Ids of features * to skip. diff --git a/src/ol/render/webgl/webglreplay.js b/src/ol/render/webgl/webglreplay.js index a614ae537f..360e813f09 100644 --- a/src/ol/render/webgl/webglreplay.js +++ b/src/ol/render/webgl/webglreplay.js @@ -2,7 +2,7 @@ goog.provide('ol.render.webgl.ImageReplay'); goog.provide('ol.render.webgl.ReplayGroup'); goog.require('goog.asserts'); -goog.require('ol.matrix'); +goog.require('ol.transform'); goog.require('ol.extent'); goog.require('ol.object'); goog.require('ol.render.IReplayGroup'); @@ -116,16 +116,16 @@ ol.render.webgl.ImageReplay = function(tolerance, maxExtent) { this.opacity_ = undefined; /** - * @type {ol.Matrix} + * @type {ol.Transform} * @private */ - this.offsetRotateMatrix_ = ol.matrix.create(); + this.offsetRotateMatrix_ = ol.transform.create(); /** - * @type {ol.Matrix} + * @type {ol.Transform} * @private */ - this.offsetScaleMatrix_ = ol.matrix.create(); + this.offsetScaleMatrix_ = ol.transform.create(); /** * @type {number|undefined} @@ -140,10 +140,10 @@ ol.render.webgl.ImageReplay = function(tolerance, maxExtent) { this.originY_ = undefined; /** - * @type {ol.Matrix} + * @type {ol.Transform} * @private */ - this.projectionMatrix_ = ol.matrix.create(); + this.projectionMatrix_ = ol.transform.create(); /** * @private @@ -552,22 +552,17 @@ ol.render.webgl.ImageReplay.prototype.replay = function(context, false, 32, 28); // set the "uniform" values - var projectionMatrix = this.projectionMatrix_; - ol.matrix.makeTransform(projectionMatrix, - 0.0, 0.0, - 2 / (resolution * size[0]), - 2 / (resolution * size[1]), - -rotation, - -(center[0] - this.origin_[0]), -(center[1] - this.origin_[1])); + var projectionMatrix = ol.transform.reset(this.projectionMatrix_); + ol.transform.scale(projectionMatrix, 2 / (resolution * size[0]), 2 / (resolution * size[1])); + ol.transform.rotate(projectionMatrix, -rotation); + ol.transform.translate(projectionMatrix, -(center[0] - this.origin_[0]), -(center[1] - this.origin_[1])); - var offsetScaleMatrix = this.offsetScaleMatrix_; - ol.matrix.makeIdentity(offsetScaleMatrix); - ol.matrix.scale(offsetScaleMatrix, 2 / size[0], 2 / size[1]); + var offsetScaleMatrix = ol.transform.reset(this.offsetScaleMatrix_); + ol.transform.scale(offsetScaleMatrix, 2 / size[0], 2 / size[1]); - var offsetRotateMatrix = this.offsetRotateMatrix_; - ol.matrix.makeIdentity(offsetRotateMatrix); + var offsetRotateMatrix = ol.transform.reset(this.offsetRotateMatrix_); if (rotation !== 0) { - ol.matrix.rotate(offsetRotateMatrix, -rotation); + ol.transform.rotate(offsetRotateMatrix, -rotation); } gl.uniformMatrix4fv(locations.u_projectionMatrix, false, ol.vec.Mat4.fromMatrix(projectionMatrix)); diff --git a/src/ol/renderer/canvas/canvasimagelayerrenderer.js b/src/ol/renderer/canvas/canvasimagelayerrenderer.js index da32751b22..0dd67c827d 100644 --- a/src/ol/renderer/canvas/canvasimagelayerrenderer.js +++ b/src/ol/renderer/canvas/canvasimagelayerrenderer.js @@ -1,7 +1,7 @@ goog.provide('ol.renderer.canvas.ImageLayer'); goog.require('goog.asserts'); -goog.require('ol.matrix'); +goog.require('ol.transform'); goog.require('ol.functions'); goog.require('ol.ImageBase'); goog.require('ol.ViewHint'); @@ -30,13 +30,13 @@ ol.renderer.canvas.ImageLayer = function(imageLayer) { /** * @private - * @type {ol.Matrix} + * @type {ol.Transform} */ - this.imageTransform_ = ol.matrix.create(); + this.imageTransform_ = ol.transform.create(); /** * @private - * @type {?ol.Matrix} + * @type {?ol.Transform} */ this.imageTransformInv_ = null; @@ -82,9 +82,8 @@ ol.renderer.canvas.ImageLayer.prototype.forEachLayerAtPixel = function(pixel, fr if (this.getLayer().getSource() instanceof ol.source.ImageVector) { // for ImageVector sources use the original hit-detection logic, // so that for example also transparent polygons are detected - var coordinate = pixel.slice(); - ol.matrix.multVec2( - frameState.pixelToCoordinateMatrix, coordinate, coordinate); + var coordinate = ol.transform.apply( + frameState.pixelToCoordinateTransform, pixel.slice()); var hasFeature = this.forEachFeatureAtCoordinate( coordinate, frameState, ol.functions.TRUE, this); @@ -96,8 +95,7 @@ ol.renderer.canvas.ImageLayer.prototype.forEachLayerAtPixel = function(pixel, fr } else { // for all other image sources directly check the image if (!this.imageTransformInv_) { - this.imageTransformInv_ = ol.matrix.create(); - ol.matrix.invert(this.imageTransform_, this.imageTransformInv_); + this.imageTransformInv_ = ol.transform.invert(this.imageTransform_.slice()); } var pixelOnCanvas = @@ -189,11 +187,12 @@ ol.renderer.canvas.ImageLayer.prototype.prepareFrame = function(frameState, laye var imagePixelRatio = image.getPixelRatio(); var scale = pixelRatio * imageResolution / (viewResolution * imagePixelRatio); - ol.matrix.makeTransform(this.imageTransform_, + var transform = ol.transform.reset(this.imageTransform_); + ol.transform.translate(transform, pixelRatio * frameState.size[0] / 2, - pixelRatio * frameState.size[1] / 2, - scale, scale, - 0, + pixelRatio * frameState.size[1] / 2); + ol.transform.scale(transform, scale, scale); + ol.transform.translate(transform, imagePixelRatio * (imageExtent[0] - viewCenter[0]) / imageResolution, imagePixelRatio * (viewCenter[1] - imageExtent[3]) / imageResolution); this.imageTransformInv_ = null; diff --git a/src/ol/renderer/canvas/canvaslayerrenderer.js b/src/ol/renderer/canvas/canvaslayerrenderer.js index b4b42fa79e..d4dbdfa296 100644 --- a/src/ol/renderer/canvas/canvaslayerrenderer.js +++ b/src/ol/renderer/canvas/canvaslayerrenderer.js @@ -1,7 +1,7 @@ goog.provide('ol.renderer.canvas.Layer'); goog.require('goog.asserts'); -goog.require('ol.matrix'); +goog.require('ol.transform'); goog.require('ol.extent'); goog.require('ol.layer.Layer'); goog.require('ol.render.Event'); @@ -22,9 +22,9 @@ ol.renderer.canvas.Layer = function(layer) { /** * @private - * @type {ol.Matrix} + * @type {ol.Transform} */ - this.transform_ = ol.matrix.create(); + this.transform_ = ol.transform.create(); }; ol.inherits(ol.renderer.canvas.Layer, ol.renderer.Layer); @@ -57,14 +57,10 @@ ol.renderer.canvas.Layer.prototype.composeFrame = function(frameState, layerStat var bottomRight = ol.extent.getBottomRight(extent); var bottomLeft = ol.extent.getBottomLeft(extent); - ol.matrix.multVec2(frameState.coordinateToPixelMatrix, - topLeft, topLeft); - ol.matrix.multVec2(frameState.coordinateToPixelMatrix, - topRight, topRight); - ol.matrix.multVec2(frameState.coordinateToPixelMatrix, - bottomRight, bottomRight); - ol.matrix.multVec2(frameState.coordinateToPixelMatrix, - bottomLeft, bottomLeft); + ol.transform.apply(frameState.coordinateToPixelTransform, topLeft); + ol.transform.apply(frameState.coordinateToPixelTransform, topRight); + ol.transform.apply(frameState.coordinateToPixelTransform, bottomRight); + ol.transform.apply(frameState.coordinateToPixelTransform, bottomLeft); context.save(); ol.render.canvas.rotateAtOffset(context, -rotation, width / 2, height / 2); @@ -108,7 +104,7 @@ ol.renderer.canvas.Layer.prototype.composeFrame = function(frameState, layerStat * @param {ol.render.EventType} type Event type. * @param {CanvasRenderingContext2D} context Context. * @param {olx.FrameState} frameState Frame state. - * @param {ol.Matrix=} opt_transform Transform. + * @param {ol.Transform=} opt_transform Transform. * @private */ ol.renderer.canvas.Layer.prototype.dispatchComposeEvent_ = function(type, context, frameState, opt_transform) { @@ -134,7 +130,7 @@ ol.renderer.canvas.Layer.prototype.dispatchComposeEvent_ = function(type, contex /** * @param {CanvasRenderingContext2D} context Context. * @param {olx.FrameState} frameState Frame state. - * @param {ol.Matrix=} opt_transform Transform. + * @param {ol.Transform=} opt_transform Transform. * @protected */ ol.renderer.canvas.Layer.prototype.dispatchPostComposeEvent = function(context, frameState, opt_transform) { @@ -146,7 +142,7 @@ ol.renderer.canvas.Layer.prototype.dispatchPostComposeEvent = function(context, /** * @param {CanvasRenderingContext2D} context Context. * @param {olx.FrameState} frameState Frame state. - * @param {ol.Matrix=} opt_transform Transform. + * @param {ol.Transform=} opt_transform Transform. * @protected */ ol.renderer.canvas.Layer.prototype.dispatchPreComposeEvent = function(context, frameState, opt_transform) { @@ -158,7 +154,7 @@ ol.renderer.canvas.Layer.prototype.dispatchPreComposeEvent = function(context, f /** * @param {CanvasRenderingContext2D} context Context. * @param {olx.FrameState} frameState Frame state. - * @param {ol.Matrix=} opt_transform Transform. + * @param {ol.Transform=} opt_transform Transform. * @protected */ ol.renderer.canvas.Layer.prototype.dispatchRenderEvent = function(context, frameState, opt_transform) { @@ -174,7 +170,7 @@ ol.renderer.canvas.Layer.prototype.getImage = goog.abstractMethod; /** - * @return {!ol.Matrix} Image transform. + * @return {!ol.Transform} Image transform. */ ol.renderer.canvas.Layer.prototype.getImageTransform = goog.abstractMethod; @@ -183,19 +179,19 @@ ol.renderer.canvas.Layer.prototype.getImageTransform = goog.abstractMethod; * @param {olx.FrameState} frameState Frame state. * @param {number} offsetX Offset on the x-axis in view coordinates. * @protected - * @return {!ol.Matrix} Transform. + * @return {!ol.Transform} Transform. */ ol.renderer.canvas.Layer.prototype.getTransform = function(frameState, offsetX) { var viewState = frameState.viewState; var pixelRatio = frameState.pixelRatio; - return ol.matrix.makeTransform(this.transform_, - pixelRatio * frameState.size[0] / 2, - pixelRatio * frameState.size[1] / 2, - pixelRatio / viewState.resolution, - -pixelRatio / viewState.resolution, - -viewState.rotation, - -viewState.center[0] + offsetX, - -viewState.center[1]); + var transform = ol.transform.reset(this.transform_); + ol.transform.translate(transform, + pixelRatio * frameState.size[0] / 2, pixelRatio * frameState.size[1] / 2); + ol.transform.scale(transform, + pixelRatio / viewState.resolution, -pixelRatio / viewState.resolution); + ol.transform.rotate(transform, -viewState.rotation); + return ol.transform.translate(transform, + -viewState.center[0] + offsetX, -viewState.center[1]); }; @@ -209,13 +205,11 @@ ol.renderer.canvas.Layer.prototype.prepareFrame = goog.abstractMethod; /** * @param {ol.Pixel} pixelOnMap Pixel. - * @param {ol.Matrix} imageTransformInv The transformation matrix + * @param {ol.Transform} imageTransformInv The transformation matrix * to convert from a map pixel to a canvas pixel. * @return {ol.Pixel} The pixel. * @protected */ ol.renderer.canvas.Layer.prototype.getPixelOnCanvas = function(pixelOnMap, imageTransformInv) { - var pixelOnCanvas = [0, 0]; - ol.matrix.multVec2(imageTransformInv, pixelOnMap, pixelOnCanvas); - return pixelOnCanvas; + return ol.transform.apply(imageTransformInv, pixelOnMap.slice()); }; diff --git a/src/ol/renderer/canvas/canvasmaprenderer.js b/src/ol/renderer/canvas/canvasmaprenderer.js index 23afa5ac33..ee9199018c 100644 --- a/src/ol/renderer/canvas/canvasmaprenderer.js +++ b/src/ol/renderer/canvas/canvasmaprenderer.js @@ -3,7 +3,7 @@ goog.provide('ol.renderer.canvas.Map'); goog.require('goog.asserts'); -goog.require('ol.matrix'); +goog.require('ol.transform'); goog.require('ol'); goog.require('ol.RendererType'); goog.require('ol.array'); @@ -62,9 +62,9 @@ ol.renderer.canvas.Map = function(container, map) { /** * @private - * @type {ol.Matrix} + * @type {ol.Transform} */ - this.transform_ = ol.matrix.create(); + this.transform_ = ol.transform.create(); }; ol.inherits(ol.renderer.canvas.Map, ol.renderer.Map); @@ -117,16 +117,19 @@ ol.renderer.canvas.Map.prototype.dispatchComposeEvent_ = function(type, frameSta /** * @param {olx.FrameState} frameState Frame state. * @protected - * @return {!ol.Matrix} Transform. + * @return {!ol.Transform} Transform. */ ol.renderer.canvas.Map.prototype.getTransform = function(frameState) { var pixelRatio = frameState.pixelRatio; var viewState = frameState.viewState; var resolution = viewState.resolution; - return ol.matrix.makeTransform(this.transform_, - this.canvas_.width / 2, this.canvas_.height / 2, - pixelRatio / resolution, -pixelRatio / resolution, - -viewState.rotation, + var transform = ol.transform.reset(this.transform_); + ol.transform.translate(transform, + this.canvas_.width / 2, this.canvas_.height / 2); + ol.transform.scale(transform, + pixelRatio / resolution, -pixelRatio / resolution); + ol.transform.rotate(transform, -viewState.rotation); + return ol.transform.translate(transform, -viewState.center[0], -viewState.center[1]); }; diff --git a/src/ol/renderer/canvas/canvastilelayerrenderer.js b/src/ol/renderer/canvas/canvastilelayerrenderer.js index 7b640f766b..d88fe8c725 100644 --- a/src/ol/renderer/canvas/canvastilelayerrenderer.js +++ b/src/ol/renderer/canvas/canvastilelayerrenderer.js @@ -3,7 +3,7 @@ goog.provide('ol.renderer.canvas.TileLayer'); goog.require('goog.asserts'); -goog.require('ol.matrix'); +goog.require('ol.transform'); goog.require('ol.TileRange'); goog.require('ol.TileState'); goog.require('ol.array'); @@ -50,9 +50,9 @@ ol.renderer.canvas.TileLayer = function(tileLayer) { /** * @private - * @type {ol.Matrix} + * @type {ol.Transform} */ - this.imageTransform_ = ol.matrix.create(); + this.imageTransform_ = ol.transform.create(); /** * @protected @@ -326,9 +326,11 @@ ol.renderer.canvas.TileLayer.prototype.renderTileImages = function(context, fram if (hasRenderListeners) { var dX = drawOffsetX - offsetX / drawScale + offsetX; var dY = drawOffsetY - offsetY / drawScale + offsetY; - var imageTransform = ol.matrix.makeTransform(this.imageTransform_, - drawSize / 2 - dX, drawSize / 2 - dY, pixelScale, -pixelScale, - -rotation, -center[0] + dX / pixelScale, -center[1] - dY / pixelScale); + var imageTransform = ol.transform.reset(this.imageTransform_); + ol.transform.translate(imageTransform, drawSize / 2 - dX, drawSize / 2 - dY); + ol.transform.scale(imageTransform, pixelScale, -pixelScale); + ol.transform.rotate(imageTransform, -rotation); + ol.transform.translate(imageTransform, -center[0] + dX / pixelScale, -center[1] - dY / pixelScale); this.dispatchRenderEvent(renderContext, frameState, imageTransform); } if (rotation || hasRenderListeners) { diff --git a/src/ol/renderer/canvas/canvasvectortilelayerrenderer.js b/src/ol/renderer/canvas/canvasvectortilelayerrenderer.js index e701955383..6b3bae9a00 100644 --- a/src/ol/renderer/canvas/canvasvectortilelayerrenderer.js +++ b/src/ol/renderer/canvas/canvasvectortilelayerrenderer.js @@ -2,7 +2,7 @@ goog.provide('ol.renderer.canvas.VectorTileLayer'); goog.require('goog.asserts'); goog.require('ol.events'); -goog.require('ol.matrix'); +goog.require('ol.transform'); goog.require('ol.Feature'); goog.require('ol.VectorTile'); goog.require('ol.array'); @@ -56,9 +56,9 @@ ol.renderer.canvas.VectorTileLayer = function(layer) { /** * @private - * @type {ol.Matrix} + * @type {ol.Transform} */ - this.tmpTransform_ = ol.matrix.create(); + this.tmpTransform_ = ol.transform.create(); // Use lower resolution for pure vector rendering. Closest resolution otherwise. this.zDirection = @@ -147,11 +147,12 @@ ol.renderer.canvas.VectorTileLayer.prototype.renderTileReplays_ = function( if (pixelSpace) { origin = ol.extent.getTopLeft(tileExtent); - tileTransform = ol.matrix.makeTransform(this.tmpTransform_, - offsetX, offsetY, - pixelScale * tilePixelResolution, - pixelScale * tilePixelResolution, - rotation, + tileTransform = ol.transform.reset(this.tmpTransform_); + ol.transform.translate(tileTransform, offsetX, offsetY); + ol.transform.scale(tileTransform, + pixelScale * tilePixelResolution, pixelScale * tilePixelResolution); + ol.transform.rotate(tileTransform, rotation); + ol.transform.translate(tileTransform, (origin[0] - center[0]) / tilePixelResolution, (center[1] - origin[1]) / tilePixelResolution); } else { @@ -425,20 +426,16 @@ ol.renderer.canvas.VectorTileLayer.prototype.renderTileImage_ = function( var tilePixelResolution = tileResolution / tilePixelRatio; var tileExtent = tileGrid.getTileCoordExtent( tile.getTileCoord(), this.tmpExtent); - var tileTransform; + var tileTransform = ol.transform.reset(this.tmpTransform_); if (pixelSpace) { - tileTransform = ol.matrix.makeTransform(this.tmpTransform_, - 0, 0, - pixelScale * tilePixelResolution, pixelScale * tilePixelResolution, - 0, + ol.transform.scale(tileTransform, + pixelScale * tilePixelResolution, pixelScale * tilePixelResolution); + ol.transform.translate(tileTransform, -tileSize[0] * tilePixelRatio / 2, -tileSize[1] * tilePixelRatio / 2); } else { var tileCenter = ol.extent.getCenter(tileExtent); - tileTransform = ol.matrix.makeTransform(this.tmpTransform_, - 0, 0, - pixelScale, -pixelScale, - 0, - -tileCenter[0], -tileCenter[1]); + ol.transform.scale(tileTransform, pixelScale, -pixelScale); + ol.transform.translate(tileTransform, -tileCenter[0], -tileCenter[1]); } replayState.replayGroup.replay(tileContext, pixelRatio, diff --git a/src/ol/renderer/dom/domimagelayerrenderer.js b/src/ol/renderer/dom/domimagelayerrenderer.js index ec34d6a1f3..5fbdaa9dcd 100644 --- a/src/ol/renderer/dom/domimagelayerrenderer.js +++ b/src/ol/renderer/dom/domimagelayerrenderer.js @@ -1,7 +1,7 @@ goog.provide('ol.renderer.dom.ImageLayer'); goog.require('goog.asserts'); -goog.require('ol.matrix'); +goog.require('ol.transform'); goog.require('ol.ImageBase'); goog.require('ol.ViewHint'); goog.require('ol.dom'); @@ -31,9 +31,9 @@ ol.renderer.dom.ImageLayer = function(imageLayer) { /** * @private - * @type {ol.Matrix} + * @type {ol.Transform} */ - this.transform_ = ol.matrix.create(); + this.transform_ = ol.transform.create(); }; ol.inherits(ol.renderer.dom.ImageLayer, ol.renderer.dom.Layer); @@ -117,11 +117,13 @@ ol.renderer.dom.ImageLayer.prototype.prepareFrame = function(frameState, layerSt if (image) { var imageExtent = image.getExtent(); var imageResolution = image.getResolution(); - var transform = ol.matrix.create(); - ol.matrix.makeTransform(transform, - frameState.size[0] / 2, frameState.size[1] / 2, - imageResolution / viewResolution, imageResolution / viewResolution, - viewRotation, + var transform = ol.transform.create(); + ol.transform.translate(transform, + frameState.size[0] / 2, frameState.size[1] / 2); + ol.transform.scale(transform, + imageResolution / viewResolution, imageResolution / viewResolution); + ol.transform.rotate(transform, viewRotation); + ol.transform.translate(transform, (imageExtent[0] - viewCenter[0]) / imageResolution, (viewCenter[1] - imageExtent[3]) / imageResolution); if (image != this.image_) { @@ -145,12 +147,12 @@ ol.renderer.dom.ImageLayer.prototype.prepareFrame = function(frameState, layerSt /** - * @param {ol.Matrix} transform Transform. + * @param {ol.Transform} transform Transform. * @private */ ol.renderer.dom.ImageLayer.prototype.setTransform_ = function(transform) { - if (!ol.matrix.equals(transform, this.transform_)) { + if (!ol.array.equals(transform, this.transform_)) { ol.dom.transformElement2D(this.target, transform, 6); - ol.matrix.setFromArray(this.transform_, transform); + ol.transform.setFromArray(this.transform_, transform); } }; diff --git a/src/ol/renderer/dom/dommaprenderer.js b/src/ol/renderer/dom/dommaprenderer.js index 8186d26678..ce3f65758d 100644 --- a/src/ol/renderer/dom/dommaprenderer.js +++ b/src/ol/renderer/dom/dommaprenderer.js @@ -4,7 +4,7 @@ goog.require('goog.asserts'); goog.require('ol.events'); goog.require('ol.events.Event'); goog.require('ol.events.EventType'); -goog.require('ol.matrix'); +goog.require('ol.transform'); goog.require('ol'); goog.require('ol.RendererType'); goog.require('ol.array'); @@ -49,9 +49,9 @@ ol.renderer.dom.Map = function(container, map) { /** * @private - * @type {ol.Matrix} + * @type {ol.Transform} */ - this.transform_ = ol.matrix.create(); + this.transform_ = ol.transform.create(); /** * @type {!Element} @@ -123,12 +123,12 @@ ol.renderer.dom.Map.prototype.dispatchComposeEvent_ = function(type, frameState) var context = this.context_; var canvas = context.canvas; - ol.matrix.makeTransform(this.transform_, - canvas.width / 2, - canvas.height / 2, - pixelRatio / viewState.resolution, - -pixelRatio / viewState.resolution, - -viewState.rotation, + var transform = ol.transform.reset(this.transform_); + ol.transform.translate(transform, canvas.width / 2, canvas.height / 2); + ol.transform.scale(transform, + pixelRatio / viewState.resolution, -pixelRatio / viewState.resolution); + ol.transform.rotate(transform, -viewState.rotation); + ol.transform.translate(transform, -viewState.center[0], -viewState.center[1]); var vectorContext = new ol.render.canvas.Immediate(context, pixelRatio, extent, this.transform_, rotation); diff --git a/src/ol/renderer/dom/domtilelayerrenderer.js b/src/ol/renderer/dom/domtilelayerrenderer.js index 4ae1006c5c..2bb751eec7 100644 --- a/src/ol/renderer/dom/domtilelayerrenderer.js +++ b/src/ol/renderer/dom/domtilelayerrenderer.js @@ -4,7 +4,7 @@ goog.provide('ol.renderer.dom.TileLayer'); goog.require('goog.asserts'); -goog.require('ol.matrix'); +goog.require('ol.transform'); goog.require('ol'); goog.require('ol.TileRange'); goog.require('ol.TileState'); @@ -199,7 +199,7 @@ ol.renderer.dom.TileLayer.prototype.prepareFrame = function(frameState, layerSta tileLayerZKeys.sort(ol.array.numberSafeCompareFunction); var i, ii, j, origin, resolution; - var transform = ol.matrix.create(); + var transform = ol.transform.create(); for (i = 0, ii = tileLayerZKeys.length; i < ii; ++i) { tileLayerZKey = tileLayerZKeys[i]; tileLayerZ = this.tileLayerZs_[tileLayerZKey]; @@ -210,13 +210,13 @@ ol.renderer.dom.TileLayer.prototype.prepareFrame = function(frameState, layerSta } resolution = tileLayerZ.getResolution(); origin = tileLayerZ.getOrigin(); - ol.matrix.makeTransform(transform, - frameState.size[0] / 2, frameState.size[1] / 2, - resolution / viewState.resolution, - resolution / viewState.resolution, - viewState.rotation, - (origin[0] - center[0]) / resolution, - (center[1] - origin[1]) / resolution); + ol.transform.translate(ol.transform.reset(transform), + frameState.size[0] / 2, frameState.size[1] / 2); + ol.transform.scale(transform, + resolution / viewState.resolution, resolution / viewState.resolution); + ol.transform.rotate(transform, viewState.rotation); + ol.transform.translate(transform, + (origin[0] - center[0]) / resolution, (center[1] - origin[1]) / resolution); tileLayerZ.setTransform(transform); if (tileLayerZKey in newTileLayerZKeys) { for (j = tileLayerZKey - 1; j >= 0; --j) { @@ -313,9 +313,9 @@ ol.renderer.dom.TileLayerZ_ = function(tileGrid, tileCoordOrigin) { /** * @private - * @type {ol.Matrix} + * @type {ol.Transform} */ - this.transform_ = ol.matrix.create(); + this.transform_ = ol.transform.create(); /** * @private @@ -436,11 +436,11 @@ ol.renderer.dom.TileLayerZ_.prototype.removeTilesOutsideExtent = function(extent /** - * @param {ol.Matrix} transform Transform. + * @param {ol.Transform} transform Transform. */ ol.renderer.dom.TileLayerZ_.prototype.setTransform = function(transform) { - if (!ol.matrix.equals(transform, this.transform_)) { + if (!ol.array.equals(transform, this.transform_)) { ol.dom.transformElement2D(this.target, transform, 6); - ol.matrix.setFromArray(this.transform_, transform); + ol.transform.setFromArray(this.transform_, transform); } }; diff --git a/src/ol/renderer/dom/domvectorlayerrenderer.js b/src/ol/renderer/dom/domvectorlayerrenderer.js index c30e87f006..80186217ac 100644 --- a/src/ol/renderer/dom/domvectorlayerrenderer.js +++ b/src/ol/renderer/dom/domvectorlayerrenderer.js @@ -2,7 +2,7 @@ goog.provide('ol.renderer.dom.VectorLayer'); goog.require('goog.asserts'); goog.require('ol.events'); -goog.require('ol.matrix'); +goog.require('ol.transform'); goog.require('ol.ViewHint'); goog.require('ol.dom'); goog.require('ol.extent'); @@ -75,15 +75,15 @@ ol.renderer.dom.VectorLayer = function(vectorLayer) { /** * @private - * @type {ol.Matrix} + * @type {ol.Transform} */ - this.transform_ = ol.matrix.create(); + this.transform_ = ol.transform.create(); /** * @private - * @type {ol.Matrix} + * @type {ol.Transform} */ - this.elementTransform_ = ol.matrix.create(); + this.elementTransform_ = ol.transform.create(); }; ol.inherits(ol.renderer.dom.VectorLayer, ol.renderer.dom.Layer); @@ -119,13 +119,13 @@ ol.renderer.dom.VectorLayer.prototype.composeFrame = function(frameState, layerS var imageWidth = viewWidth * pixelRatio; var imageHeight = viewHeight * pixelRatio; - var transform = ol.matrix.makeTransform(this.transform_, - pixelRatio * viewWidth / 2, - pixelRatio * viewHeight / 2, - pixelRatio / viewResolution, - -pixelRatio / viewResolution, - -viewRotation, - -viewCenter[0], -viewCenter[1]); + var transform = ol.transform.reset(this.transform_); + ol.transform.translate(transform, + pixelRatio * viewWidth / 2, pixelRatio * viewHeight / 2); + ol.transform.scale(transform, + pixelRatio / viewResolution, -pixelRatio / viewResolution); + ol.transform.rotate(transform, -viewRotation); + ol.transform.translate(transform, -viewCenter[0], -viewCenter[1]); var context = this.context_; @@ -133,10 +133,9 @@ ol.renderer.dom.VectorLayer.prototype.composeFrame = function(frameState, layerS context.canvas.width = imageWidth; context.canvas.height = imageHeight; - var elementTransform = ol.matrix.makeTransform(this.elementTransform_, - 0, 0, - 1 / pixelRatio, 1 / pixelRatio, - 0, + var elementTransform = ol.transform.reset(this.elementTransform_); + ol.transform.scale(elementTransform, 1 / pixelRatio, 1 / pixelRatio); + ol.transform.translate(elementTransform, -(imageWidth - viewWidth) / 2 * pixelRatio, -(imageHeight - viewHeight) / 2 * pixelRatio); ol.dom.transformElement2D(context.canvas, elementTransform, 6); @@ -161,7 +160,7 @@ ol.renderer.dom.VectorLayer.prototype.composeFrame = function(frameState, layerS /** * @param {ol.render.EventType} type Event type. * @param {olx.FrameState} frameState Frame state. - * @param {ol.Matrix} transform Transform. + * @param {ol.Transform} transform Transform. * @private */ ol.renderer.dom.VectorLayer.prototype.dispatchEvent_ = function(type, frameState, transform) { diff --git a/src/ol/renderer/layerrenderer.js b/src/ol/renderer/layerrenderer.js index 3dc1df3c37..6a0d980d63 100644 --- a/src/ol/renderer/layerrenderer.js +++ b/src/ol/renderer/layerrenderer.js @@ -10,7 +10,7 @@ goog.require('ol.Observable'); goog.require('ol.TileRange'); goog.require('ol.TileState'); goog.require('ol.layer.Layer'); -goog.require('ol.matrix'); +goog.require('ol.transform'); goog.require('ol.source.State'); goog.require('ol.source.Tile'); @@ -57,9 +57,8 @@ ol.renderer.Layer.prototype.forEachFeatureAtCoordinate = ol.nullFunction; * @template S,T */ ol.renderer.Layer.prototype.forEachLayerAtPixel = function(pixel, frameState, callback, thisArg) { - var coordinate = pixel.slice(); - ol.matrix.multVec2( - frameState.pixelToCoordinateMatrix, coordinate, coordinate); + var coordinate = ol.transform.apply( + frameState.pixelToCoordinateTransform, pixel.slice()); var hasFeature = this.forEachFeatureAtCoordinate( coordinate, frameState, ol.functions.TRUE, this); diff --git a/src/ol/renderer/maprenderer.js b/src/ol/renderer/maprenderer.js index d6a9e144d8..314a3321f7 100644 --- a/src/ol/renderer/maprenderer.js +++ b/src/ol/renderer/maprenderer.js @@ -2,7 +2,7 @@ goog.provide('ol.RendererType'); goog.provide('ol.renderer.Map'); goog.require('goog.asserts'); -goog.require('ol.matrix'); +goog.require('ol.transform'); goog.require('ol'); goog.require('ol.Disposable'); goog.require('ol.events'); @@ -65,17 +65,19 @@ ol.inherits(ol.renderer.Map, ol.Disposable); */ ol.renderer.Map.prototype.calculateMatrices2D = function(frameState) { var viewState = frameState.viewState; - var coordinateToPixelMatrix = frameState.coordinateToPixelMatrix; - goog.asserts.assert(coordinateToPixelMatrix, - 'frameState has a coordinateToPixelMatrix'); - ol.matrix.makeTransform(coordinateToPixelMatrix, - frameState.size[0] / 2, frameState.size[1] / 2, - 1 / viewState.resolution, -1 / viewState.resolution, - -viewState.rotation, + var coordinateToPixelTransform = frameState.coordinateToPixelTransform; + var pixelToCoordinateTransform = frameState.pixelToCoordinateTransform; + goog.asserts.assert(coordinateToPixelTransform, + 'frameState has a coordinateToPixelTransform'); + ol.transform.translate(ol.transform.reset(coordinateToPixelTransform), + frameState.size[0] / 2, frameState.size[1] / 2); + ol.transform.scale(coordinateToPixelTransform, + 1 / viewState.resolution, -1 / viewState.resolution); + ol.transform.rotate(coordinateToPixelTransform, -viewState.rotation); + ol.transform.translate(coordinateToPixelTransform, -viewState.center[0], -viewState.center[1]); - var inverted = ol.matrix.invert( - coordinateToPixelMatrix, frameState.pixelToCoordinateMatrix); - goog.asserts.assert(inverted, 'matrix could be inverted'); + ol.transform.invert( + ol.transform.setFromArray(pixelToCoordinateTransform, coordinateToPixelTransform)); }; diff --git a/src/ol/renderer/webgl/webglimagelayerrenderer.js b/src/ol/renderer/webgl/webglimagelayerrenderer.js index 5b10f1eb9c..cc57c79bb7 100644 --- a/src/ol/renderer/webgl/webglimagelayerrenderer.js +++ b/src/ol/renderer/webgl/webglimagelayerrenderer.js @@ -1,7 +1,7 @@ goog.provide('ol.renderer.webgl.ImageLayer'); goog.require('goog.asserts'); -goog.require('ol.matrix'); +goog.require('ol.transform'); goog.require('goog.webgl'); goog.require('ol.ImageBase'); goog.require('ol.ViewHint'); @@ -40,7 +40,7 @@ ol.renderer.webgl.ImageLayer = function(mapRenderer, imageLayer) { /** * @private - * @type {?ol.Matrix} + * @type {?ol.Transform} */ this.hitTransformationMatrix_ = null; @@ -164,9 +164,9 @@ ol.renderer.webgl.ImageLayer.prototype.prepareFrame = function(frameState, layer // Translate and scale to flip the Y coord. var texCoordMatrix = this.texCoordMatrix; - ol.matrix.makeIdentity(texCoordMatrix); - ol.matrix.scale(texCoordMatrix, 1, -1); - ol.matrix.translate(texCoordMatrix, 0, -1); + ol.transform.reset(texCoordMatrix); + ol.transform.scale(texCoordMatrix, 1, -1); + ol.transform.translate(texCoordMatrix, 0, -1); this.image_ = image; this.texture = texture; @@ -196,18 +196,18 @@ ol.renderer.webgl.ImageLayer.prototype.updateProjectionMatrix_ = function(canvas var canvasExtentHeight = canvasHeight * viewResolution; var projectionMatrix = this.projectionMatrix; - ol.matrix.makeIdentity(projectionMatrix); - ol.matrix.scale(projectionMatrix, + ol.transform.reset(projectionMatrix); + ol.transform.scale(projectionMatrix, pixelRatio * 2 / canvasExtentWidth, pixelRatio * 2 / canvasExtentHeight); - ol.matrix.rotate(projectionMatrix, -viewRotation); - ol.matrix.translate(projectionMatrix, + ol.transform.rotate(projectionMatrix, -viewRotation); + ol.transform.translate(projectionMatrix, imageExtent[0] - viewCenter[0], imageExtent[1] - viewCenter[1]); - ol.matrix.scale(projectionMatrix, + ol.transform.scale(projectionMatrix, (imageExtent[2] - imageExtent[0]) / 2, (imageExtent[3] - imageExtent[1]) / 2); - ol.matrix.translate(projectionMatrix, 1, 1); + ol.transform.translate(projectionMatrix, 1, 1); }; @@ -233,9 +233,8 @@ ol.renderer.webgl.ImageLayer.prototype.forEachLayerAtPixel = function(pixel, fra if (this.getLayer().getSource() instanceof ol.source.ImageVector) { // for ImageVector sources use the original hit-detection logic, // so that for example also transparent polygons are detected - var coordinate = pixel.slice(); - ol.matrix.multVec2( - frameState.pixelToCoordinateMatrix, coordinate, coordinate); + var coordinate = ol.transform.apply( + frameState.pixelToCoordinateTransform, pixel.slice()); var hasFeature = this.forEachFeatureAtCoordinate( coordinate, frameState, ol.functions.TRUE, this); @@ -253,9 +252,8 @@ ol.renderer.webgl.ImageLayer.prototype.forEachLayerAtPixel = function(pixel, fra frameState.size, imageSize); } - var pixelOnFrameBuffer = [0, 0]; - ol.matrix.multVec2( - this.hitTransformationMatrix_, pixel, pixelOnFrameBuffer); + var pixelOnFrameBuffer = ol.transform.apply( + this.hitTransformationMatrix_, pixel.slice()); if (pixelOnFrameBuffer[0] < 0 || pixelOnFrameBuffer[0] > imageSize[0] || pixelOnFrameBuffer[1] < 0 || pixelOnFrameBuffer[1] > imageSize[1]) { @@ -286,35 +284,31 @@ ol.renderer.webgl.ImageLayer.prototype.forEachLayerAtPixel = function(pixel, fra * pixel on the map. * @param {ol.Size} mapSize The map size. * @param {ol.Size} imageSize The image size. - * @return {ol.Matrix} The transformation matrix. + * @return {ol.Transform} The transformation matrix. * @private */ ol.renderer.webgl.ImageLayer.prototype.getHitTransformationMatrix_ = function(mapSize, imageSize) { // the first matrix takes a map pixel, flips the y-axis and scales to // a range between -1 ... 1 - var mapCoordMatrix = ol.matrix.create(); - ol.matrix.translate(mapCoordMatrix, -1, -1); - ol.matrix.scale(mapCoordMatrix, 2 / mapSize[0], 2 / mapSize[1]); - ol.matrix.translate(mapCoordMatrix, 0, mapSize[1]); - ol.matrix.scale(mapCoordMatrix, 1, -1); + var mapCoordTransform = ol.transform.create(); + ol.transform.translate(mapCoordTransform, -1, -1); + ol.transform.scale(mapCoordTransform, 2 / mapSize[0], 2 / mapSize[1]); + ol.transform.translate(mapCoordTransform, 0, mapSize[1]); + ol.transform.scale(mapCoordTransform, 1, -1); // the second matrix is the inverse of the projection matrix used in the // shader for drawing - var projectionMatrixInv = ol.matrix.create(); - ol.matrix.invert(this.projectionMatrix, projectionMatrixInv); + var projectionMatrixInv = ol.transform.invert(this.projectionMatrix.slice()); // the third matrix scales to the image dimensions and flips the y-axis again - var imageCoordMatrix = ol.matrix.create(); - ol.matrix.translate(imageCoordMatrix, 0, imageSize[1]); - ol.matrix.scale(imageCoordMatrix, 1, -1); - ol.matrix.scale(imageCoordMatrix, imageSize[0] / 2, imageSize[1] / 2); - ol.matrix.translate(imageCoordMatrix, 1, 1); + var transform = ol.transform.create(); + ol.transform.translate(transform, 0, imageSize[1]); + ol.transform.scale(transform, 1, -1); + ol.transform.scale(transform, imageSize[0] / 2, imageSize[1] / 2); + ol.transform.translate(transform, 1, 1); - var transformMatrix = ol.matrix.create(); - ol.matrix.multiply( - imageCoordMatrix, projectionMatrixInv, transformMatrix); - ol.matrix.multiply( - transformMatrix, mapCoordMatrix, transformMatrix); + ol.transform.multiply(transform, projectionMatrixInv); + ol.transform.multiply(transform, mapCoordTransform); - return transformMatrix; + return transform; }; diff --git a/src/ol/renderer/webgl/webgllayerrenderer.js b/src/ol/renderer/webgl/webgllayerrenderer.js index bd67d9bd8b..dce5d30658 100644 --- a/src/ol/renderer/webgl/webgllayerrenderer.js +++ b/src/ol/renderer/webgl/webgllayerrenderer.js @@ -2,7 +2,7 @@ goog.provide('ol.renderer.webgl.Layer'); goog.require('goog.webgl'); goog.require('ol.layer.Layer'); -goog.require('ol.matrix'); +goog.require('ol.transform'); goog.require('ol.render.Event'); goog.require('ol.render.EventType'); goog.require('ol.render.webgl.Immediate'); @@ -63,15 +63,15 @@ ol.renderer.webgl.Layer = function(mapRenderer, layer) { /** * @protected - * @type {ol.Matrix} + * @type {ol.Transform} */ - this.texCoordMatrix = ol.matrix.create(); + this.texCoordMatrix = ol.transform.create(); /** * @protected - * @type {ol.Matrix} + * @type {ol.Transform} */ - this.projectionMatrix = ol.matrix.create(); + this.projectionMatrix = ol.transform.create(); /** * @private @@ -209,7 +209,7 @@ ol.renderer.webgl.Layer.prototype.dispatchComposeEvent_ = function(type, context /** - * @return {!ol.Matrix} Matrix. + * @return {!ol.Transform} Matrix. */ ol.renderer.webgl.Layer.prototype.getTexCoordMatrix = function() { return this.texCoordMatrix; @@ -225,7 +225,7 @@ ol.renderer.webgl.Layer.prototype.getTexture = function() { /** - * @return {!ol.Matrix} Matrix. + * @return {!ol.Transform} Matrix. */ ol.renderer.webgl.Layer.prototype.getProjectionMatrix = function() { return this.projectionMatrix; diff --git a/src/ol/renderer/webgl/webgltilelayerrenderer.js b/src/ol/renderer/webgl/webgltilelayerrenderer.js index 64da99b499..3a8dcee8c1 100644 --- a/src/ol/renderer/webgl/webgltilelayerrenderer.js +++ b/src/ol/renderer/webgl/webgltilelayerrenderer.js @@ -4,7 +4,7 @@ goog.provide('ol.renderer.webgl.TileLayer'); goog.require('goog.asserts'); -goog.require('ol.matrix'); +goog.require('ol.transform'); goog.require('goog.webgl'); goog.require('ol.TileRange'); goog.require('ol.TileState'); @@ -351,21 +351,21 @@ ol.renderer.webgl.TileLayer.prototype.prepareFrame = function(frameState, layerS this.updateLogos(frameState, tileSource); var texCoordMatrix = this.texCoordMatrix; - ol.matrix.makeIdentity(texCoordMatrix); - ol.matrix.translate(texCoordMatrix, + ol.transform.reset(texCoordMatrix); + ol.transform.translate(texCoordMatrix, (center[0] - framebufferExtent[0]) / (framebufferExtent[2] - framebufferExtent[0]), (center[1] - framebufferExtent[1]) / (framebufferExtent[3] - framebufferExtent[1])); if (viewState.rotation !== 0) { - ol.matrix.rotate(texCoordMatrix, viewState.rotation); + ol.transform.rotate(texCoordMatrix, viewState.rotation); } - ol.matrix.scale(texCoordMatrix, + ol.transform.scale(texCoordMatrix, frameState.size[0] * viewState.resolution / (framebufferExtent[2] - framebufferExtent[0]), frameState.size[1] * viewState.resolution / (framebufferExtent[3] - framebufferExtent[1])); - ol.matrix.translate(texCoordMatrix, -0.5, -0.5); + ol.transform.translate(texCoordMatrix, -0.5, -0.5); return true; }; @@ -383,9 +383,8 @@ ol.renderer.webgl.TileLayer.prototype.forEachLayerAtPixel = function(pixel, fram pixel[0] / frameState.size[0], (frameState.size[1] - pixel[1]) / frameState.size[1]]; - var pixelOnFrameBufferScaled = [0, 0]; - ol.matrix.multVec2( - this.texCoordMatrix, pixelOnMapScaled, pixelOnFrameBufferScaled); + var pixelOnFrameBufferScaled = ol.transform.apply( + this.texCoordMatrix, pixelOnMapScaled.slice()); var pixelOnFrameBuffer = [ pixelOnFrameBufferScaled[0] * this.framebufferDimension, pixelOnFrameBufferScaled[1] * this.framebufferDimension]; diff --git a/src/ol/renderer/webgl/webglvectorlayerrenderer.js b/src/ol/renderer/webgl/webglvectorlayerrenderer.js index 6b9d04feb1..7e1c210975 100644 --- a/src/ol/renderer/webgl/webglvectorlayerrenderer.js +++ b/src/ol/renderer/webgl/webglvectorlayerrenderer.js @@ -5,7 +5,7 @@ goog.require('ol.events'); goog.require('ol.ViewHint'); goog.require('ol.extent'); goog.require('ol.layer.Vector'); -goog.require('ol.matrix'); +goog.require('ol.transform'); goog.require('ol.render.webgl.ReplayGroup'); goog.require('ol.renderer.vector'); goog.require('ol.renderer.webgl.Layer'); @@ -154,9 +154,8 @@ ol.renderer.webgl.VectorLayer.prototype.hasFeatureAtCoordinate = function(coordi * @inheritDoc */ ol.renderer.webgl.VectorLayer.prototype.forEachLayerAtPixel = function(pixel, frameState, callback, thisArg) { - var coordinate = pixel.slice(); - ol.matrix.multVec2( - frameState.pixelToCoordinateMatrix, coordinate, coordinate); + var coordinate = ol.transform.apply( + frameState.pixelToCoordinateTransform, pixel.slice()); var hasFeature = this.hasFeatureAtCoordinate(coordinate, frameState); if (hasFeature) { diff --git a/src/ol/source/imagevectorsource.js b/src/ol/source/imagevectorsource.js index cbf04b8e8a..d672ee254e 100644 --- a/src/ol/source/imagevectorsource.js +++ b/src/ol/source/imagevectorsource.js @@ -3,7 +3,7 @@ goog.provide('ol.source.ImageVector'); goog.require('goog.asserts'); goog.require('ol.events'); goog.require('ol.events.EventType'); -goog.require('ol.matrix'); +goog.require('ol.transform'); goog.require('ol.dom'); goog.require('ol.extent'); goog.require('ol.render.canvas.ReplayGroup'); @@ -40,9 +40,9 @@ ol.source.ImageVector = function(options) { /** * @private - * @type {ol.Matrix} + * @type {ol.Transform} */ - this.transform_ = ol.matrix.create(); + this.transform_ = ol.transform.create(); /** * @private @@ -211,15 +211,14 @@ ol.source.ImageVector.prototype.getStyleFunction = function() { * @param {number} resolution Resolution. * @param {number} pixelRatio Pixel ratio. * @param {ol.Size} size Size. - * @return {!ol.Matrix} Transform. + * @return {!ol.Transform} Transform. * @private */ ol.source.ImageVector.prototype.getTransform_ = function(center, resolution, pixelRatio, size) { - return ol.matrix.makeTransform(this.transform_, - size[0] / 2, size[1] / 2, - pixelRatio / resolution, -pixelRatio / resolution, - 0, - -center[0], -center[1]); + var transform = ol.transform.reset(this.transform_); + ol.transform.translate(transform, size[0] / 2, size[1] / 2); + ol.transform.scale(transform, pixelRatio / resolution, -pixelRatio / resolution); + return ol.transform.translate(transform, -center[0], -center[1]); }; diff --git a/src/ol/source/rastersource.js b/src/ol/source/rastersource.js index f59011b799..f6759297e2 100644 --- a/src/ol/source/rastersource.js +++ b/src/ol/source/rastersource.js @@ -4,7 +4,7 @@ goog.provide('ol.source.RasterEvent'); goog.provide('ol.source.RasterEventType'); goog.require('goog.asserts'); -goog.require('ol.matrix'); +goog.require('ol.transform'); goog.require('ol.ImageCanvas'); goog.require('ol.TileQueue'); goog.require('ol.dom'); @@ -120,7 +120,7 @@ ol.source.Raster = function(options) { this.frameState_ = { animate: false, attributions: {}, - coordinateToPixelMatrix: ol.matrix.create(), + coordinateToPixelTransform: ol.transform.create(), extent: null, focus: null, index: 0, @@ -128,7 +128,7 @@ ol.source.Raster = function(options) { layerStatesArray: layerStatesArray, logos: {}, pixelRatio: 1, - pixelToCoordinateMatrix: ol.matrix.create(), + pixelToCoordinateTransform: ol.transform.create(), postRenderFunctions: [], size: [0, 0], skippedFeatureUids: {}, diff --git a/src/ol/transform.js b/src/ol/transform.js new file mode 100644 index 0000000000..cdd9e13377 --- /dev/null +++ b/src/ol/transform.js @@ -0,0 +1,203 @@ +goog.provide('ol.transform'); + +/** + * Collection of affine 2d transformation functions. The functions work on an + * array of 6 elements. The element order is compatible with the [SVGMatrix + * interface](https://developer.mozilla.org/en-US/docs/Web/API/SVGMatrix) and is + * a subset (elements a to f) of a 3x3 martrix: + * ``` + * [ a c e ] + * [ b d f ] + * [ 0 0 1 ] + * ``` + */ + + +/** + * @private + * @type {ol.Transform} + */ +ol.transform.tmp_ = new Array(6); + + +/** + * Create an identity transform. + * @return {!ol.Transform} Identity transform. + */ +ol.transform.create = function() { + return [1, 0, 0, 1, 0, 0]; +}; + + +/** + * Resets the given transform to an identity transform. + * @param {!ol.Transform} transform Transform. + * @return {!ol.Transform} Transform. + */ +ol.transform.reset = function(transform) { + return ol.transform.set(transform, 1, 0, 0, 1, 0, 0); +}; + + +/** + * Multiply the underlying matrices of two transforms and return the result in + * the first transform. + * @param {!ol.Transform} transform1 Transform parameters of matrix 1. + * @param {!ol.Transform} transform2 Transform parameters of matrix 2. + * @return {!ol.Transform} transform1 multiplied with transform2. + */ +ol.transform.multiply = function(transform1, transform2) { + var a1 = transform1[0]; + var b1 = transform1[1]; + var c1 = transform1[2]; + var d1 = transform1[3]; + var e1 = transform1[4]; + var f1 = transform1[5]; + var a2 = transform2[0]; + var b2 = transform2[1]; + var c2 = transform2[2]; + var d2 = transform2[3]; + var e2 = transform2[4]; + var f2 = transform2[5]; + + transform1[0] = a1 * a2 + c1 * b2; + transform1[1] = b1 * a2 + d1 * b2; + transform1[2] = a1 * c2 + c1 * d2; + transform1[3] = b1 * c2 + d1 * d2; + transform1[4] = a1 * e2 + c1 * f2 + e1; + transform1[5] = b1 * e2 + d1 * f2 + f1; + + return transform1; +}; + +/** + * Set the transform components a-f on a given transform. + * @param {!ol.Transform} transform Transform. + * @param {number} a The a component of the transform. + * @param {number} b The b component of the transform. + * @param {number} c The c component of the transform. + * @param {number} d The d component of the transform. + * @param {number} e The e component of the transform. + * @param {number} f The f component of the transform. + * @return {!ol.Transform} Matrix with transform applied. + */ +ol.transform.set = function(transform, a, b, c, d, e, f) { + transform[0] = a; + transform[1] = b; + transform[2] = c; + transform[3] = d; + transform[4] = e; + transform[5] = f; + return transform; +}; + + +/** + * Set transform on one matrix from another matrix. + * @param {!ol.Transform} transform1 Matrix to set transform to. + * @param {!ol.Transform} transform2 Matrix to set transform from. + * @return {!ol.Transform} transform1 with transform from transform2 applied. + */ +ol.transform.setFromArray = function(transform1, transform2) { + transform1[0] = transform2[0]; + transform1[1] = transform2[1]; + transform1[2] = transform2[2]; + transform1[3] = transform2[3]; + transform1[4] = transform2[4]; + transform1[5] = transform2[5]; + return transform1; +}; + + +/** + * Transforms the given coordinate with the given transform returning the + * resulting, transformed coordinate. The coordinate will be modified in-place. + * + * @param {ol.Transform} transform The transformation. + * @param {ol.Coordinate|ol.Pixel} coordinate The coordinate to transform. + * @return {ol.Coordinate|ol.Pixel} return coordinate so that operations can be + * chained together. + */ +ol.transform.apply = function(transform, coordinate) { + var x = coordinate[0], y = coordinate[1]; + coordinate[0] = transform[0] * x + transform[2] * y + transform[4]; + coordinate[1] = transform[1] * x + transform[3] * y + transform[5]; + return coordinate; +}; + + +/** + * Applies rotation to the given transform. + * @param {!ol.Transform} transform Transform. + * @param {number} angle Angle in radians. + * @return {!ol.Transform} The rotated transform. + */ +ol.transform.rotate = function(transform, angle) { + var cos = Math.cos(angle); + var sin = Math.sin(angle); + return ol.transform.multiply(transform, + ol.transform.set(ol.transform.tmp_, cos, sin, -sin, cos, 0, 0)); +}; + + +/** + * Applies scale to a given transform. + * @param {!ol.Transform} transform Transform. + * @param {number} x Scale factor x. + * @param {number} y Scale factor y. + * @return {!ol.Transform} The scaled transform. + */ +ol.transform.scale = function(transform, x, y) { + return ol.transform.multiply(transform, + ol.transform.set(ol.transform.tmp_, x, 0, 0, y, 0, 0)); +}; + + +/** + * Applies translation to the given transform. + * @param {!ol.Transform} transform Transform. + * @param {number} dx Translation x. + * @param {number} dy Translation y. + * @return {!ol.Transform} The translated transform. + */ +ol.transform.translate = function(transform, dx, dy) { + return ol.transform.multiply(transform, + ol.transform.set(ol.transform.tmp_, 1, 0, 0, 1, dx, dy)); +}; + + +/** + * Invert the given transform. + * @param {!ol.Transform} transform Transform. + * @return {!ol.Transform} Inverse of the transform. + */ +ol.transform.invert = function(transform) { + var det = ol.transform.determinant(transform); + goog.asserts.assert(det !== 0, 'Transformation matrix cannot be inverted.'); + + var a = transform[0]; + var b = transform[1]; + var c = transform[2]; + var d = transform[3]; + var e = transform[4]; + var f = transform[5]; + + transform[0] = d / det; + transform[1] = -b / det; + transform[2] = -c / det; + transform[3] = a / det; + transform[4] = (c * f - d * e) / det; + transform[5] = -(a * f - b * e) / det; + + return transform; +}; + + +/** + * Returns the determinant of the given matrix. + * @param {!ol.Transform} mat Matrix. + * @return {number} Determinant. + */ +ol.transform.determinant = function(mat) { + return mat[0] * mat[3] - mat[1] * mat[2]; +}; diff --git a/src/ol/typedefs.js b/src/ol/typedefs.js index d2a60b3cf9..9f5449eaf4 100644 --- a/src/ol/typedefs.js +++ b/src/ol/typedefs.js @@ -330,11 +330,11 @@ ol.MapOptionsInternal; /** - * An array representing a matrix for use in {@link ol.matrix}. The array has - * 6 elements, and the element order is `[a, b, c, d, e, f]`. + * An array representing an affine 2d transformation for use with + * {@link ol.transform} functions. The array has 6 elements. * @typedef {Array.} */ -ol.Matrix; +ol.Transform; /** diff --git a/src/ol/vec/mat4.js b/src/ol/vec/mat4.js index eca4fcacc7..0525494378 100644 --- a/src/ol/vec/mat4.js +++ b/src/ol/vec/mat4.js @@ -8,7 +8,7 @@ ol.vec.Mat4.tmpMatrix_ = [1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1]; /** - * @param {ol.Matrix} mat Transformation matrix. + * @param {ol.Transform} mat Transformation matrix. * @return {Array.} 2D transformation matrix as flattened 4x4 matrix. */ ol.vec.Mat4.fromMatrix = function(mat) { diff --git a/test/spec/ol/dom/dom.test.js b/test/spec/ol/dom/dom.test.js index bf69cb012f..9a20b5ad7d 100644 --- a/test/spec/ol/dom/dom.test.js +++ b/test/spec/ol/dom/dom.test.js @@ -147,8 +147,8 @@ describe('ol.dom', function() { describe('ol.dom.transformElement2D', function() { var element = null; - var transform = ol.matrix.create(); - var transformFloat = ol.matrix.create(); + var transform = ol.transform.create(); + var transformFloat = ol.transform.create(); transformFloat[0] = 0.12345; beforeEach(function() { element = document.createElement('div'); @@ -564,5 +564,5 @@ describe('ol.dom', function() { }); goog.require('goog.userAgent'); -goog.require('ol.matrix'); +goog.require('ol.transform'); goog.require('ol.dom'); diff --git a/test/spec/ol/render.test.js b/test/spec/ol/render.test.js index e54ae580c0..890c8aa0f1 100644 --- a/test/spec/ol/render.test.js +++ b/test/spec/ol/render.test.js @@ -22,16 +22,16 @@ describe('ol.render', function() { [0, 0, size[0] * pixelRatio, size[1] * pixelRatio]); expect(canvas.style.width).to.be(size[0] + 'px'); expect(canvas.style.height).to.be(size[1] + 'px'); - var transform = ol.matrix.makeTransform(ol.matrix.create(), - 0, 0, pixelRatio, pixelRatio, 0, 0, 0); - expect(ol.matrix.equals(render.transform_, transform)).to.be.ok(); + var transform = ol.transform.scale(ol.transform.create(), + pixelRatio, pixelRatio); + expect(ol.array.equals(render.transform_, transform)).to.be.ok(); }); }); }); -goog.require('ol.matrix'); +goog.require('ol.transform'); goog.require('ol.render'); goog.require('ol.render.canvas.Immediate'); goog.require('ol.vec.Mat4'); diff --git a/test/spec/ol/renderer/canvas/canvaslayerrenderer.test.js b/test/spec/ol/renderer/canvas/canvaslayerrenderer.test.js index f760cd8e04..eb132a58cb 100644 --- a/test/spec/ol/renderer/canvas/canvaslayerrenderer.test.js +++ b/test/spec/ol/renderer/canvas/canvaslayerrenderer.test.js @@ -23,11 +23,11 @@ describe('ol.renderer.canvas.Layer', function() { }, size: [10, 10], pixelRatio: 1, - coordinateToPixelMatrix: ol.matrix.create(), - pixelToCoordinateMatrix: ol.matrix.create() + coordinateToPixelTransform: ol.transform.create(), + pixelToCoordinateTransform: ol.transform.create() }; renderer.getImageTransform = function() { - return ol.matrix.create(); + return ol.transform.create(); }; ol.renderer.Map.prototype.calculateMatrices2D(frameState); var layerState = layer.getLayerState(); @@ -62,7 +62,7 @@ describe('ol.renderer.canvas.Layer', function() { goog.require('ol.render.canvas'); -goog.require('ol.matrix'); +goog.require('ol.transform'); goog.require('ol.layer.Image'); goog.require('ol.renderer.Map'); goog.require('ol.renderer.canvas.Layer'); diff --git a/test/spec/ol/renderer/webgl/webglimagelayerrenderer.test.js b/test/spec/ol/renderer/webgl/webglimagelayerrenderer.test.js index d35dee0e75..b87b571838 100644 --- a/test/spec/ol/renderer/webgl/webglimagelayerrenderer.test.js +++ b/test/spec/ol/renderer/webgl/webglimagelayerrenderer.test.js @@ -49,32 +49,30 @@ describe('ol.renderer.webgl.ImageLayer', function() { pixelRatio, viewCenter, viewResolution, viewRotation, imageExtent); var matrix = renderer.getProjectionMatrix(); - var output = ol.matrix.create(); - - ol.matrix.multVec2(matrix, [-1, -1], output); + var output = ol.transform.apply(matrix, [-1, -1]); expect(output[0]).to.eql(-6); expect(output[1]).to.eql(-6); - ol.matrix.multVec2(matrix, [1, -1], output); + output = ol.transform.apply(matrix, [1, -1]); expect(output[0]).to.eql(2); expect(output[1]).to.eql(-6); - ol.matrix.multVec2(matrix, [-1, 1], output); + output = ol.transform.apply(matrix, [-1, 1]); expect(output[0]).to.eql(-6); expect(output[1]).to.eql(6); - ol.matrix.multVec2(matrix, [1, 1], output); + output = ol.transform.apply(matrix, [1, 1]); expect(output[0]).to.eql(2); expect(output[1]).to.eql(6); - ol.matrix.multVec2(matrix, [0, 0], output); + output = ol.transform.apply(matrix, [0, 0]); expect(output[0]).to.eql(-2); expect(output[1]).to.eql(0); }); }); }); -goog.require('ol.matrix'); +goog.require('ol.transform'); goog.require('ol.Map'); goog.require('ol.proj.common'); goog.require('ol.layer.Image'); From 3e928718f41861f71a1e24305f2d09dabd6b70f8 Mon Sep 17 00:00:00 2001 From: Andreas Hocevar Date: Thu, 23 Jun 2016 15:52:25 +0200 Subject: [PATCH 3/7] ol.vec.Mat4 improvements * Rename ol.vec.Mat4.fromMatrix to ol.vec.Mat4.fromTransform * Make result from ol.vec.Mat4.fromTransform immutable by adding result matrix as argument. --- src/ol/dom/dom.js | 9 +++++++- src/ol/render/webgl/webglreplay.js | 15 ++++++++++--- src/ol/renderer/webgl/webgllayerrenderer.js | 10 +++++++-- src/ol/vec/mat4.js | 24 +++++++++++---------- 4 files changed, 41 insertions(+), 17 deletions(-) diff --git a/src/ol/dom/dom.js b/src/ol/dom/dom.js index adb166bf41..78e7820dff 100644 --- a/src/ol/dom/dom.js +++ b/src/ol/dom/dom.js @@ -6,6 +6,13 @@ goog.require('ol'); goog.require('ol.vec.Mat4'); +/** + * @type {Array.} + * @private + */ +ol.dom.tmpMat4_ = ol.vec.Mat4.create(); + + /** * Create an html canvas element and returns its 2d context. * @param {number=} opt_width Canvas width. @@ -136,7 +143,7 @@ ol.dom.transformElement2D = function(element, transform, opt_precision) { var i; if (ol.dom.canUseCssTransform3D()) { var value3D; - var transform3D = ol.vec.Mat4.fromMatrix(transform); + var transform3D = ol.vec.Mat4.fromTransform(ol.dom.tmpMat4_, transform); if (opt_precision !== undefined) { /** @type {Array.} */ var strings3D = new Array(16); diff --git a/src/ol/render/webgl/webglreplay.js b/src/ol/render/webgl/webglreplay.js index 360e813f09..d615165e19 100644 --- a/src/ol/render/webgl/webglreplay.js +++ b/src/ol/render/webgl/webglreplay.js @@ -145,6 +145,12 @@ ol.render.webgl.ImageReplay = function(tolerance, maxExtent) { */ this.projectionMatrix_ = ol.transform.create(); + /** + * @type {Array.} + * @private + */ + this.tmpMat4_ = ol.vec.Mat4.create(); + /** * @private * @type {boolean|undefined} @@ -565,9 +571,12 @@ ol.render.webgl.ImageReplay.prototype.replay = function(context, ol.transform.rotate(offsetRotateMatrix, -rotation); } - gl.uniformMatrix4fv(locations.u_projectionMatrix, false, ol.vec.Mat4.fromMatrix(projectionMatrix)); - gl.uniformMatrix4fv(locations.u_offsetScaleMatrix, false, ol.vec.Mat4.fromMatrix(offsetScaleMatrix)); - gl.uniformMatrix4fv(locations.u_offsetRotateMatrix, false, ol.vec.Mat4.fromMatrix(offsetRotateMatrix)); + gl.uniformMatrix4fv(locations.u_projectionMatrix, false, + ol.vec.Mat4.fromTransform(this.tmpMat4_, projectionMatrix)); + gl.uniformMatrix4fv(locations.u_offsetScaleMatrix, false, + ol.vec.Mat4.fromTransform(this.tmpMat4_, offsetScaleMatrix)); + gl.uniformMatrix4fv(locations.u_offsetRotateMatrix, false, + ol.vec.Mat4.fromTransform(this.tmpMat4_, offsetRotateMatrix)); gl.uniform1f(locations.u_opacity, opacity); // draw! diff --git a/src/ol/renderer/webgl/webgllayerrenderer.js b/src/ol/renderer/webgl/webgllayerrenderer.js index dce5d30658..03f220cc3f 100644 --- a/src/ol/renderer/webgl/webgllayerrenderer.js +++ b/src/ol/renderer/webgl/webgllayerrenderer.js @@ -73,6 +73,12 @@ ol.renderer.webgl.Layer = function(mapRenderer, layer) { */ this.projectionMatrix = ol.transform.create(); + /** + * @type {Array.} + * @private + */ + this.tmpMat4_ = ol.vec.Mat4.create(); + /** * @private * @type {ol.renderer.webgl.map.shader.Default.Locations} @@ -169,9 +175,9 @@ ol.renderer.webgl.Layer.prototype.composeFrame = function(frameState, layerState } gl.uniformMatrix4fv(locations.u_texCoordMatrix, false, - ol.vec.Mat4.fromMatrix(this.getTexCoordMatrix())); + ol.vec.Mat4.fromTransform(this.tmpMat4_, this.getTexCoordMatrix())); gl.uniformMatrix4fv(locations.u_projectionMatrix, false, - ol.vec.Mat4.fromMatrix(this.getProjectionMatrix())); + ol.vec.Mat4.fromTransform(this.tmpMat4_, this.getProjectionMatrix())); gl.uniform1f(locations.u_opacity, layerState.opacity); gl.bindTexture(goog.webgl.TEXTURE_2D, this.getTexture()); gl.drawArrays(goog.webgl.TRIANGLE_STRIP, 0, 4); diff --git a/src/ol/vec/mat4.js b/src/ol/vec/mat4.js index 0525494378..65dd22f1e4 100644 --- a/src/ol/vec/mat4.js +++ b/src/ol/vec/mat4.js @@ -2,22 +2,24 @@ goog.provide('ol.vec.Mat4'); /** - * @type {Array.} + * @return {Array.} 4x4 matrix representing a 3D identity transform. */ -ol.vec.Mat4.tmpMatrix_ = [1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1]; +ol.vec.Mat4.create = function() { + return [1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1]; +}; /** - * @param {ol.Transform} mat Transformation matrix. + * @param {Array.} mat4 Flattened 4x4 matrix receiving the result. + * @param {ol.Transform} transform Transformation matrix. * @return {Array.} 2D transformation matrix as flattened 4x4 matrix. */ -ol.vec.Mat4.fromMatrix = function(mat) { - var mat4 = ol.vec.Mat4.tmpMatrix_; - mat4[0] = mat[0]; - mat4[1] = mat[1]; - mat4[4] = mat[2]; - mat4[5] = mat[3]; - mat4[12] = mat[4]; - mat4[13] = mat[5]; +ol.vec.Mat4.fromTransform = function(mat4, transform) { + mat4[0] = transform[0]; + mat4[1] = transform[1]; + mat4[4] = transform[2]; + mat4[5] = transform[3]; + mat4[12] = transform[4]; + mat4[13] = transform[5]; return mat4; }; From a1e0969d9fa295f7fea0f1b2507a82599d559787 Mon Sep 17 00:00:00 2001 From: Andreas Hocevar Date: Thu, 23 Jun 2016 17:17:59 +0200 Subject: [PATCH 4/7] Add tests --- test/spec/ol/transform.test.js | 86 ++++++++++++++++++++++++++++++++++ test/spec/ol/vec/mat4.test.js | 25 ++++++++++ 2 files changed, 111 insertions(+) create mode 100644 test/spec/ol/transform.test.js create mode 100644 test/spec/ol/vec/mat4.test.js diff --git a/test/spec/ol/transform.test.js b/test/spec/ol/transform.test.js new file mode 100644 index 0000000000..e48aee8719 --- /dev/null +++ b/test/spec/ol/transform.test.js @@ -0,0 +1,86 @@ +goog.provide('ol.test.transform'); + +describe('ol.transform', function() { + + function assertRoughlyEqual(t1, t2) { + t1.forEach(function(item, index) { + expect(item).to.roughlyEqual(t2[index], 1e-8); + }); + } + + describe('ol.transform.create()', function() { + it('creates an identity transform', function() { + expect(ol.transform.create()).to.eql([1, 0, 0, 1, 0, 0]); + }); + }); + + describe('ol.transform.reset()', function() { + it('resets tansform to an identity transform', function() { + var transform = [1, 2, 3, 4, 5, 6]; + expect(ol.transform.reset(transform)).to.eql([1, 0, 0, 1, 0, 0]); + expect(transform).to.eql([1, 0, 0, 1, 0, 0]); + }); + }); + + describe('ol.transform.set()', function() { + it('sets the given values', function() { + var transform = ol.transform.create(); + expect(ol.transform.set(transform, 1, 2, 3, 4, 5, 6)).to.eql([1, 2, 3, 4, 5, 6]); + expect(transform).to.eql([1, 2, 3, 4, 5, 6]); + }); + }); + + describe('ol.transform.setFromArray()', function() { + it('sets values of 2nd transform on 1st transform', function() { + var transform1 = ol.transform.create(); + var transform2 = [1, 2, 3, 4, 5, 6]; + expect(ol.transform.setFromArray(transform1, transform2)).to.eql(transform2); + expect(transform1).to.eql(transform2); + }); + }); + + describe('ol.transform.translate()', function() { + var transform = ol.transform.create(); + expect(ol.transform.translate(transform, 3, 4)).to.eql([1, 0, 0, 1, 3, 4]); + expect(transform).to.eql([1, 0, 0, 1, 3, 4]); + }); + + describe('ol.transform.scale()', function() { + var transform = ol.transform.create(); + expect(ol.transform.scale(transform, 3, 4)).to.eql([3, 0, 0, 4, 0, 0]); + expect(transform).to.eql([3, 0, 0, 4, 0, 0]); + }); + + describe('ol.transform.rotate()', function() { + var transform = ol.transform.create(); + assertRoughlyEqual(ol.transform.rotate(transform, Math.PI / 2), [0, 1, -1, 0, 0, 0]); + assertRoughlyEqual(transform, [0, 1, -1, 0, 0, 0]); + }); + + describe('ol.transform.multiply()', function() { + var transform1 = [1, 2, 1, 2, 1, 2]; + var transform2 = [1, 2, 1, 2, 1, 2]; + expect(ol.transform.multiply(transform1, transform2)).to.eql([3, 6, 3, 6, 4, 8]); + expect(transform1).to.eql([3, 6, 3, 6, 4, 8]); + }); + + describe('ol.transform.invert()', function() { + var transform = [1, 0, 1, 0, 1, 0]; + expect(function() { + ol.transform.invert(transform); + }).to.throwException(); + transform = [1, 1, 1, 2, 2, 0]; + expect(ol.transform.invert(transform)).to.eql([2, -1, -1, 1, -4, 2]); + expect(transform).to.eql([2, -1, -1, 1, -4, 2]); + }); + + describe('ol.transform.apply()', function() { + var transform = ol.transform.translate(ol.transform.create(), 2, 3); + var point = [1, 2]; + expect(ol.transform.apply(transform, point)).to.eql([3, 5]); + expect(point).to.eql([3, 5]); + }); + +}); + +goog.require('ol.transform'); diff --git a/test/spec/ol/vec/mat4.test.js b/test/spec/ol/vec/mat4.test.js new file mode 100644 index 0000000000..f034926e3d --- /dev/null +++ b/test/spec/ol/vec/mat4.test.js @@ -0,0 +1,25 @@ +goog.provide('ol.test.vec.Mat4'); + +describe('ol.vec.Mat4', function() { + + describe('ol.vec.Mat4.create()', function() { + it('returns the expected matrix', function() { + expect(ol.vec.Mat4.create()).to.eql( + [1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1]); + }); + }); + + describe('ol.vec.Mat4.fromTransform()', function() { + it('sets the expected transform on the matrix', function() { + var transform = [1, 2, 3, 4, 5, 6]; + var result = ol.vec.Mat4.create(); + expect(ol.vec.Mat4.fromTransform(result, transform)).to.eql( + [1, 2, 0, 0, 3, 4, 0, 0, 0, 0, 1, 0, 5, 6, 0, 1]); + expect(result).to.eql( + [1, 2, 0, 0, 3, 4, 0, 0, 0, 0, 1, 0, 5, 6, 0, 1]); + }); + }); + +}); + +goog.require('ol.vec.Mat4'); From 4cde6a0a6d6ddd2bec593a08c7954e69080978f3 Mon Sep 17 00:00:00 2001 From: Tim Schaub Date: Fri, 24 Jun 2016 10:01:08 -0600 Subject: [PATCH 5/7] Move assertions into `it` blocks --- test/spec/ol/transform.test.js | 60 ++++++++++++++++++++-------------- 1 file changed, 36 insertions(+), 24 deletions(-) diff --git a/test/spec/ol/transform.test.js b/test/spec/ol/transform.test.js index e48aee8719..0a9906b764 100644 --- a/test/spec/ol/transform.test.js +++ b/test/spec/ol/transform.test.js @@ -40,45 +40,57 @@ describe('ol.transform', function() { }); describe('ol.transform.translate()', function() { - var transform = ol.transform.create(); - expect(ol.transform.translate(transform, 3, 4)).to.eql([1, 0, 0, 1, 3, 4]); - expect(transform).to.eql([1, 0, 0, 1, 3, 4]); + it('applies translation to a transform', function() { + var transform = ol.transform.create(); + expect(ol.transform.translate(transform, 3, 4)).to.eql([1, 0, 0, 1, 3, 4]); + expect(transform).to.eql([1, 0, 0, 1, 3, 4]); + }); }); describe('ol.transform.scale()', function() { - var transform = ol.transform.create(); - expect(ol.transform.scale(transform, 3, 4)).to.eql([3, 0, 0, 4, 0, 0]); - expect(transform).to.eql([3, 0, 0, 4, 0, 0]); + it('applies scaling to a transform', function() { + var transform = ol.transform.create(); + expect(ol.transform.scale(transform, 3, 4)).to.eql([3, 0, 0, 4, 0, 0]); + expect(transform).to.eql([3, 0, 0, 4, 0, 0]); + }); }); describe('ol.transform.rotate()', function() { - var transform = ol.transform.create(); - assertRoughlyEqual(ol.transform.rotate(transform, Math.PI / 2), [0, 1, -1, 0, 0, 0]); - assertRoughlyEqual(transform, [0, 1, -1, 0, 0, 0]); + it('applies rotation to a transform', function() { + var transform = ol.transform.create(); + assertRoughlyEqual(ol.transform.rotate(transform, Math.PI / 2), [0, 1, -1, 0, 0, 0]); + assertRoughlyEqual(transform, [0, 1, -1, 0, 0, 0]); + }); }); describe('ol.transform.multiply()', function() { - var transform1 = [1, 2, 1, 2, 1, 2]; - var transform2 = [1, 2, 1, 2, 1, 2]; - expect(ol.transform.multiply(transform1, transform2)).to.eql([3, 6, 3, 6, 4, 8]); - expect(transform1).to.eql([3, 6, 3, 6, 4, 8]); + it('multiplies two transforms', function() { + var transform1 = [1, 2, 1, 2, 1, 2]; + var transform2 = [1, 2, 1, 2, 1, 2]; + expect(ol.transform.multiply(transform1, transform2)).to.eql([3, 6, 3, 6, 4, 8]); + expect(transform1).to.eql([3, 6, 3, 6, 4, 8]); + }); }); describe('ol.transform.invert()', function() { - var transform = [1, 0, 1, 0, 1, 0]; - expect(function() { - ol.transform.invert(transform); - }).to.throwException(); - transform = [1, 1, 1, 2, 2, 0]; - expect(ol.transform.invert(transform)).to.eql([2, -1, -1, 1, -4, 2]); - expect(transform).to.eql([2, -1, -1, 1, -4, 2]); + it('inverts a transform', function() { + var transform = [1, 0, 1, 0, 1, 0]; + expect(function() { + ol.transform.invert(transform); + }).to.throwException(); + transform = [1, 1, 1, 2, 2, 0]; + expect(ol.transform.invert(transform)).to.eql([2, -1, -1, 1, -4, 2]); + expect(transform).to.eql([2, -1, -1, 1, -4, 2]); + }); }); describe('ol.transform.apply()', function() { - var transform = ol.transform.translate(ol.transform.create(), 2, 3); - var point = [1, 2]; - expect(ol.transform.apply(transform, point)).to.eql([3, 5]); - expect(point).to.eql([3, 5]); + it('applies a transform to a 2d vector', function() { + var transform = ol.transform.translate(ol.transform.create(), 2, 3); + var point = [1, 2]; + expect(ol.transform.apply(transform, point)).to.eql([3, 5]); + expect(point).to.eql([3, 5]); + }); }); }); From a655234cc394e0db71799d5d30c9ab9bc775cf77 Mon Sep 17 00:00:00 2001 From: Tim Schaub Date: Fri, 24 Jun 2016 10:03:13 -0600 Subject: [PATCH 6/7] Convenience function for common composite transform --- src/ol/transform.js | 26 ++++++++++++++++++++++++++ test/spec/ol/transform.test.js | 23 +++++++++++++++++++++++ 2 files changed, 49 insertions(+) diff --git a/src/ol/transform.js b/src/ol/transform.js index cdd9e13377..b028d13158 100644 --- a/src/ol/transform.js +++ b/src/ol/transform.js @@ -166,6 +166,32 @@ ol.transform.translate = function(transform, dx, dy) { }; +/** + * Creates a composite transform given an initial translation, scale, rotation, and + * final translation (in that order only, not commutative). + * @param {!ol.Transform} transform The transform (will be modified in place). + * @param {number} dx1 Initial translation x. + * @param {number} dy1 Initial translation y. + * @param {number} sx Scale factor x. + * @param {number} sy Scale factor y. + * @param {number} angle Rotation (in counter-clockwise radians). + * @param {number} dx2 Final translation x. + * @param {number} dy2 Final translation y. + * @return {!ol.Transform} The composite transform. + */ +ol.transform.compose = function(transform, dx1, dy1, sx, sy, angle, dx2, dy2) { + var sin = Math.sin(angle); + var cos = Math.cos(angle); + transform[0] = sx * cos; + transform[1] = sy * sin; + transform[2] = -sx * sin; + transform[3] = sy * cos; + transform[4] = dx2 * sx * cos - dy2 * sx * sin + dx1; + transform[5] = dx2 * sy * sin + dy2 * sy * cos + dy1; + return transform; +}; + + /** * Invert the given transform. * @param {!ol.Transform} transform Transform. diff --git a/test/spec/ol/transform.test.js b/test/spec/ol/transform.test.js index 0a9906b764..b838a91ae9 100644 --- a/test/spec/ol/transform.test.js +++ b/test/spec/ol/transform.test.js @@ -72,6 +72,29 @@ describe('ol.transform', function() { }); }); + describe('ol.transform.compose()', function() { + it('composes a translate, scale, rotate, translate transform', function() { + var dx1 = 3; + var dy1 = 4; + var sx = 1.5; + var sy = -1.5; + var angle = Math.PI / 3; + var dx2 = -dx1 / 2; + var dy2 = -dy1 / 2; + + var expected = ol.transform.create(); + ol.transform.translate(expected, dx1, dy1); + ol.transform.scale(expected, sx, sy); + ol.transform.rotate(expected, angle); + ol.transform.translate(expected, dx2, dy2); + + var composed = ol.transform.create(); + var composedReturn = ol.transform.compose(composed, dx1, dy1, sx, sy, angle, dx2, dy2); + expect(composed).to.equal(composedReturn); + expect(composed).to.eql(expected); + }); + }); + describe('ol.transform.invert()', function() { it('inverts a transform', function() { var transform = [1, 0, 1, 0, 1, 0]; From 618cb389e5a0eb02fcb23de70b0ddb271e281468 Mon Sep 17 00:00:00 2001 From: Tim Schaub Date: Fri, 24 Jun 2016 10:43:14 -0600 Subject: [PATCH 7/7] Use ol.transform.compose() for common transform compositions --- src/ol/render/canvas/canvasimmediate.js | 19 +++++++++-------- src/ol/render/canvas/canvasreplay.js | 21 +++++++------------ src/ol/renderer/canvas/canvaslayerrenderer.js | 16 +++++++------- src/ol/renderer/canvas/canvasmaprenderer.js | 18 +++++++--------- .../canvas/canvastilelayerrenderer.js | 10 ++++----- .../canvas/canvasvectortilelayerrenderer.js | 12 +++++------ src/ol/renderer/dom/domimagelayerrenderer.js | 11 +++++----- src/ol/renderer/dom/dommaprenderer.js | 13 ++++++------ src/ol/renderer/dom/domtilelayerrenderer.js | 12 +++++------ src/ol/renderer/dom/domvectorlayerrenderer.js | 12 +++++------ src/ol/renderer/maprenderer.js | 12 +++++------ src/ol/source/imagevectorsource.js | 12 +++++++---- 12 files changed, 80 insertions(+), 88 deletions(-) diff --git a/src/ol/render/canvas/canvasimmediate.js b/src/ol/render/canvas/canvasimmediate.js index c4dd336dda..3af236700e 100644 --- a/src/ol/render/canvas/canvasimmediate.js +++ b/src/ol/render/canvas/canvasimmediate.js @@ -272,10 +272,11 @@ ol.render.canvas.Immediate.prototype.drawImages_ = function(flatCoordinates, off if (rotation !== 0 || this.imageScale_ != 1) { var centerX = x + this.imageAnchorX_; var centerY = y + this.imageAnchorY_; - ol.transform.translate(ol.transform.reset(localTransform), centerX, centerY); - ol.transform.scale(localTransform, this.imageScale_, this.imageScale_); - ol.transform.rotate(localTransform, rotation); - ol.transform.translate(localTransform, -centerX, -centerY); + ol.transform.compose(localTransform, + centerX, centerY, + this.imageScale_, this.imageScale_, + rotation, + -centerX, -centerY); context.setTransform.apply(context, localTransform); } context.drawImage(this.image_, this.imageOriginX_, this.imageOriginY_, @@ -320,11 +321,11 @@ ol.render.canvas.Immediate.prototype.drawText_ = function(flatCoordinates, offse var x = pixelCoordinates[offset] + this.textOffsetX_; var y = pixelCoordinates[offset + 1] + this.textOffsetY_; if (this.textRotation_ !== 0 || this.textScale_ != 1) { - var localTransform = ol.transform.reset(this.tmpLocalTransform_); - ol.transform.translate(localTransform, x, y); - ol.transform.scale(localTransform, this.textScale_, this.textScale_); - ol.transform.rotate(localTransform, this.textRotation_); - ol.transform.translate(localTransform, -x, -y); + var localTransform = ol.transform.compose(this.tmpLocalTransform_, + x, y, + this.textScale_, this.textScale_, + this.textRotation_, + -x, -y); context.setTransform.apply(context, localTransform); } if (this.textStrokeState_) { diff --git a/src/ol/render/canvas/canvasreplay.js b/src/ol/render/canvas/canvasreplay.js index 9f1085ccae..441188e481 100644 --- a/src/ol/render/canvas/canvasreplay.js +++ b/src/ol/render/canvas/canvasreplay.js @@ -331,10 +331,8 @@ ol.render.canvas.Replay.prototype.replay_ = function( if (scale != 1 || rotation !== 0) { var centerX = x + anchorX; var centerY = y + anchorY; - ol.transform.translate(ol.transform.reset(localTransform), centerX, centerY); - ol.transform.scale(localTransform, scale, scale); - ol.transform.rotate(localTransform, rotation); - ol.transform.translate(localTransform, -centerX, -centerY); + ol.transform.compose(localTransform, + centerX, centerY, scale, scale, rotation, -centerX, -centerY); context.transform.apply(context, localTransform); } var alpha = context.globalAlpha; @@ -390,10 +388,7 @@ ol.render.canvas.Replay.prototype.replay_ = function( x = pixelCoordinates[d] + offsetX; y = pixelCoordinates[d + 1] + offsetY; if (scale != 1 || rotation !== 0) { - ol.transform.translate(ol.transform.reset(localTransform), x, y); - ol.transform.scale(localTransform, scale, scale); - ol.transform.rotate(localTransform, rotation); - ol.transform.translate(localTransform, -x, -y); + ol.transform.compose(localTransform, x, y, scale, scale, rotation, -x, -y); context.transform.apply(context, localTransform); } @@ -1897,11 +1892,11 @@ ol.render.canvas.ReplayGroup.prototype.finish = function() { ol.render.canvas.ReplayGroup.prototype.forEachFeatureAtCoordinate = function( coordinate, resolution, rotation, skippedFeaturesHash, callback) { - var transform = ol.transform.reset(this.hitDetectionTransform_); - ol.transform.translate(transform, 0.5, 0.5); - ol.transform.scale(transform, 1 / resolution, -1 / resolution); - ol.transform.rotate(transform, -rotation); - ol.transform.translate(transform, -coordinate[0], -coordinate[1]); + var transform = ol.transform.compose(this.hitDetectionTransform_, + 0.5, 0.5, + 1 / resolution, -1 / resolution, + -rotation, + -coordinate[0], -coordinate[1]); var context = this.hitDetectionContext_; context.clearRect(0, 0, 1, 1); diff --git a/src/ol/renderer/canvas/canvaslayerrenderer.js b/src/ol/renderer/canvas/canvaslayerrenderer.js index d4dbdfa296..17a32158c1 100644 --- a/src/ol/renderer/canvas/canvaslayerrenderer.js +++ b/src/ol/renderer/canvas/canvaslayerrenderer.js @@ -184,14 +184,14 @@ ol.renderer.canvas.Layer.prototype.getImageTransform = goog.abstractMethod; ol.renderer.canvas.Layer.prototype.getTransform = function(frameState, offsetX) { var viewState = frameState.viewState; var pixelRatio = frameState.pixelRatio; - var transform = ol.transform.reset(this.transform_); - ol.transform.translate(transform, - pixelRatio * frameState.size[0] / 2, pixelRatio * frameState.size[1] / 2); - ol.transform.scale(transform, - pixelRatio / viewState.resolution, -pixelRatio / viewState.resolution); - ol.transform.rotate(transform, -viewState.rotation); - return ol.transform.translate(transform, - -viewState.center[0] + offsetX, -viewState.center[1]); + var dx1 = pixelRatio * frameState.size[0] / 2; + var dy1 = pixelRatio * frameState.size[1] / 2; + var sx = pixelRatio / viewState.resolution; + var sy = -sx; + var angle = -viewState.rotation; + var dx2 = -viewState.center[0] + offsetX; + var dy2 = -viewState.center[1]; + return ol.transform.compose(this.transform_, dx1, dy1, sx, sy, angle, dx2, dy2); }; diff --git a/src/ol/renderer/canvas/canvasmaprenderer.js b/src/ol/renderer/canvas/canvasmaprenderer.js index ee9199018c..9aff0c3daf 100644 --- a/src/ol/renderer/canvas/canvasmaprenderer.js +++ b/src/ol/renderer/canvas/canvasmaprenderer.js @@ -120,17 +120,15 @@ ol.renderer.canvas.Map.prototype.dispatchComposeEvent_ = function(type, frameSta * @return {!ol.Transform} Transform. */ ol.renderer.canvas.Map.prototype.getTransform = function(frameState) { - var pixelRatio = frameState.pixelRatio; var viewState = frameState.viewState; - var resolution = viewState.resolution; - var transform = ol.transform.reset(this.transform_); - ol.transform.translate(transform, - this.canvas_.width / 2, this.canvas_.height / 2); - ol.transform.scale(transform, - pixelRatio / resolution, -pixelRatio / resolution); - ol.transform.rotate(transform, -viewState.rotation); - return ol.transform.translate(transform, - -viewState.center[0], -viewState.center[1]); + var dx1 = this.canvas_.width / 2; + var dy1 = this.canvas_.height / 2; + var sx = frameState.pixelRatio / viewState.resolution; + var sy = -sx; + var angle = -viewState.rotation; + var dx2 = -viewState.center[0]; + var dy2 = -viewState.center[1]; + return ol.transform.compose(this.transform_, dx1, dy1, sx, sy, angle, dx2, dy2); }; diff --git a/src/ol/renderer/canvas/canvastilelayerrenderer.js b/src/ol/renderer/canvas/canvastilelayerrenderer.js index d88fe8c725..8a6a61c816 100644 --- a/src/ol/renderer/canvas/canvastilelayerrenderer.js +++ b/src/ol/renderer/canvas/canvastilelayerrenderer.js @@ -326,11 +326,11 @@ ol.renderer.canvas.TileLayer.prototype.renderTileImages = function(context, fram if (hasRenderListeners) { var dX = drawOffsetX - offsetX / drawScale + offsetX; var dY = drawOffsetY - offsetY / drawScale + offsetY; - var imageTransform = ol.transform.reset(this.imageTransform_); - ol.transform.translate(imageTransform, drawSize / 2 - dX, drawSize / 2 - dY); - ol.transform.scale(imageTransform, pixelScale, -pixelScale); - ol.transform.rotate(imageTransform, -rotation); - ol.transform.translate(imageTransform, -center[0] + dX / pixelScale, -center[1] - dY / pixelScale); + var imageTransform = ol.transform.compose(this.imageTransform_, + drawSize / 2 - dX, drawSize / 2 - dY, + pixelScale, -pixelScale, + -rotation, + -center[0] + dX / pixelScale, -center[1] - dY / pixelScale); this.dispatchRenderEvent(renderContext, frameState, imageTransform); } if (rotation || hasRenderListeners) { diff --git a/src/ol/renderer/canvas/canvasvectortilelayerrenderer.js b/src/ol/renderer/canvas/canvasvectortilelayerrenderer.js index 6b3bae9a00..d073d947b2 100644 --- a/src/ol/renderer/canvas/canvasvectortilelayerrenderer.js +++ b/src/ol/renderer/canvas/canvasvectortilelayerrenderer.js @@ -148,13 +148,11 @@ ol.renderer.canvas.VectorTileLayer.prototype.renderTileReplays_ = function( if (pixelSpace) { origin = ol.extent.getTopLeft(tileExtent); tileTransform = ol.transform.reset(this.tmpTransform_); - ol.transform.translate(tileTransform, offsetX, offsetY); - ol.transform.scale(tileTransform, - pixelScale * tilePixelResolution, pixelScale * tilePixelResolution); - ol.transform.rotate(tileTransform, rotation); - ol.transform.translate(tileTransform, - (origin[0] - center[0]) / tilePixelResolution, - (center[1] - origin[1]) / tilePixelResolution); + tileTransform = ol.transform.compose(this.tmpTransform_, + offsetX, offsetY, + pixelScale * tilePixelResolution, pixelScale * tilePixelResolution, + rotation, + (origin[0] - center[0]) / tilePixelResolution, (center[1] - origin[1]) / tilePixelResolution); } else { tileTransform = transform; } diff --git a/src/ol/renderer/dom/domimagelayerrenderer.js b/src/ol/renderer/dom/domimagelayerrenderer.js index 5fbdaa9dcd..791fe354e0 100644 --- a/src/ol/renderer/dom/domimagelayerrenderer.js +++ b/src/ol/renderer/dom/domimagelayerrenderer.js @@ -118,14 +118,13 @@ ol.renderer.dom.ImageLayer.prototype.prepareFrame = function(frameState, layerSt var imageExtent = image.getExtent(); var imageResolution = image.getResolution(); var transform = ol.transform.create(); - ol.transform.translate(transform, - frameState.size[0] / 2, frameState.size[1] / 2); - ol.transform.scale(transform, - imageResolution / viewResolution, imageResolution / viewResolution); - ol.transform.rotate(transform, viewRotation); - ol.transform.translate(transform, + ol.transform.compose(transform, + frameState.size[0] / 2, frameState.size[1] / 2, + imageResolution / viewResolution, imageResolution / viewResolution, + viewRotation, (imageExtent[0] - viewCenter[0]) / imageResolution, (viewCenter[1] - imageExtent[3]) / imageResolution); + if (image != this.image_) { var imageElement = image.getImage(this); // Bootstrap sets the style max-width: 100% for all images, which breaks diff --git a/src/ol/renderer/dom/dommaprenderer.js b/src/ol/renderer/dom/dommaprenderer.js index ce3f65758d..2571104e2e 100644 --- a/src/ol/renderer/dom/dommaprenderer.js +++ b/src/ol/renderer/dom/dommaprenderer.js @@ -123,15 +123,14 @@ ol.renderer.dom.Map.prototype.dispatchComposeEvent_ = function(type, frameState) var context = this.context_; var canvas = context.canvas; - var transform = ol.transform.reset(this.transform_); - ol.transform.translate(transform, canvas.width / 2, canvas.height / 2); - ol.transform.scale(transform, - pixelRatio / viewState.resolution, -pixelRatio / viewState.resolution); - ol.transform.rotate(transform, -viewState.rotation); - ol.transform.translate(transform, + var transform = ol.transform.compose(this.transform_, + canvas.width / 2, canvas.height / 2, + pixelRatio / viewState.resolution, -pixelRatio / viewState.resolution, + -rotation, -viewState.center[0], -viewState.center[1]); + var vectorContext = new ol.render.canvas.Immediate(context, pixelRatio, - extent, this.transform_, rotation); + extent, transform, rotation); var composeEvent = new ol.render.Event(type, map, vectorContext, frameState, context, null); map.dispatchEvent(composeEvent); diff --git a/src/ol/renderer/dom/domtilelayerrenderer.js b/src/ol/renderer/dom/domtilelayerrenderer.js index 2bb751eec7..3bf9b7914d 100644 --- a/src/ol/renderer/dom/domtilelayerrenderer.js +++ b/src/ol/renderer/dom/domtilelayerrenderer.js @@ -210,13 +210,13 @@ ol.renderer.dom.TileLayer.prototype.prepareFrame = function(frameState, layerSta } resolution = tileLayerZ.getResolution(); origin = tileLayerZ.getOrigin(); - ol.transform.translate(ol.transform.reset(transform), - frameState.size[0] / 2, frameState.size[1] / 2); - ol.transform.scale(transform, - resolution / viewState.resolution, resolution / viewState.resolution); - ol.transform.rotate(transform, viewState.rotation); - ol.transform.translate(transform, + + ol.transform.compose(transform, + frameState.size[0] / 2, frameState.size[1] / 2, + resolution / viewState.resolution, resolution / viewState.resolution, + viewState.rotation, (origin[0] - center[0]) / resolution, (center[1] - origin[1]) / resolution); + tileLayerZ.setTransform(transform); if (tileLayerZKey in newTileLayerZKeys) { for (j = tileLayerZKey - 1; j >= 0; --j) { diff --git a/src/ol/renderer/dom/domvectorlayerrenderer.js b/src/ol/renderer/dom/domvectorlayerrenderer.js index 80186217ac..5f4d0acff4 100644 --- a/src/ol/renderer/dom/domvectorlayerrenderer.js +++ b/src/ol/renderer/dom/domvectorlayerrenderer.js @@ -119,13 +119,11 @@ ol.renderer.dom.VectorLayer.prototype.composeFrame = function(frameState, layerS var imageWidth = viewWidth * pixelRatio; var imageHeight = viewHeight * pixelRatio; - var transform = ol.transform.reset(this.transform_); - ol.transform.translate(transform, - pixelRatio * viewWidth / 2, pixelRatio * viewHeight / 2); - ol.transform.scale(transform, - pixelRatio / viewResolution, -pixelRatio / viewResolution); - ol.transform.rotate(transform, -viewRotation); - ol.transform.translate(transform, -viewCenter[0], -viewCenter[1]); + var transform = ol.transform.compose(this.transform_, + pixelRatio * viewWidth / 2, pixelRatio * viewHeight / 2, + pixelRatio / viewResolution, -pixelRatio / viewResolution, + -viewRotation, + -viewCenter[0], -viewCenter[1]); var context = this.context_; diff --git a/src/ol/renderer/maprenderer.js b/src/ol/renderer/maprenderer.js index 314a3321f7..98d8c2580f 100644 --- a/src/ol/renderer/maprenderer.js +++ b/src/ol/renderer/maprenderer.js @@ -69,13 +69,13 @@ ol.renderer.Map.prototype.calculateMatrices2D = function(frameState) { var pixelToCoordinateTransform = frameState.pixelToCoordinateTransform; goog.asserts.assert(coordinateToPixelTransform, 'frameState has a coordinateToPixelTransform'); - ol.transform.translate(ol.transform.reset(coordinateToPixelTransform), - frameState.size[0] / 2, frameState.size[1] / 2); - ol.transform.scale(coordinateToPixelTransform, - 1 / viewState.resolution, -1 / viewState.resolution); - ol.transform.rotate(coordinateToPixelTransform, -viewState.rotation); - ol.transform.translate(coordinateToPixelTransform, + + ol.transform.compose(coordinateToPixelTransform, + frameState.size[0] / 2, frameState.size[1] / 2, + 1 / viewState.resolution, -1 / viewState.resolution, + -viewState.rotation, -viewState.center[0], -viewState.center[1]); + ol.transform.invert( ol.transform.setFromArray(pixelToCoordinateTransform, coordinateToPixelTransform)); }; diff --git a/src/ol/source/imagevectorsource.js b/src/ol/source/imagevectorsource.js index d672ee254e..f7e9324523 100644 --- a/src/ol/source/imagevectorsource.js +++ b/src/ol/source/imagevectorsource.js @@ -215,10 +215,14 @@ ol.source.ImageVector.prototype.getStyleFunction = function() { * @private */ ol.source.ImageVector.prototype.getTransform_ = function(center, resolution, pixelRatio, size) { - var transform = ol.transform.reset(this.transform_); - ol.transform.translate(transform, size[0] / 2, size[1] / 2); - ol.transform.scale(transform, pixelRatio / resolution, -pixelRatio / resolution); - return ol.transform.translate(transform, -center[0], -center[1]); + var dx1 = size[0] / 2; + var dy1 = size[1] / 2; + var sx = pixelRatio / resolution; + var sy = -sx; + var dx2 = -center[0]; + var dy2 = -center[1]; + + return ol.transform.compose(this.transform_, dx1, dy1, sx, sy, 0, dx2, dy2); };