PDA

View Full Version : xy co-ordinates on image for mouse events



bforbhavin
19 Apr 2013, 6:44 AM
I want to capture xy co-ordinates on my map image for the mouse events. I checked event object passed from the mouse event but it doesn't seem to be giving correct co-ordinates across all the browsers. How can I make sure that which property I need to use for particular browser? The co-ordinates should be relevant to the container of the image rather than the screen. Any suggestions?

slemmon
20 Apr 2013, 8:17 PM
With the click listener you'll have access to the Ext eventobject. Try using:


function (e) {
console.log(e.getXY());
}

bforbhavin
22 Apr 2013, 5:38 AM
e.getXY doesn't give co-ordinates w.r.t. container of the image. It seems e.getXY is the values of screen co-ordinates. I tried e.browserEvent.offsetX and offsetY, that gives same value of window.event.offsetX and offsetY. But that works for Chrome only.

MichaelEr
22 Apr 2013, 9:16 AM
You can get the region with Ext.util.Region.getRegion(cmp) for a specific component (e.g Ext.util.Region.getRegion(Ext.getBody())). If you use your image for the component and event.getXY() you should be able to to calculate the position of the event relative to the image coordinates. This works for me in another use case for IE, Firefox, and Safari.

slemmon
22 Apr 2013, 12:10 PM
Oh, I see.
See if this is better:


Ext.widget('image', {
renderTo: Ext.getBody()
, height: 24
, width: 24
, src: 'http://cdn.sencha.io/img/home/december-2012/icon-blog.png'
, listeners: {
afterrender: function () {
var me = this;
me.el.on('click', function (e) {
console.log(e.getX() - me.el.getX());
})
}
}
});

bforbhavin
22 Apr 2013, 5:23 PM
Thanks! I tried them and both solutions to be working in my case...

slemmon
22 Apr 2013, 9:02 PM
Excellent!
So, this one is answered is it?

bforbhavin
23 Apr 2013, 5:06 AM
Yes, it is answered!