网页版webview的matrix变换导致网页内容缩小的问题

论坛上有很多这样的帖子:“网页版webview中显示的内容被缩小”

所有帖子点进去都没有找到答案,然后自己研究了下。

发现根本原因是因为引擎中对iframe使用了transform变换,而transform不仅影响iframe窗口,而且影响iframe中的内容,但期望的肯定是像缩放浏览器窗口一样仅影响窗口而不要影响窗口中的内容。

对应的引擎代码如下,能否修复一下呢:
// cocos2d/webview/webview-impl.js 中的 updateMatrix 方法
// …
let matrix = “matrix(” + a + “,” + -b + “,” + -c + “,” + d + “,” + tx + “,” + -ty + “)”; // 这里有缩放
this._div.style[‘transform’] = matrix;
// …

我自己尝试修复后的updateMatrix方法如下(发现解决了该问题,但没细测,不知道有没有其它bug):
// cocos2d/webview/webview-impl.js
updateMatrix(node) {
if (!this._div || !this._visible) return;

    node.getWorldMatrix(_mat4_temp);
    const mat = _mat4_temp.m;

    const renderCamera = cc.Camera._findRendererCamera(node);
    if (renderCamera) {
        renderCamera.worldMatrixToScreen(_mat4_temp, _mat4_temp, cc.game.canvas.width, cc.game.canvas.height);
    }

    const dpr = cc.view._devicePixelRatio;
    const scaleX = mat[0];
    const scaleY = mat[5];
    const offsetX = cc.game.container.style.paddingLeft ? parseInt(cc.game.container.style.paddingLeft) : 0;
    const offsetY = cc.game.container.style.paddingBottom ? parseInt(cc.game.container.style.paddingBottom) : 0;

    const contentSize = node._contentSize;
    const anchorPoint = node._anchorPoint;

    // 反推出在不缩放的情况下,iframe 需要的像素大小
    const finalW = contentSize.width * scaleX / dpr;
    const finalH = contentSize.height * scaleY / dpr;

    this._updateSize(finalW, finalH);

    // === 💡 计算位移,仅用于 transform ===
    const appx = finalW * anchorPoint.x;
    const appy = finalH * anchorPoint.y;

    const tx = mat[12] / dpr - appx + offsetX;
    const ty = mat[13] / dpr - appy + offsetY;

    const matrix = `matrix(1, 0, 0, 1, ${tx}, ${-ty})`;

    this._div.style.transform = matrix;
    this._div.style.webkitTransform = matrix;
    this._div.style.transformOrigin = '0px 100% 0px';
    this._div.style.webkitTransformOrigin = '0px 100% 0px';

    this._setOpacity(node.opacity);
    this._forceUpdate = false;
}
1赞