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

kinetic/momemtum dragging support, p=camptocamp, r=me (closes #2999)

Browse Source 
git-svn-id: http://svn.openlayers.org/trunk/openlayers@11220 dc9f47b5-9b13-0410-9fdd-eb0c1a62fdaf
This commit is contained in:
Éric Lemoine
2011-02-22 09:59:21 +00:00
parent 83f9422296
commit 103e620dff
7 changed files with 445 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files

81
examples/kinetic.html Normal file
View File

@@ -0,0 +1,81 @@
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>OpenLayers Kinetic Dragging Example</title>
<link rel="stylesheet" href="../theme/default/style.css" type="text/css" />
<link rel="stylesheet" href="style.css" type="text/css" />
<style type="text/css">
#map {
width: 100%;
height: 100%;
}
</style>
<script src="../lib/OpenLayers.js"></script>
<script type="text/javascript">
var map, layer;
function init(){
map = new OpenLayers.Map({
div: "map",
resolutions: [0.087890625, 0.0439453125, 0.02197265625, 0.010986328125],
panDuration: 100,
controls: [
new OpenLayers.Control.Navigation(
{dragPanOptions: {enableKinetic: true}}
)
]
});
layer = new OpenLayers.Layer.TileCache("TileCache Layer",
["http://c0.tilecache.osgeo.org/wms-c/cache/",
"http://c1.tilecache.osgeo.org/wms-c/cache/",
"http://c2.tilecache.osgeo.org/wms-c/cache/",
"http://c3.tilecache.osgeo.org/wms-c/cache/",
"http://c4.tilecache.osgeo.org/wms-c/cache/"],
"basic",
{
serverResolutions: [0.703125, 0.3515625, 0.17578125, 0.087890625,
0.0439453125, 0.02197265625, 0.010986328125,
0.0054931640625, 0.00274658203125, 0.001373291015625,
0.0006866455078125, 0.00034332275390625, 0.000171661376953125,
0.0000858306884765625, 0.00004291534423828125, 0.000021457672119140625],
buffer: 4
}
);
map.addLayer(layer);
map.setCenter(new OpenLayers.LonLat(0, 0), 0);
}
</script>
</head>
<body onload="init()">
<h1 id="title">Kinetic Dragging Example</h1>
<div id="tags">
kinetic, dragging
</div>
<p id="shortdesc">
Demonstrates Kinetic Dragging.
</p>
<div id="map" class="smallmap"></div>
<div id="docs">
<p>
OpenLayers Kinetic Dragging inspired from <a href="http://www.tile5.org">Tile5</a>, and
<a href="http://code.google.com/p/kineticscrolling/">kineticscrolling</a> for Google Maps API V3.
</p>
<p>
As shown in this example Kinetic Dragging is enabled by setting
<code>enableKinetic</code> to true in the config object provided to the
<code>Control.DragPan</code> constructor. When using
<code>Control.Navigation</code> or <code>Control.TouchNavigation</code>
providing options to the underlying <code>Control.DragPan</code>
instance is done through the <code>dragPanOptions</code> config
property.
</p>
</div>
</body>
</html>

2
examples/mobile.js
View File

@@ -19,7 +19,7 @@ function init() {
-20037508.34, -20037508.34, 20037508.34, 20037508.34 -20037508.34, -20037508.34, 20037508.34, 20037508.34
), ),
controls: [ controls: [
new OpenLayers.Control.Navigation(), new OpenLayers.Control.Navigation({dragPanOptions: {enableKinetic: true}}),
new OpenLayers.Control.Attribution(), new OpenLayers.Control.Attribution(),
new OpenLayers.Control.DrawFeature( new OpenLayers.Control.DrawFeature(
vector, OpenLayers.Handler.Point, {id: "point-control"} vector, OpenLayers.Handler.Point, {id: "point-control"}

1
lib/OpenLayers.js
View File

@@ -105,6 +105,7 @@
"OpenLayers/BaseTypes/Size.js", "OpenLayers/BaseTypes/Size.js",
"OpenLayers/Console.js", "OpenLayers/Console.js",
"OpenLayers/Tween.js", "OpenLayers/Tween.js",
"OpenLayers/Kinetic.js",
"Rico/Corner.js", "Rico/Corner.js",
"Rico/Color.js", "Rico/Color.js",
"OpenLayers/Ajax.js", "OpenLayers/Ajax.js",

66
lib/OpenLayers/Control/DragPan.js
View File

@@ -43,16 +43,48 @@ OpenLayers.Control.DragPan = OpenLayers.Class(OpenLayers.Control, {
* mouse cursor leaves the map viewport. Default is false. * mouse cursor leaves the map viewport. Default is false.
*/ */
documentDrag: false, documentDrag: false,
/**
* Property: kinetic
* {OpenLayers.Kinetic} The OpenLayers.Kinetic object.
*/
kinetic: null,
/**
* APIProperty: enableKinetic
* {Boolean} Set this option to enable "kinetic dragging". Can be
* set to true or to an object. If set to an object this
* object will be passed to the {<OpenLayers.Kinetic>}
* constructor. Defaults to false.
*/
enableKinetic: false,
/**
* APIProperty: kineticInterval
* {Integer} Interval in milliseconds between 2 steps in the "kinetic
* scrolling". Applies only if enableKinetic is set. Defaults
* to 10 milliseconds.
*/
kineticInterval: 10,
/** /**
* Method: draw * Method: draw
* Creates a Drag handler, using <panMap> and * Creates a Drag handler, using <panMap> and
* <panMapDone> as callbacks. * <panMapDone> as callbacks.
*/ */
draw: function() { draw: function() {
if(this.enableKinetic) {
var config = {interval: this.kineticInterval};
if(typeof this.enableKinetic === "object") {
config = OpenLayers.Util.extend(config, this.enableKinetic);
}
this.kinetic = new OpenLayers.Kinetic(config);
}
this.handler = new OpenLayers.Handler.Drag(this, { this.handler = new OpenLayers.Handler.Drag(this, {
"move": this.panMap, "move": this.panMap,
"done": this.panMapDone "done": this.panMapDone,
"down": this.panMapStart
}, { }, {
interval: this.interval, interval: this.interval,
documentDrag: this.documentDrag documentDrag: this.documentDrag
@@ -60,6 +92,15 @@ OpenLayers.Control.DragPan = OpenLayers.Class(OpenLayers.Control, {
); );
}, },
/**
* Method: panMapStart
*/
panMapStart: function() {
if(this.kinetic) {
this.kinetic.begin();
}
},
/** /**
* Method: panMap * Method: panMap
* *
@@ -67,11 +108,14 @@ OpenLayers.Control.DragPan = OpenLayers.Class(OpenLayers.Control, {
* xy - {<OpenLayers.Pixel>} Pixel of the mouse position * xy - {<OpenLayers.Pixel>} Pixel of the mouse position
*/ */
panMap: function(xy) { panMap: function(xy) {
if(this.kinetic) {
this.kinetic.update(xy);
}
this.panned = true; this.panned = true;
this.map.pan( this.map.pan(
this.handler.last.x - xy.x, this.handler.last.x - xy.x,
this.handler.last.y - xy.y, this.handler.last.y - xy.y,
{dragging: this.handler.dragging, animate: false} {dragging: true, animate: false}
); );
}, },
@@ -85,7 +129,21 @@ OpenLayers.Control.DragPan = OpenLayers.Class(OpenLayers.Control, {
*/ */
panMapDone: function(xy) { panMapDone: function(xy) {
if(this.panned) { if(this.panned) {
this.panMap(xy); var res = null;
if (this.kinetic) {
res = this.kinetic.end(xy);
}
this.map.pan(
this.handler.last.x - xy.x,
this.handler.last.y - xy.y,
{dragging: !!res, animate: false}
);
if (res) {
var self = this;
this.kinetic.move(res, function(x, y, end) {
self.map.pan(x, y, {dragging: !end, animate: false});
});
}
this.panned = false; this.panned = false;
} }
}, },

169
lib/OpenLayers/Kinetic.js Normal file
View File

@@ -0,0 +1,169 @@
OpenLayers.Kinetic = OpenLayers.Class({
/**
* Property: threshold
* In most cases changing the threshold isn't needed.
* In px/ms, default to 0.
*/
threshold: 0,
/**
* Property: interval
* {Integer} Interval in milliseconds between 2 steps in the "kinetic
* dragging". Defaults to 10 milliseconds.
*/
interval: 10,
/**
* Property: deceleration
* {Float} the deseleration in px/ms², default to 0.0035.
*/
deceleration: 0.0035,
/**
* Property: nbPoints
* {Integer} the number of points we use to calculate the kinetic
* initial values.
*/
nbPoints: 100,
/**
* Property: delay
* {Float} time to consider to calculate the kinetic initial values.
* In ms, default to 200.
*/
delay: 200,
/**
* Property: points
* List of points use to calculate the kinetic initial values.
*/
points: undefined,
/**
* Property: timerId
* ID of the timer.
*/
timerId: undefined,
/**
* Constructor: OpenLayers.Kinetic
*
* Parameters:
* options - {Object}
*/
initialize: function(options) {
OpenLayers.Util.extend(this, options);
},
/**
* Method: begin
*
* Begins the dragging.
*/
begin: function() {
clearInterval(this.timerId);
this.timerId = undefined;
this.points = [];
},
/**
* Method: update
*
* Updates during the dragging.
*/
update: function(xy) {
this.points.unshift({xy: xy, tick: new Date().getTime()});
if (this.points.length > this.nbPoints) {
this.points.pop();
}
},
/**
* Method: end
*
* Ends the dragging, start the kinetic.
*/
end: function(xy) {
var last, now = new Date().getTime();
for (var i = 0, l = this.points.length, point; i < l; i++) {
point = this.points[i];
if (now - point.tick > this.delay) {
break;
}
last = point;
}
if (!last) {
return;
}
var time = new Date().getTime() - last.tick;
var dist = Math.sqrt(Math.pow(xy.x - last.xy.x, 2) +
Math.pow(xy.y - last.xy.y, 2));
var speed = dist / time;
if (speed == 0 || speed < this.threshold) {
return;
}
var theta = Math.asin((xy.y - last.xy.y) / dist);
if (last.xy.x <= xy.x) {
theta = Math.PI - theta;
}
return {speed: speed, theta: theta};
},
/**
* Method: move
*
* Launch the kinetic move pan.
*
* Parameters:
* info - {Object}
* callback - arguments x, y (values to pan), end (is the last point)
*/
move: function(info, callback) {
var v0 = info.speed;
var fx = Math.cos(info.theta);
var fy = -Math.sin(info.theta);
var time = 0;
var initialTime = new Date().getTime();
var lastX = 0;
var lastY = 0;
var timerCallback = function() {
if (this.timerId == null) {
return;
}
time += this.interval;
var realTime = new Date().getTime() - initialTime;
var t = (time + realTime) / 2.0;
var p = (-this.deceleration * Math.pow(t, 2)) / 2.0 + v0 * t;
var x = p * fx;
var y = p * fy;
var args = {};
args.end = false;
var v = -this.deceleration * t + v0;
if (v <= 0) {
clearInterval(this.timerId);
this.timerId = null;
args.end = true;
}
args.x = x - lastX;
args.y = y - lastY;
lastX = x;
lastY = y;
callback(args.x, args.y, args.end);
};
this.timerId = window.setInterval(
OpenLayers.Function.bind(timerCallback, this),
this.interval);
},
CLASS_NAME: "OpenLayers.Kinetic"
});

130
tests/Kinetic.html Normal file
View File

@@ -0,0 +1,130 @@
<html>
<head>
<script src="OLLoader.js"></script>
<script type="text/javascript">
function test_Kinetic (t) {
t.plan(17);
var finish = false;
var results = {
110: {x: -2.7, y: -3.6, end: false},
120: {x: -2.1, y: -2.8, end: false},
130: {x: -1.5, y: -2.0, end: false},
140: {x: -0.9, y: -1.2, end: false},
150: {x: -0.3, y: -0.4, end: true}
};
var originalGetTime = Date.prototype.getTime;
Date.prototype.getTime = function() { return 0 };
var originalSetInterval = window.setInterval;
window.setInterval = function(callback, interval) {
while (!finish) {
var time = new Date().getTime();
Date.prototype.getTime = function() { return time+interval };
callback();
}
};
var kinetic = new OpenLayers.Kinetic({
deceleration: 0.01
});
kinetic.begin();
kinetic.update({x:0, y:0});
Date.prototype.getTime = function() { return 100 };
var measure = kinetic.end({x:30, y:40});
t.eq(measure.speed, 0.5, "correct speed");
t.eq(measure.theta, Math.PI - Math.atan(40/30), "correct angle");
// fake timer id
kinetic.timerId = 0;
kinetic.move(measure, function(x, y, end) {
var result = results[new Date().getTime()];
t.eq(Math.round(x * 1000) / 1000, result.x, "correct x");
t.eq(Math.round(y * 1000) / 1000, result.y, "correct y");
t.eq(end, result.end, "correct end");
finish = end;
});
Date.prototype.getTime = originalGetTime;
window.setInterval = originalSetInterval;
}
function test_Angle (t) {
t.plan(8);
var results = [
{speed: 0.5, theta: Math.round((Math.PI - Math.atan(40/30)) * 1000000) / 1000000},
{speed: 0.5, theta: Math.round((Math.PI + Math.atan(40/30)) * 1000000) / 1000000},
{speed: 0.5, theta: Math.round((- Math.atan(40/30)) * 1000000) / 1000000},
{speed: 0.5, theta: Math.round((Math.atan(40/30)) * 1000000) / 1000000}
];
var originalGetTime = Date.prototype.getTime;
Date.prototype.getTime = function() { return 0 };
var kinetic = new OpenLayers.Kinetic();
kinetic.begin();
kinetic.update({x:0, y:0});
Date.prototype.getTime = function() { return 100 };
var measure = kinetic.end({x:30, y:40});
t.eq(measure.speed, results[0].speed, "correct speed");
t.eq(Math.round(measure.theta * 1000000) / 1000000,
results[0].theta, "correct angle");
var originalGetTime = Date.prototype.getTime;
Date.prototype.getTime = function() { return 0 };
var kinetic = new OpenLayers.Kinetic();
kinetic.begin();
kinetic.update({x:0, y:0});
Date.prototype.getTime = function() { return 100 };
var measure = kinetic.end({x:30, y:-40});
t.eq(measure.speed, results[1].speed, "correct speed");
t.eq(Math.round(measure.theta * 1000000) / 1000000,
results[1].theta, "correct angle");
var originalGetTime = Date.prototype.getTime;
Date.prototype.getTime = function() { return 0 };
var kinetic = new OpenLayers.Kinetic();
kinetic.begin();
kinetic.update({x:0, y:0});
Date.prototype.getTime = function() { return 100 };
var measure = kinetic.end({x:-30, y:-40});
t.eq(measure.speed, results[2].speed, "correct speed");
t.eq(Math.round(measure.theta * 1000000) / 1000000,
results[2].theta, "correct angle");
var originalGetTime = Date.prototype.getTime;
Date.prototype.getTime = function() { return 0 };
var kinetic = new OpenLayers.Kinetic();
kinetic.begin();
kinetic.update({x:0, y:0});
Date.prototype.getTime = function() { return 100 };
var measure = kinetic.end({x:-30, y:40});
t.eq(measure.speed, results[3].speed, "correct speed");
t.eq(Math.round(measure.theta * 1000000) / 1000000,
results[3].theta, "correct angle");
Date.prototype.getTime = originalGetTime;
}
</script>
</head>
<body>
<div id="map" style="width: 600px; height: 300px;"/>
<div style="display: none;"><div id="invisimap"></div></div>
</body>
</html>

1
tests/list-tests.html
View File

@@ -208,5 +208,6 @@
<li>Tile/Image/IFrame.html</li> <li>Tile/Image/IFrame.html</li>
<li>Tile/WFS.html</li> <li>Tile/WFS.html</li>
<li>Tween.html</li> <li>Tween.html</li>
<li>Kinetic.html</li>
<li>Util.html</li> <li>Util.html</li>
</ul> </ul>