记录cocos creator index.html里设置gamecanvas 的display为none导致的无法点击场景的bug

问题产生：

需要在原生js里切换cocos场景和原生场景。所以刚开始就把gameCanvas的display设置成为了none。过一会儿条件达到再显示。但是导致的问题是场景里的按钮无法点击。

简单还原：

 

这样一秒后游戏场景显示，但是按钮无法点击。

开始破案：

破案的时候，用调试模式打包。这样就可以利用调用堆栈进行调试。

我们先不隐藏和显示，然后点击按钮查看调用堆栈。

嗯，正常走到了doSome的函数。

然后我们先隐藏后显示。因为我们知道肯定不能走到doSome。所以就往后一步步打断点查看在哪不能走了。一步步查下来发现_onTouchEventCallback（CCEventManager.js:506）这一步走了。

然后_touchStartHandler（CCNode.js:469）行（node.dispatchEvent）却没有走。

然后就定位到node._hitTest判断为false

 进入_hitTest函数

发现testPt.y是负值。导致检测返回的false。

然后，这一段会涉及坐标转换，不细说。反正最后的原因是传入的参数point的y为负。

 

所以最终导致testPt.y为负。

现在开始往回追朔，为什么point.y是负值。

 

 最后往回追朔，发现CCInputManager里进行和point的坐标转换。即将原生canvas的点击坐标转换到游戏场景的坐标。就到了getTouchByXY的函数。

已经到了打银角大王的时候了。

我们先看看这个函数

 里面的核心函数是convertToLocationInView将坐标进行转换。

我们再进去。

马上要打金角大王了！

  /**
     * !#en
     * Returns the real location in view for a translation based on a related position
     * !#zh 将屏幕坐标转换为游戏视图下的坐标。
     * @method convertToLocationInView
     * @param {Number} tx - The X axis translation
     * @param {Number} ty - The Y axis translation
     * @param {Object} relatedPos - The related position object including "left", "top", "width", "height" informations
     * @return {Vec2}
     */
    convertToLocationInView: function (tx, ty, relatedPos, out) {
        let result = out || cc.v2();
        let posLeft = relatedPos.adjustedLeft ? relatedPos.adjustedLeft : relatedPos.left;
        let posTop = relatedPos.adjustedTop ? relatedPos.adjustedTop : relatedPos.top;
        let x = this._devicePixelRatio * (tx - posLeft);
        let y = this._devicePixelRatio * (posTop + relatedPos.height - ty);
        if (this._isRotated) {
            result.x = cc.game.canvas.width - y;
            result.y = x;
        }
        else {
            result.x = x;
            result.y = y;
        }
        return result;
    },

核心代码是：

let y = this._devicePixelRatio * (posTop + relatedPos.height - ty);

最终因为是relatedPos.height为0导致的y为负值。

然后我们再往回追，发现这个relatedPos是canvasBoundingRect。

我们暂且把canvasBoundingRect称作转换尺寸。后面部分就这么叫。

我们回到CCInputManager的mouseEventOnElement函数。看到整个对象都是0值。

 我们用正常的流程走一遍看到区别：

 这个才是我们想要的正确值。那么就最终定位了问题，canvas的尺寸获取有问题。就可以联系到我们最开始设置的display：none。

已经离答案很近了！

 我们往上看，这个值怎么来的。发现只有_updateCanvasBoundingRect这个函数会更新转换尺寸。所以我们详细看一下。

这就是金角银角的干娘九尾狐。

剑指平安县！getBoundingClientRect函数有问题。 这是原生element的函数。我们从MDN查看一下啊。

 然后我们看getCilentRects方法。

 

 看到了！如果元素的display:none会返回空列表！

问题找到了，然后我们想怎么解决这个问题。

我们从这个函数（_updateCanvasBoundingRect）的调用堆栈里往回找，可以找到main.js文件里的

cc.director.runSceneImmediate(scene);

这句代码执行的时候，canvas还是隐藏状态，所以就出错了。

那么我们要解决可以分2种方案：

1：延迟执行这个加载场景函数。即注释这一行代码，在需要的时候再调用它。

2：我们可以直接执行_updateCanvasBoundingRect这个函数。

cc.internal.inputManager._updateCanvasBoundingRect();

这行代码就是更新转换尺寸。在我们显示canvas的时候调用一下，就可以了。

好了问题解决了！总结一下：

问题是因为隐藏了canvas导致转换尺寸为0，导致转化后的事件坐标和节点坐标对应不上，所以事件无法触发。

转换坐标只有在场景更新，页面尺寸变化的时候会执行。

要解决就可以手动更新一下转换坐标。

其实问题最终发现很简单，但是要真正知道为什么导致的，要怎么最好的解决，其实并不是易事。