收藏
回答

在循环中使用新的canvas的drawImage,只能画出一张图片吗?

我在循环中使用drawImage,代码如下,只把第一张图片画出到页面了,但是循环中的每一项都打印出来了,这个是什么原因呢?
  createLongPicture() {
    // 通过 SelectorQuery 获取 Canvas 节点
    wx.createSelectorQuery()
      .select('#canvas')
      .fields({
        node: true,
        size: true,
      })
      .exec(this.init2.bind(this))
  },
  init2(res) {
    let that = this
    let canvas = res[0].node;
    let ctx = canvas.getContext('2d')
    ctx.save();
    ctx.beginPath();
    var imgPool = [
      { 'path': that.data.testImg2, 'x': 20, 'y': 0,   'width': 343, 'height': 200 }, 
      { 'path': that.data.testImg, 'x': 20, 'y': 210, 'width': 343, 'height': 200 },
      ]
    var promise_list = []
    imgPool.forEach((item) => {
      promise_list.push(
        new Promise((resolve, reject) => {
          item.img = canvas.createImage()
          item.img.src = item.path;
          item.img.onload = () => {
            console.log('开始绘制图片')
            resolve(item)
          };
        })
      )
    })
    Promise.all(promise_list).then(function (results) {
      results.forEach((item) => {
        console.log('item===', item)
        ctx.drawImage(item.img,item.x,item.y,item.width,item.height)
        ctx.closePath();
        ctx.restore();
      })
    }).catch(function (reason) {
      console.log(reason)
    })
  }
回答关注问题邀请回答
收藏

1 个回答

  • TNT
    TNT
    2020-04-21

    想画什么东西。这个可以么https://developers.weixin.qq.com/miniprogram/dev/extended/component-plus/wxml-to-canvas.html

    2020-04-21
    有用
    回复 12
    • 2020-04-21
      需求是要把接口返回的多个图片上下连接在一起,生成一个长图片,所以我的想法是把这些图片都使用canvas画在一张图上。这个好像不行耶
      2020-04-21
      回复
    • TNT
      TNT
      2020-04-21回复
      可以的。但是位置你知道吗?每个图片画到哪个具体位置
      2020-04-21
      回复
    • 2020-04-21
      图片的位置是通过计算得出的,x轴上都是一样的(0坐标),y轴是通过图片高度加起来的。你的意思是说,你刚发的这个链接可以实现我的这个需求吗?
      2020-04-21
      回复
    • TNT
      TNT
      2020-04-21回复
      可以的。至于你说的你知道了具体位置你也可以用这个插件,https://developers.weixin.qq.com/community/develop/article/doc/000ac686c5c5506f18b87ee825b013
      2020-04-21
      回复
    • 2020-04-21
      那为什么在循环中画图只能画出一个呢?每一项都有打印,但是只画出了第一个。
      2020-04-21
      回复
    查看更多(7)
登录 后发表内容
问题标签