Egret白鹭项目开放数据域接入微信轻量级的Canvas渲染引擎介绍:
微信官方团队发布了开放数据域UI绘制解决方案,详情请戳这里:
使用白鹭项目接入过程中可能会遇到2个坑(使用官方提供的测试用例),下面提供解决办法:
1、界面缩放显示异常 先放正常效果图: 异常效果图如下 原因是 sharedCanvas 里面绘制的是内容为960px,和白鹭画布有个转换关系,需要对bitmap进行缩放。 在platform.js 加上这一句解决问题:
bitmap.scaleX = bitmap.scaleY = sharedCanvas.width/960;
2、在部分机型下界面被裁剪(比如iphone5、iphon6 等低分辨率机型) 异常效果图如下 原因是 sharedCanvas 里面绘制的是内容为960px,而手机真实分辨率低于960,不够面积用于绘制,故要对sharedCanvas尺寸进行修改,设置成960宽。 在platform.js 加上下面代码:
if(sharedCanvas.width < 960){
let data = wx.getSystemInfoSync();
sharedCanvas.width = 960;
sharedCanvas.height = 960 * data.windowHeight/data.windowWidth;
sharedCanvas.style.width = sharedCanvas.width + 'px';
sharedCanvas.style.height = sharedCanvas.height + 'px';
}
在openDataContext/index.js 加上下面代码进行事件侦听,在打开排行榜时需要强制绘制
wx.onMessage((data) => {
init();
});
修改完之后,就能看到正常效果了。
最后,附上 platform.js 里面 WxgameOpenDataContext class的完整代码
class WxgameOpenDataContext {
createDisplayObject(type, width, height) {
if(sharedCanvas.width < 960){
let data = wx.getSystemInfoSync();
sharedCanvas.width = 960;
sharedCanvas.height = 960 * data.windowHeight/data.windowWidth;
sharedCanvas.style.width = sharedCanvas.width + 'px';
sharedCanvas.style.height = sharedCanvas.height + 'px';
}
const bitmapdata = new egret.BitmapData(sharedCanvas);
bitmapdata.$deleteSource = false;
const texture = new egret.Texture();
texture._setBitmapData(bitmapdata);
const bitmap = new egret.Bitmap(texture);
console.log(width,height);
bitmap.width = width;
bitmap.height = height;
bitmap.scaleX = bitmap.scaleY = sharedCanvas.width/960;
if (egret.Capabilities.renderMode == "webgl") {
const renderContext = egret.wxgame.WebGLRenderContext.getInstance();
const context = renderContext.context;
////需要用到最新的微信版本
////调用其接口WebGLRenderingContext.wxBindCanvasTexture(number texture, Canvas canvas)
////如果没有该接口,会进行如下处理,保证画面渲染正确,但会占用内存。
if (!context.wxBindCanvasTexture) {
egret.startTick((timeStarmp) => {
egret.WebGLUtils.deleteWebGLTexture(bitmapdata.webGLTexture);
bitmapdata.webGLTexture = null;
return false;
}, this);
}
}
return bitmap;
}
postMessage(data) {
const openDataContext = wx.getOpenDataContext();
openDataContext.postMessage(data);
}
}
WxgamePlatform.prototype.name = 'wxgame';
WxgamePlatform.prototype.openDataContext = new WxgameOpenDataContext();
window.platform = new WxgamePlatform();