cocos2d-html5 onMouseDown，如何在浏览器中获得转换位置？

Question

在cocos2d-html5中，
我可以使用这种方法获得鼠标事件，

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

因此，在Chrome浏览器控制台中，我可以看到点击的位置 但是，该位置不是cocos2d屏幕的位置。
位置是浏览器大小的相对位置。我的意思是，

参考图片〜

但是，我希望得到像这样的cocos2d-screen相对位置，

有没有办法直接获得该职位或 有什么方法可以转换成这个位置吗？

我的项目是基于浏览器而不是模拟器或手机。

Answer 1

这是我的解决方案。

首先，你可以捕捉事件，

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

    //here you can do anything using converted loc

},

其次，转换坐标。

 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;
    },

希望这有帮助〜

Answer 2

您可以使用触摸事件来获得所需内容。此事件也可以响应鼠标。这也是一个更好的跨平台解决方案。

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

此位置为显示区域中的正数和显示区域外的负数。

像这样：

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

确保在图层中设置触摸事件：

this.setTouchEnabled(true);