收藏
回答

自定义组件里canvas 2d生成的图片不完整?

在自定义组件里使用canvas 2d,在attached生命周期给组件节点赋值宽高后,绘制完整但生成的图片不完整。

测试机型:小米10和PC 小程序里

const screen = wx.getSystemInfoSync().windowWidth / 750;
function isNumber(value{
  return /^-?\d+(\.\d+)?$/.test(value);
}
function toPx(value, baseSize{
  if (typeof value === 'number') {
    return value
  }
  if (isNumber(value)) {
    return value * 1
  }
  if (typeof value === 'string') {
    const reg = /(em|rpx|px|%)$/g
    const results = reg.exec(value);
    if (!value || !results) {
      return 0;
    }
    const unit = results[1];
    value = parseFloat(value);
    let res = 0;
    if (unit === 'rpx') {
      res = Math.floor(value * (screen || 0.5) * 1);
    } else if (unit === 'px') {
      res = Math.floor(value * 1);
    }
    return res;
  }
}
Component({
  data: {
    width'',
    height'',
    url'',
    boundary: {
      left0,
      top0,
      width0,
      height0
    }
  },
  lifetimes: {
    attached() {
      this.setData({
        width'480rpx',
        height'854rpx',
      })
      const dpr = wx.getSystemInfoSync().pixelRatio
      const query = this.createSelectorQuery()
      query.select('#canvas')
        .fields({
          nodetrue,
          sizetrue
        })
        .exec((res) => {
          const canvas = res[0].node
          const ctx = canvas.getContext('2d')
          canvas.width = res[0].width * dpr
          canvas.height = res[0].height * dpr
          this.setData({
            canvas,
            'boundary.width': res[0].width,
            'boundary.height': res[0].height
          })
          ctx.scale(dpr, dpr)
          ctx.fillStyle = '#00B2B6'
          ctx.fillRect(00, canvas.width, canvas.height)
          ctx.fillStyle = 'red'
          ctx.fillRect(toPx('20rpx'), toPx('20rpx'), toPx('440rpx'), toPx('600rpx'))
        })
      setTimeout(() => {
        const {
          left,
          top,
          width,
          height
        } = this.data.boundary
        let destWidth = width * dpr
        let destHeight = height * dpr
        const copyArgs = {
          x: left,
          y: top,
          width,
          height,
          destWidth,
          destHeight,
          canvasthis.data.canvas,
          success(res) => {
            this.triggerEvent('success', res.tempFilePath)
          },
        }
        wx.canvasToTempFilePath(copyArgs)
      }, 200);
    }
  },
})
最后一次编辑于  03-08
回答关注问题邀请回答
收藏

1 个回答

  • 猫南北
    猫南北
    2020-12-18

    因为异步,在设置canvas宽高的时候,在this.setData的回调里面进行canvas操作,或者加一个setTimeout

    2020-12-18
    有用
    回复 3
    • 陌上华年
      陌上华年
      2020-12-18
      但是绘制没有问题,只有生成图片有问题~~而且这个问题只有在组件里才会。。在页面上不存在。。
      2020-12-18
      回复
    • jaQi
      jaQi
      02-03回复陌上华年
      解决了吗?
      02-03
      回复
    • 陌上华年
      陌上华年
      03-05回复jaQi
      并没有,不过非2D可以
      03-05
      回复
登录 后发表内容
问题标签