cocos2d-html5 onMouseDown, how to get converted position in browser?

Question

In cocos2d-html5,
I can get mouse event using this method,

onMouseDown:function( event ) {
    var loc = event.getLocation();
    console.debug( loc );
}

So in Chrome browser console, I can see the clicked location.
but, the location is not position of the cocos2d screen.
the location is browser size relative position. I mean,

reference image~

But, I want to get cocos2d-screen relative position like this,

is there any way to get the position directly or
any way to convert into the location?

My project is for browser based not simulator or phone.

Answer 1

Here is my solution.

first, you can catch event,

onMouseDown:function( event ) {
    var rawLoc = event.getLocation();
    var loc = this.getOnPanelPos(rawLoc);

    //here you can do anything using converted loc

},

secondly, convert the coords.

 getOnPanelPos: function(loc){

        var canvas = document.getElementById("gameCanvas");
        var canvasW = canvas.getAttribute("width");
        var canvasH = canvas.getAttribute("height");
        var scale = canvasH/960;
        this.bubblePanScale = scale;
        var scaleReverse = 960/canvasH;
        var paddingX = (canvasW - 640*scale)/2;
        var modifiedLoc = loc;
        modifiedLoc.x = modifiedLoc.x - paddingX;

        modifiedLoc.x *= scaleReverse;
        modifiedLoc.y *= scaleReverse;

        return modifiedLoc;
    },

Hope this help~

Answer 2

You can use touch event to get what you want. This event can respond mouse too. It's a better cross platform resolution too.

onTouchesEnded: function(touches, event){
var location = touches[0].getLocation();
console.log(location);
this.changeAction(location);
}

This location is positive number in display area and negative number out of display area.

Like this:

cc.Point {x: 48.58870967741938, y: 107.66129032258064}
cc.Point {x: -286.491935483871, y: 71.37096774193549}

Ensure set the touch event on in your layer:

this.setTouchEnabled(true);