1. #1
    Sencha User
    Join Date
    Jan 2008
    Location
    Los Angeles
    Posts
    149
    Vote Rating
    1
    radtad is on a distinguished road

      0  

    Default getting relative X and Y coordinates

    getting relative X and Y coordinates


    I'm using an override for Ext.Panel from this thread:
    http://www.extjs.com/forum/showthrea...0image%20panel

    What I want to do is get the X and Y coordinates relative to the picture, not the page coordinates. Is there any way to do this in ExtJS? I've looked through the docs, but I'll I seem to find is page coordinates, not relative coordinates. I can write something, but I figured this would be around somewhere in Ext. Here is the code I'm using.

    Code:
        var div  = document.createElement('DIV');
        div.id   = 'map-image-container';
    
        var image = document.createElement('IMG');
        image.src = 'map0.jpg';
        image.id  = 'map-image';
        setImageSize(image,zoom);
    
        div.appendChild(image);
    
        var mappanelimage = new Ext.ux.PanPanel({
            border: false,
            id: 'map',
            client: div,
            listeners: {
                render: function(mappanel) {
                    new Ext.Resizable(mappanel.getEl(), {
                        pinned: true,
                        transparent: true,
                        resizeElement: function() {
                            var box = this.proxy.getBox();
                            mappanel.updateBox(box);
                            if (mappanel.layout) {
                                mappanel.doLayout();
                            }
                            return box;
                        }
                    });
                    mappanel.mon(mappanel.body, 'click', mappanel.onBodyClick, mappanel);
                },
            },
            onBodyClick : function( e, target){
                 // obviously this part returns the page coordinates when i need to 
                 // return the relative coords to the image
                 var coords = e.getXY();
                 console.log('x: '+coords[0]+', y: '+coords[1]);
            }
        });

  2. #2
    Touch Premium Member
    Join Date
    Feb 2008
    Posts
    206
    Vote Rating
    0
    BlueCamel is on a distinguished road

      0  

    Default


    [QUOTE=radtad;457914]
    What I want to do is get the X and Y coordinates relative to the picture, not the page coordinates.

    You know the click X and Y position. If you know the X and Y position of the picture you should be able to calculate the click X/Y position relative to the image.

    So, not entirely sure what you're doing here. Is this the X/Y position of the click on the image regardless of where the image is in the browser? I had to recently do the same, but only for the X position, not Y.

    Code:
    // add a new click handler to this div
    el = Ext.get("my-div");
    el.on('click', function(e, div, o){
    
        // used to calculate the click position on the div
        var x = {
            click: e.getXY()[0],
            pos: el.getLeft(),
            scroll: el.getScroll().left
        };
    
        var click = (x.click - x.pos) + x.scroll;
        
    });
    The key here is to calculate the position of the click relative to the image position and to take into account the scroll position of the container for the image.

  3. #3
    Sencha User
    Join Date
    Jan 2008
    Location
    Los Angeles
    Posts
    149
    Vote Rating
    1
    radtad is on a distinguished road

      0  

    Default


    Hey BlueCamel, thanks for the reply. That might work what you have there. What I'm doing with this is trying to have a seating map within a building. So if I click on the map, that is where I'd like to insert a seat. So this is why I would want the X and Y relative to the map image itself. Here is what I did that works (might be better another way like yours):

    Code:
            onBodyClick : function( e, target){
                    var coords = e.getXY();
                    var map     = Ext.get('map');
                    var left    = parseInt(map.getLeft());
                    var top     = parseInt(map.getTop());
                    var img     = Ext.get('map-image-container');
                    var imgleft = left - img.getLeft();
                    var imgtop  = top - img.getTop();
    
                    var x = parseInt(coords[0]) - left + imgleft;
                    var y = parseInt(coords[1]) - top + imgtop;
                    addSeat(x,y);
                }
            }
    So basically what I did is get image 'map' top and left, subtract if from the page X and Y. This gives me my starting point. Then I add whatever I've dragged from the image 'map-image-container left and top. This gives me the appropriate relative coordinates to the image. Hopefully this makes sense. I was hoping there would be something in Ext that would already do this.

  4. #4
    Sencha - Ext JS Dev Team Animal's Avatar
    Join Date
    Mar 2007
    Location
    Notts/Redwood City
    Posts
    30,508
    Vote Rating
    56
    Animal has a spectacular aura about Animal has a spectacular aura about Animal has a spectacular aura about

      0  

    Default


    That's what Element.getOffsetsTo does.

  5. #5
    Sencha User
    Join Date
    Jan 2008
    Location
    Los Angeles
    Posts
    149
    Vote Rating
    1
    radtad is on a distinguished road

      0  

    Default


    Thanks for the reply Animal. I'm not sure if this will work with the code though. The click event that is being fired returns an Ext.EventObject and the target HTML Element. The target is great I can definitely use that. But how do I get the click point using getOffsetsTo? The only way to do that is to use the EventObject being returned correct? Maybe I'm doing something wrong because it seems to be returning x: 0 and y: 0 all the time assuming because it doesn't know the click point. Any suggestions would be great.

  6. #6
    Sencha - Ext JS Dev Team Animal's Avatar
    Join Date
    Mar 2007
    Location
    Notts/Redwood City
    Posts
    30,508
    Vote Rating
    56
    Animal has a spectacular aura about Animal has a spectacular aura about Animal has a spectacular aura about

      0  

    Default


    The event contains point information.

    Not if you attempt to debug the handler though! This is a gotcha of event processing and debugging. Catch a click event, your debugger breaks, nove the cursor one pixel, and the event has changed to a mousemove. Move it out of the current element, and its a mouseout.

Thread Participants: 2