cartodb/torque
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

animation zoom wip

Browse Source
This commit is contained in:
javi 2014-03-06 12:53:18 +01:00
parent 7545fba5e2
commit e89b1f6513
1 changed files with 24 additions and 14 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

38
lib/torque/leaflet/canvas_layer.js
View File

@ -28,6 +28,8 @@ L.CanvasLayer = L.Class.extend({
this.render = this.render.bind(this);
L.Util.setOptions(this, options);
this._canvas = this._createCanvas();
// backCanvas for zoom animation
this._backCanvas = this._createCanvas();
this._ctx = this._canvas.getContext('2d');
var requestAnimationFrame = window.requestAnimationFrame || window.mozRequestAnimationFrame ||
window.webkitRequestAnimationFrame || window.msRequestAnimationFrame || function(callback) {
@ -51,15 +53,21 @@ L.CanvasLayer = L.Class.extend({
onAdd: function (map) {
this._map = map;
// add container with the canvas to the tile pane
// the container is moved in the oposite direction of the
// map pane to keep the canvas always in (0, 0)
var tilePane = this._map._panes.tilePane;
var _container = L.DomUtil.create('div', 'leaflet-layer');
_container.appendChild(this._canvas);
_container.appendChild(this._backCanvas);
this._backCanvas.style.display = 'none';
tilePane.appendChild(_container);
this._container = _container;
// hack: listen to predrag event launched by dragging to
// set container in position (0, 0) in screen coordinates
map.dragging._draggable.on('predrag', function() {
var d = map.dragging._draggable;
L.DomUtil.setPosition(this._canvas, { x: -d._newPos.x, y: -d._newPos.y });
@ -69,8 +77,8 @@ L.CanvasLayer = L.Class.extend({
map.on('move', this.render, this);
map.on('resize', this._reset, this);
map.on({
'zoomanim': this._animateZoom,
'zoomend': this._endZoomAnim
'zoomanim': this._animateZoom,
'zoomend': this._endZoomAnim
}, this);
if(this.options.tileLoader) {
@ -84,17 +92,18 @@ L.CanvasLayer = L.Class.extend({
if (!this._animating) {
this._animating = true;
}
var back = this._backCanvas;
var back = this._createCanvas();
back.width = this._canvas.width;
back.height = this._canvas.height;
// paint current canvas in back canvas with trasnformation
var pos = this._canvas._leaflet_pos || { x: 0, y: 0 };
//back.getContext('2d').drawImage(this._canvas, -pos.x, -pos.y);
back.getContext('2d').drawImage(this._canvas, 0, 0);
// hide
this._container.appendChild(back);
this._canvas.style.visibility = 'hidden';
// hide original
this._canvas.style.display = 'none';
back.style.display = 'block';
var bg = back,
@ -104,9 +113,10 @@ L.CanvasLayer = L.Class.extend({
//scaleStr = ' scale(' + e.scale + ') ';
bg.style[transform] = scaleStr;
bg.style[transform] = e.backwards ?
/*bg.style[transform] = e.backwards ?
scaleStr + ' ' + initialTransform :
initialTransform + ' ' + scaleStr;
*/
},
_endZoomAnim: function () {
@ -127,13 +137,13 @@ L.CanvasLayer = L.Class.extend({
},
onRemove: function (map) {
this._container.parentNode.removeChild(this._container);
this._container.parentNode.removeChild(this._container);
map.off({
'viewreset': this._reset,
'move': this._render,
'resize': this._reset
//'zoomanim': this._animateZoom,
//'zoomend': this._endZoomAnim
'resize': this._reset,
'zoomanim': this._animateZoom,
'zoomend': this._endZoomAnim
}, this);
},