记录cocoscreatorindex.html⾥设置gamecanvas的display。。
。
问题产⽣：
需要在原⽣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}
*/svg和canvas的区别
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 : p;
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这个函数。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。