收藏
回答

小游戏canvas,drawImage绘制多张图片(有重叠),只能显示一张

问题模块 框架类型 问题类型 操作系统 操作系统版本 手机型号 微信版本
客户端 小游戏 Bug Android EMUI 5.1 ( Android 7.0 ) 华为 Honor V9 Play 7.0.0

- 预期表现

微信开发者工具的表现符合预期:蓝色图片铺满屏幕,木板图片覆盖蓝色图片的部分区域



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

手机上是这样的。。。


运行我提供的代码,先出现全屏的蓝色图片,2秒后,蓝色图片不见了。。。只出现木板图片。


- 提供一个最简复现 Demo

GameGlobal.systemInfo = wx.getSystemInfoSync();
let canvas = wx.createCanvas();
let context = canvas.getContext('2d');
let bgImage = wx.createImage();
bgImage.src = 'images/sea.jpg';
bgImage.onload = function () {
context.drawImage(bgImage, 0, 0, systemInfo.screenWidth, systemInfo.screenHeight);
setTimeout(function()
{
let battleImage = wx.createImage();
battleImage.src ='images/wood.jpg';
battleImage.onload = function()
{
context.drawImage(battleImage , 50,50,
systemInfo.screenWidth * 0.2 , systemInfo.screenHeight * 0.2
           );
};
},2000);

};


- 复现路径

  1. 新建目录test。

  2. 新建目录test/images。

  3. test/images放入jpg格式的图片,更名为sea.jpg、wood.jpg。图片大小 < 200kB。

  4. 新建test/game.js, 放入以上js代码。新建test/game.json, 写入:

  5. {
    "deviceOrientation": "portrait"
    }
  6. 打开微信开发者工具,点击“编译”,运行test项目。

  7. 微信开发者工具,点击“预览”,手机打开安卓(Android 7)版微信7.0.0,扫描二维码进行预览。


经过探索后,发现:问题变成了无法指定多张有重叠的图片的覆盖顺序,详见我的评论。

最后一次编辑于  01-13  (未经腾讯允许,不得转载)
回答关注问题邀请回答
收藏

3 个回答

  • 能说普通话么
    能说普通话么
    星期六 10:33

    请问,这个问题您现在解决了么,请问怎么解决的

    星期六 10:33
    赞同
    回复
  • skybosi
    skybosi
    04-21

    运用 Promise.all 完美解决问题,示例代码如下:

    var imgPool = [
        {
            "id": "ByeD9rlryj0z69h9XWE4oiRa",
            "index": 0,
            "imgSrc": "images/home/Home_bg.png",
            "x": 0,
            "y": 0,
            "width": 320,
            "height": 568
        },
        {
            "id": "fM0BsD5g3f6IyM71ZYqwfEFX",
            "index": 1,
            "imgSrc": "images/home/Home_setting.png",
            "x": 13.235,
            "y": 20.535999999999998,
            "width": 55.3,
            "height": 54.599999999999994
        },
        {
            "id": "EE4YMeHyyOslDFnaKYfmXO5f",
            "index": 2,
            "imgSrc": "images/home/Home_btn1.png",
            "x": 78.4,
            "y": 328.23,
            "width": 163.2,
            "height": 47
        }
    ]
     
     
     
    // canvas 上下文
     
    var ctx = canvas.getContext('2d')
     
    var promise_list = []
     
     
     
    imgPool.forEach((item) => {
      // 将加载好的图片加入Promise中
      promise_list.push(
        new Promise((resolve, reject) => {
          item.img = new Image()
          item.img.src = item.imgSrc
          item.img.onload = function() {
            resolve(item)
          }
          item.img.click = function(e) {
            console.log(e)
          }
        })
      )
    })
    // 详见 http://es6.ruanyifeng.com/#docs/promise#Promise-all
    Promise.all(promise_list).then(function(results) {
      results.forEach((item) => {
        ctx.drawImage(
          item.img,
          item.x,
          item.y,
          item.width,
          item.height
        )
      })
    }).catch(function(reason) {
      console.log(reason)
    });



       

    04-21
    赞同
    回复
  • 飞飞小坏蛋
    飞飞小坏蛋
    01-13

    这样写,倒是可以显示2张图片:(sea.jpg  92kb,  wood.jpg 75kb

    GameGlobal.systemInfo = wx.getSystemInfoSync();
    let canvas = wx.createCanvas();
    let context = canvas.getContext('2d');
    let bgImage = wx.createImage();
    bgImage.src = 'images/sea.jpg';
    let battleImage = wx.createImage();
    battleImage.src ='images/wood.jpg';
    bgImage.onload = function () {
    context.drawImage(bgImage, 0, 0,
    systemInfo.screenWidth, 100);
    };
    battleImage.onload = function()
    {
    context.drawImage(battleImage , 40,80,
    systemInfo.screenWidth * 0.6 , 100
       );
    };

    无重叠的话,手机上的表现实符合预期的。

    关键点:不要在image.onload里边嵌套image2.onload。

    开发者工具的表现符合预期:


    重叠部分,木板盖住泳池。然而,手机上的表现却是:


    即使木板图片延迟drawImage,也还是这样。

    01-13
    赞同
    回复