收藏
回答

微信小游戏绘制排行榜时,IOS机型在滑动canvas时会闪屏

问题模块 框架类型 问题类型 终端类型 微信版本 基础库版本
框架 小游戏 Bug 客户端 5.7.2 2.3.0

- 当前 Bug 的表现(可附上截图)

查看排行榜、滑动排行榜时会闪屏,而且很严重,非常影响体验。闪屏是黑屏和正常显示交替出现,黑屏时就是整个屏幕是全黑的,然后又显示正常

- 预期表现

实现在开放数据域里,绘制可以滑动的排行榜

- 复现路径

IOS机型(ip7,ip6s,ipad2017都出现)查看排行榜、滑动排行榜时会闪屏,而且很严重,非常影响体验

- 提供一个最简复现 Demo

好像是在心跳定时器里运行的loop函数在重绘canvas时就会闪屏


/**

* 循环函数

* 每帧判断一下是否需要渲染

* 如果被标脏,则重新渲染

*/

function loop() {

if (renderDirty) {

// console.log(`stageWidth :${stageWidth}   stageHeight:${stageHeight}`)

context.setTransform(1, 0, 0, 1, 0, 0);

context.clearRect(0, 0, sharedCanvas.width, sharedCanvas.height);

drawRankPanel();

renderDirty = false;

}

requestAnimationFrameID = requestAnimationFrame(loop);

}



wx.onTouchMove((event) => {

var l = event.changedTouches.length;

for (var i = 0; i < l; i++) {

onTouchMove(event.changedTouches[i]);

}

})


function onTouchMove(event) {

// console.log("onTouchMove evt=", event);

if (totalGroup.length<=2||isOpen==false){

return;

}

touchY = event.clientY;

renderDirty = true;

console.log("2");

}


/**绘制自己的排行榜信息 */

function drawMyRankByData(data,i){

let myY = 1095/1334 *stageHeight;

// 绘制List背景

context.drawImage(assets.myListBG, startX, myY, barWidth, barHeight);

//绘制玩家排名

switch (i) {

case 0:

context.drawImage(assets.NO1Icon, NoOffsetX, myY + NoOffsetY, NoWidth, NoHeight);

break;

case 1:

context.drawImage(assets.NO2Icon, NoOffsetX, myY + NoOffsetY, NoWidth, NoHeight);

break;

case 2:

context.drawImage(assets.NO3Icon, NoOffsetX, myY + NoOffsetY , NoWidth, NoHeight);

break;

default:

//设置字体和描边

context.font = 40 + "px Arial";

context.lineWidth = 8;  //描边大小

context.strokeStyle = '#04af75';//描边颜色

context.strokeText((i + 1) + "", NoTextX, myY + textOffsetY, textMaxSize);//描边文字

context.fillStyle = "#ffffff";//字体颜色

context.fillText((i + 1) + "", NoTextX, myY + textOffsetY, textMaxSize);//绘制序号

}

//绘制头像

var image2 = wx.createImage();

image2.src = data.url;

image2.onload = function () {

renderDirty = true;

console.log("myonload。。。");

}

context.font = fontSize + "px Arial";

context.fillStyle = "#ffffff";//字体颜色

context.drawImage(image2, iconStartX, myY + iconOffsetY , avatarSize, avatarSize);

//绘制名称

context.fillText(data.name + "", nameStartX,myY + textOffsetY , textMaxSize);

//绘制分数

context.fillText("关卡 " + data.scroes, scoreStartX, myY + textOffsetY, textMaxSize);

// renderDirty = true;

}


最后一次编辑于  2018-09-26  (未经腾讯允许,不得转载)
邀请回答
复制链接收藏投诉关注问题回答

2 个回答

  • 孤独的魂
    孤独的魂
    2018-09-27

    问题已经找出来了。主要是因为项目的帧率没有设置为60,在开放数据域里无法设置帧率。解决方法:

    在没发布成小游戏的项目中的index.html,  data-frame-rate="30"改成60。

    2018-09-27
    赞同 1
    回复
  • 是柿子啊
    是柿子啊
    2018-09-26

    你好,请提供一下出现问题的机型和微信版本,以及能复现问题的简单代码片段(https://developers.weixin.qq.com/miniprogram/dev/devtools/minicode.html)。

    2018-09-26
    赞同
    回复