PDA

View Full Version : Get Scroll offset (relative positioning)



Yannickdl
18 Apr 2011, 3:41 AM
I'm working on an application in which I want to have a panel that displays a map (.png/.jpg) and on tap the user can add a red highlight (/button).

The displayed image (the map) is larger than the screen resolution so to compensate I have enabled a scroll: both so that the user can scroll from left to right and up and down.

Now comes the feature of adding a highlight; I have added a evenlistener to the panel which, on tap, adds a button to the screen.

The X and Y coordinates of the button are formed by the pageX and pageY (the coordinates of the touch of the user).

The problem is however that I need to compensate the X and Y depending on the scroll of the user.

For example, if the user scrolls 200px to the right, the X and Y also need to move 200px to the right. Yet, the Scroll X and Scroll Y always represent the same X and Y (the don't compensate for any scrolling).

Effectively my question is, how do I find out 'how much' the user has scrolled so that I can create a algoritm that positions the overlay buttons correctly. Currently, if the users scrolls to the far right, the overlayed buttons are positioned out of the screen (somewhere to the far left). The position has to be relative to the view of the user.

I have tried things like:

- getScroll() - Doesn't give me a value (most of the times an error)
- getLeft() - Doesn't get updated on scroll, always the same
- getXY() - X and Y don't change, only the 'view' does

Has anybody got an idea or solution? I have been staring at it for the last couple of hours.. If the above is not clear (enough), please say so.

For some code:

Creation of the map tabpanel with the main image




var imagePanel = new Ext.Panel({
title: "MAP",
title: "MAP",
fullscreen: true,
scroll: "both",

items: [
{
id: "map",
html: "<div id='plattegrond'><img src='plattegrond-test.png' border='1'></div>"
}
]
});


Creation of the image that has to be overlayed on click





var imageP = {

xtype: 'button',
iconMask: true,
iconCls: 'arrow_left',
height: 30,
width: 30

}


Function that handles the tap and add's the image




imagePanel.body.on('tap', function(e){

console.log('x: ' + e.pageX + ', y: ' + e.pageY);

imageP.x = e.pageX,

//Y valu has to comepnsate for the imageHeight and the height of the tabbar
imageP.y = e.pageY - imagePanel.getHeight() - 25,

imagePanel.add(imageP),
imagePanel.doLayout()

});

Yannickdl
18 Apr 2011, 6:33 AM
Found it!

To get the scroller offset you can use the following code;

Imagepanel is in my case the panel that contains the main image (the map). I'll post some full code later on.




var Xscroll = imagePanel.scroller.offset.x;
var Yscroll = imagePanel.scroller.offset.y;