-
Creator 版本：2.1.4
-
目标平台：Web
在手机上运行web包
webview缩小了，看了代码是用了 transform: matrix(0.5, 0, 0, 0.5, 176.45, -26.05);
缩放为0.5了，有方法设置不进行缩放吗？
1赞
和这问题一致
问题
网页缩小
为什么缩放了
查看webview组件的源码，发现了updateMatrix函数，这是个刷新操作，放在update中的，
首先，先拿到设备或浏览器像素比例,就是devicePixelRatio，还有缩放比scaleX、scaleY
去执行下面一句
scaleX /= dpr; scaleY /= dpr; var a = _mat4_temp.m00 * scaleX; var d = _mat4_temp.m05 * scaleY; var matrix = "matrix(" + a + "," + -b + "," + -c + "," + d + "," + tx + "," + -ty + ")";
得出来的a会被放在transform:matrix中,这是一个css3中的矩阵，使用矩阵对图像进行变换。
问题就在这里了，
引擎会根据设备的像素比例去缩放webview的网页大小
怎么修改
我们得知网页的缩放是放在transform:matrix中，了解这个属性的人就知道要修改这里的a,d值，这是控制网页的缩放，tx，和ty是控制网页的偏移，不了解的可以去百度下这个属性。
接下来我们修改
a = 1
d = 1
缩放值修改了，我们计算下从原来的值缩放到1是放大了多少倍
var selfScale = 1/a;
修改webview的大小
this._w = node._contentSize.width/selfScale;
this._h = node._contentSize.height/selfScale;
this._updateSize(this._w, this._h);
每次刷新会重新绘制大小。
这样修改视图大小会改为我们想要的大小（不进行缩放），但是组件的偏移会出现问题，继续修改。
发现了偏移量的计算中有一个计算会乘以缩放倍数，我们修改自己的缩放倍数
var w = this._div.clientWidth * 1;
var h = this._div.clientHeight * 1;
运行，完美显示
PS. 完整代码（此代码修改在2.1.4中的编译后的cocos2d-js.js中）
var scaleNum = 1;//缩放倍数（任意修改） var selfScale = scaleNum / a; this._w = node._contentSize.width / selfScale; this._h = node._contentSize.height / selfScale; var offsetX = container && container.style.paddingLeft ? parseInt(container.style.paddingLeft) : 0; var offsetY = container && container.style.paddingBottom ? parseInt(container.style.paddingBottom) : 0; this._updateSize(this._w, this._h); var w = this._div.clientWidth * scaleNum; var h = this._div.clientHeight * scaleNum; var appx = w * _mat4_temp.m00 * node._anchorPoint.x; var appy = h * _mat4_temp.m05 * node._anchorPoint.y; var viewport = cc.view._viewportRect; offsetX += viewport.x / dpr; offsetY += viewport.y / dpr; var tx = _mat4_temp.m12 * scaleX - appx + offsetX, ty = _mat4_temp.m13 * scaleY - appy + offsetY; var matrix = "matrix(" + scaleNum + "," + -b + "," + -c + "," + scaleNum + "," + tx + "," + -ty + ")";
最后
无图无真相
0.5倍缩放
1倍缩放
2倍缩放
放上完整demo cocos_webview
修改后的的js放在项目路径下的js文件夹中
2赞
结论是需要修改Cocos源码？
如果有更好的方案可以提出
ipad上仍有问题
我来提一个方案吧，抛砖引玉。缺点就是会闪一下，适配问题还有待观察
resetWebView(webView:cc.WebView)
{
let size = webView.node.getContentSize()
let parentSize = webView.node.parent.getContentSize()
let bottom = (parentSize.height/2 - size.height/2 + webView.node.y)
//let bottom = 100
let left = (parentSize.width/2 - size.width/2 + webView.node.x)
let devicePixelRatio = cc.view._devicePixelRatio
let iframes = document.getElementsByTagName('iframe')
if(iframes.length > 0)
{
let parentElement = iframes[0] //.parentElement
this.oldStyle.width= parentElement.style.width
parentElement.style.width = (size.width* cc.view._scaleX/devicePixelRatio) + 'px'
this.oldStyle.height = parentElement.style.height
parentElement.style.height = (size.height* cc.view._scaleY/devicePixelRatio) + 'px'
this.oldStyle.bottom = parentElement.style.bottom
parentElement.style.bottom = (bottom* cc.view._scaleY/devicePixelRatio) + 'px'
this.oldStyle.left = parentElement.style.left
parentElement.style.left = (left* cc.view._scaleX/devicePixelRatio) + 'px'
this.oldStyle.transform = parentElement.style.transform
parentElement.style.transform = 'none'
}
}
补充一下，用完的webview最好destory，不然会搜索到很多个iframe 另外，如果有动画，最好做一下CSS的恢复。另外要延迟一点点时间。
webview.node.on(‘loaded’, ()=>{
this.scheduleOnce(()=>{
this.resetWebView(webview)
}, 1/30)
}, this);
1赞
mark~~~
这个可以用在panel中嘛？我用webview的时候出现网页适配问题，应该怎么修改啊
沃日，你是不是不会markdown语法
1赞