收藏
回答

canvas组件的使用为什么会导致小程序卡死?

<canvas type="2d" id="myCanvass" class="canvas-div"

      style="height:{{canvasInfo.height}}px; position: relative; width:{{canvasInfo.width}}px;transform: scale({{ canvasInfo.scale }});top:{{canvasInfo.top}}px; left:{{canvasInfo.left}}px;"

      catchtouchstart="touchstart"

      catchtouchmove="touchmove"

      catchtouchend="touchend">

    </canvas>

这里的canvasInfo是通过下面js回调的值。

其中,js部分如下,其中有针对子组件创建画布,还是当前组件创建画布的判断。

const query = opts.obj && opts.obj.$wx ? wx.createSelectorQuery().in(opts.obj.$wx) : wx.createSelectorQuery()

        query.select('#' + this.id)

          .fields({ node: true, size: true },(sizeValue)=>{

            this.canvasNodewh["_left"] = sizeValue.node._left

            this.canvasNodewh["_top"] = sizeValue.node._top

          })

          .exec((res) => {

            this.canvas = res[0].node

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

            const sysInfo = wx.getSystemInfoSync();

            const dpr = sysInfo.pixelRatio

            const winWidth = sysInfo.windowWidth, winHeight = sysInfo.windowHeight;

            //--begin

            this.scaleNum = 1

            if (opts && opts.height && opts.width) {

              if(opts.width > winWidth || opts.height > winHeight){

                let n = Number(opts.width) / Number(opts.height),

                  t = Number(winWidth) / Number(winHeight);

                if (n > t) {

                  this.scaleNum = Number(winWidth) / Number(opts.width)

                } else {

                  this.scaleNum = Number(winHeight) / Number(opts.height)

                }

              }

            }

            //--end

            if(opts.obj && opts.obj.$wx){

              this.canvas.width = res[0].width * dpr

              this.canvas.height = res[0].height * dpr

              this.ctx.scale(dpr, dpr)

              //绘画中,获取到的坐标值,超过canvas范围,则放弃处理

              this.canvasNodewh["height"] = res[0].height

              this.canvasNodewh["width"] = res[0].width

            } else {

              this.canvas.width = opts.width

              this.canvas.height = opts.height

              this.canvasNodewh["height"] = opts.height

              this.canvasNodewh["width"] = opts.width

            }

            this.canvasNodewh["top"] = top


绘画使用:

drawStroke(stroke) {

    if (stroke.points == null) return;

    this.ctx.beginPath();

    for (let i = 0; i < stroke.points.length - 1; i++) {

      const start = this.normalizePoint(stroke.points[i]);

      const end = this.normalizePoint(stroke.points[i + 1]);

      this.ctx.moveTo(start.x, start.y);

      this.ctx.lineTo(end.x, end.y);

    }

    this.ctx.closePath();

    if (stroke.color) {

      this.ctx.strokeStyle = stroke.color;

    }

    if (stroke.width) {

      this.ctx.lineWidth = this.normalizeLineWidth(stroke.width);

    }

    if (stroke.join) {

      this.ctx.lineJoin = stroke.join;

    }

    if (stroke.cap) {

      this.ctx.lineCap = stroke.cap;

    }

    if (stroke.miterLimit) {

      this.ctx.miterLimit = stroke.miterLimit;

    }

    this.ctx.stroke();

  }


使用的主要内容是这些。哪里可能引起在Android手机微信小程序,在开启展示画布一段时间后导致卡死呢?

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

2 个回答

  • Demons
    Demons
    2023-12-26

    请具体描述问题出现的流程,并提供能复现问题的简单代码片段(https://developers.weixin.qq.com/miniprogram/dev/devtools/minicode.html)。

    2023-12-26
    有用
    回复
  • 微盟
    微盟
    2023-12-26

    最好能提供能复现问题的代码片段,这样大家才能快速帮你解决

    https://developers.weixin.qq.com/miniprogram/dev/devtools/minicode.html

    2023-12-26
    有用
    回复
登录 后发表内容