wx:if=''渲染与canvas联动bug
发布于 6 年前 作者 chaolong 7581 次浏览 来自 问答
  • 当前 Bug 的表现(可附上截图)

初始化阶段

重新渲染

  • 预期表现

通过wx:if=’'重新渲染后canvas标签有显示出来但是并没有在真机与模拟器上再次出现canvas图像

  • 复现路径
  • 提供一个最简复现 Demo

html

<view class=‘bac’ bindtap=‘test’></view>

<view wx:if=’{{show}}’>

  <canvas style=“width: 300px; height: 200px;” canvas-id=“firstCanvas”></canvas>

</view>

css

.bac{

  width: 100rpx;

  height: 100rpx;

  background: #000;

}

//js

Page({

  data:{

    show:true

  },

  test:function(){

    let that = this;

    if(that.data.show == true){

      that.setData({

        show:false

      })

    }else{

      that.setData({

        show:true

      })

    }

  },

  canvasIdErrorCallback: function (e) {

    console.error(e.detail.errMsg)

  },

  onReady: function (e) {

    // 使用 wx.createContext 获取绘图上下文 context

    var context = wx.createCanvasContext(‘firstCanvas’)

    context.setStrokeStyle("#00ff00")

    context.setLineWidth(5)

    context.rect(0, 0, 200, 200)

    context.stroke()

    context.setStrokeStyle("#ff0000")

    context.setLineWidth(2)

    context.moveTo(160, 100)

    context.arc(100, 100, 60, 0, 2 * Math.PI, true)

    context.moveTo(140, 100)

    context.arc(100, 100, 40, 0, Math.PI, false)

    context.moveTo(85, 80)

    context.arc(80, 80, 5, 0, 2 * Math.PI, true)

    context.moveTo(125, 80)

    context.arc(120, 80, 5, 0, 2 * Math.PI, true)

    context.stroke()

    context.draw()

  }

})

3 回复

你好,你提供的代码片段wxml乱码了,麻烦重新提供下能复现问题的代码片段,谢谢

你这个需要销毁后 重新实例化

代码片段

wechatide://minicode/PmMHU5mZ7lmE

回到顶部