微信开放数据域UI绘制解决方案的应用(支持滚动)

741 阅读1分钟

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();