ashatora/openlayers
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Use translate3d and translate where available.

Browse Source
This commit is contained in:
ahocevar
2012-12-11 20:04:17 +01:00
parent 810d9ea95d
commit 44f28f8791
2 changed files with 46 additions and 16 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
lib/OpenLayers/Control/PinchZoom.js
View File

@@ -105,12 +105,10 @@ OpenLayers.Control.PinchZoom = OpenLayers.Class(OpenLayers.Control, {
var current = (this.preserveCenter) ? var current = (this.preserveCenter) ?
this.map.getPixelFromLonLat(this.map.getCenter()) : evt.xy; this.map.getPixelFromLonLat(this.map.getCenter()) : evt.xy;
var dx = Math.round((current.x - pinchOrigin.x) + (scale - 1) * (containerOrigin.x - pinchOrigin.x)); var dx = Math.round((containerOrigin.x + current.x - pinchOrigin.x) + (scale - 1) * (containerOrigin.x - pinchOrigin.x));
var dy = Math.round((current.y - pinchOrigin.y) + (scale - 1) * (containerOrigin.y - pinchOrigin.y)); var dy = Math.round((containerOrigin.y + current.y - pinchOrigin.y) + (scale - 1) * (containerOrigin.y - pinchOrigin.y));
this.applyTransform( this.map.applyTransform(dx, dy, scale);
"translate(" + dx + "px, " + dy + "px) scale(" + scale + ")"
);
this.currentCenter = current; this.currentCenter = current;
}, },

54
lib/OpenLayers/Map.js
View File

@@ -1758,17 +1758,16 @@ OpenLayers.Map = OpenLayers.Class({
} }
this.center = null; this.center = null;
if (dx) { if (dx) {
this.layerContainerDiv.style.left = this.layerContainerOriginPx.x -= dx;
(this.layerContainerOriginPx.x -= dx) + "px";
this.minPx.x -= dx; this.minPx.x -= dx;
this.maxPx.x -= dx; this.maxPx.x -= dx;
} }
if (dy) { if (dy) {
this.layerContainerDiv.style.top = this.layerContainerOriginPx.y -= dy;
(this.layerContainerOriginPx.y -= dy) + "px";
this.minPx.y -= dy; this.minPx.y -= dy;
this.maxPx.y -= dy; this.maxPx.y -= dy;
} }
this.applyTransform();
var layer, i, len; var layer, i, len;
for (i=0, len=this.layers.length; i<len; ++i) { for (i=0, len=this.layers.length; i<len; ++i) {
layer = this.layers[i]; layer = this.layers[i];
@@ -1928,11 +1927,9 @@ OpenLayers.Map = OpenLayers.Class({
// (re)set the layerContainerDiv's location // (re)set the layerContainerDiv's location
if (zoomChanged || this.layerContainerOrigin == null) { if (zoomChanged || this.layerContainerOrigin == null) {
this.layerContainerOrigin = this.getCachedCenter(); this.layerContainerOrigin = this.getCachedCenter();
var style = this.layerContainerDiv.style;
style.left = "0px";
style.top = "0px";
this.layerContainerOriginPx.x = 0; this.layerContainerOriginPx.x = 0;
this.layerContainerOriginPx.y = 0; this.layerContainerOriginPx.y = 0;
this.applyTransform();
var maxExtent = this.getMaxExtent({restricted: true}); var maxExtent = this.getMaxExtent({restricted: true});
var maxExtentCenter = maxExtent.getCenterLonLat(); var maxExtentCenter = maxExtent.getCenterLonLat();
var lonDelta = this.center.lon - maxExtentCenter.lon; var lonDelta = this.center.lon - maxExtentCenter.lon;
@@ -2020,10 +2017,9 @@ OpenLayers.Map = OpenLayers.Class({
var oldTop = this.layerContainerOriginPx.y; var oldTop = this.layerContainerOriginPx.y;
var newLeft = Math.round(originPx.x - newPx.x); var newLeft = Math.round(originPx.x - newPx.x);
var newTop = Math.round(originPx.y - newPx.y); var newTop = Math.round(originPx.y - newPx.y);
this.layerContainerDiv.style.left = this.applyTransform(
(this.layerContainerOriginPx.x = newLeft) + "px"; (this.layerContainerOriginPx.x = newLeft),
this.layerContainerDiv.style.top = (this.layerContainerOriginPx.y = newTop));
(this.layerContainerOriginPx.y = newTop) + "px";
var dx = oldLeft - newLeft; var dx = oldLeft - newLeft;
var dy = oldTop - newTop; var dy = oldTop - newTop;
this.minPx.x -= dx; this.minPx.x -= dx;
@@ -2650,6 +2646,42 @@ OpenLayers.Map = OpenLayers.Class({
return this.getLayerPxFromViewPortPx(px); return this.getLayerPxFromViewPortPx(px);
}, },
/**
* Method: applyTransform
* Applies the given transform to layers.
*/
applyTransform: (function() {
var transformProperty,
translatePrefix = 'translate3d(',
translatePostfix = ',0)',
scalePrefix = 'scale3d(',
scalePostfix = ',1)';
return function(dx, dy, scale) {
var origin = this.layerContainerOriginPx;
dx = dx || origin.x;
dy = dy || origin.y;
scale = scale || 1;
var style = this.layerContainerDiv.style;
if (transformProperty === undefined) {
transformProperty = OpenLayers.Util.vendorPrefix.style("transform");
style[transformProperty] = translatePrefix + '0,0' + translatePostfix;
if (!~style[transformProperty].indexOf(translatePrefix)) {
translatePrefix = 'translate(';
translatePostfix = ')';
scalePrefix = 'scale(';
scalePostfix = ')';
}
}
if (transformProperty) {
style[transformProperty] = translatePrefix + dx + 'px,' + dy + 'px' + translatePostfix + scalePrefix + scale + ',' + scale + scalePostfix;
} else {
style.left = dx + 'px';
style.top = dy + 'px';
}
console.log(style[transformProperty]);
};
}()),
CLASS_NAME: "OpenLayers.Map" CLASS_NAME: "OpenLayers.Map"
}); });