收藏
回答

canvas图像在模拟器中加载正常,真机测试下拉刷新出现问题,是什么问题?

模拟器初次打开和下拉刷新都正常:

真机测试初次打开正常下拉刷新异常:


raw2D: function(highData, lowData){

    wx.createSelectorQuery().select('#myCanvas').fields({node: true, size: true}).exec((res)=>{

      var canvas = res[0].node

      const systemInfo = wx.getSystemInfoSync()

      const screenWidth = systemInfo.screenWidth

      const screenHeight = systemInfo.screenHeight

      const dpr = systemInfo.pixelRatio

      const ctx = canvas.getContext('2d')

      ctx.clearRect(0, 0, canvas.width, canvas.height) // 清空canvas

      const xOffset = screenWidth / 10  // x轴的偏移量

      const groupSpacing = screenWidth / 5 // 5等分屏幕宽度

      var sh = screenHeight * 0.4 * 0.6  // canvas的宽度

      canvas.width = screenWidth * dpr

      canvas.height = screenHeight * dpr * 0.4 * 0.6

      ctx.scale(dpr, dpr)

      // 获取每日最高温度的最大值和每日最低温度的最小值

      var maxHighTemp = this.maxNum(highData);

      var minLowTemp = this.minNum(lowData);

      // 获取5日温度的最大差值(canvas图片的网格数)

      var grid = maxHighTemp-minLowTemp;

      // 每一canvas网格的像素大小

      const distance = Math.floor(sh / grid) 

      const new_distance = Math.floor(distance * (grid - 2) / grid)

      ctx.lineWidth = 2;

      ctx.font = '16px sans-serif';

      // highData开始

      ctx.beginPath()

      ctx.fillStyle = "#CD5555"

      ctx.strokeStyle = "#CD5555"

      var htX = 0, htY = 0

      const TextOffset = 10

      for (let i = 0; i < highData.length; i++) {

        htX = i * groupSpacing + xOffset

        htY = (maxHighTemp - highData[i]) * new_distance + distance + new_distance

        if (i==0){

          ctx.moveTo(htX, htY)

          ctx.fillText(highData[i], htX-TextOffset, htY-TextOffset)

        }else{

          ctx.lineTo(htX, htY)

          ctx.fillText(highData[i], htX-TextOffset, htY-TextOffset)

        }

      }

    ctx.stroke()


    // lowData开始

    ctx.beginPath()

    ctx.fillStyle = "black"

    ctx.strokeStyle = "black"

    var ltX = 0, ltY = 0

    for (let i = 0; i < lowData.length; i++) {

      ltX = i * groupSpacing + xOffset

      ltY = (sh - (lowData[i] - minLowTemp) * new_distance) - distance

      if (i==0){

        ctx.moveTo(ltX, ltY)

        ctx.fillText(lowData[i], ltX-TextOffset, ltY-TextOffset)

      }else{

        ctx.lineTo(ltX, ltY)

        ctx.fillText(lowData[i], ltX-TextOffset, ltY-TextOffset)

      }

    }

    ctx.stroke()

  })

},

回答关注问题邀请回答
收藏

1 个回答

  • 社区技术运营专员-阳光
    社区技术运营专员-阳光
    09-09

    你好,麻烦提供出现问题的具体机型、微信版本号、系统版本号,以及能复现问题的代码片段(https://developers.weixin.qq.com/miniprogram/dev/devtools/minicode.html)

    09-09
    有用
    回复 3
登录 后发表内容
问题标签