小程序Canvas:Canvas._left will be removed, DO NOT USE IT

问题:SignaturePad 手绘板,在电脑端可以绘制,在小程序端绘制以后不显示。

  1. 开发者工具打印日志:Canvas._left will be removed, DO NOT USE IT.

    image

  2. 原因:真机使用时确实无法获取该canvas的实例属性_left.

  3. 解决:通过微信小程序的wx.createSelectorQuery()方法得到query筛选器,通过select方法绑定元素,再通过fields指定要获取的属性值等。

    query.select('#signPadCanvas').fields({
      node: true,
      size: true,
      rect: true,
    }).exec((res) => {
      const canvas = res[0].node
      const ctx = canvas.getContext('2d')
    
      const dpr = wx.getSystemInfoSync().pixelRatio
      canvas.width = res[0].width * dpr
      canvas.height = res[0].height * dpr
      canvas.left = res[0].left
      canvas.top = res[0].top
    
      this.signaturePad.init(canvas)
      this.canvas = canvas
    })
    
  4. 官方链接: 获取界面上的节点信息

posted @ 2025-02-21 18:06  KKKKKKYFFYFYI  阅读(38)  评论(0)    收藏  举报