cocos2d-html5 - 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);