Canvas绘制的内容怎么才能让其跟随页面的滚动？
发布于 7 年前 作者 na36 5583 次浏览 来自 官方Issues

我用CANVAS绘制了一个圆形的进度条。其中画布用position:fixed固定在屏幕右下角，在开发工具中显示正常，滚动正常。

但是在真机时滚动就异常了，视频中能看到进度条勉强跟上画布（白色圆形有文字倒计时的其实就是画布的位置，用真机调试审查工具确认过），是因为我间隔50ms就调用了一个setData({})去渲染页面，他才会跟着动。如果不调用setData({})的话，画布绘制出来的图形不会跟着画布固定在屏幕右下角。

附上代码：

WXML：

<view class="timmer" wx:if="{{!isRead}}">
  <circle class="timmerInner" wx:if="{{!isRead}}" id='circle1' text='{{txt}}' bg='circle_bg1' draw='circle_draw1' bind:runEvent="_runEvent">
    <view class="circle_info" bindtap="changeTime">
      <text class='circle_txt'>{{txt}}</text>
    </view>
  </circle>
</view>

JS:

let that = this
    // 设置倒计时 定时器 假设每隔100毫秒 count递增+1，当 count递增到两倍maxCount的时候刚好是一个圆环（ step 从0到2为一周），然后改变txt值并且清除定时器
    this.countTimer = setInterval(() => {
      if (this.data.count <= 2 * this.data.maxCount) {
        // 绘制彩色圆环进度条
        this.circle1.drawCircle(
          'circle_draw1',
          25,
          2,
          this.data.count / this.data.maxCount
        )
        this.data.count++
      } else {
        // clearInterval(this.countTimer)
        this.circle1.drawCircle('circle_draw1', 25, 2, 301)
      }
    }, 50)
    this.timmer = setInterval(() => {
      let counttxt = that.data.counttxt - 1
      if (counttxt >= 0) {
        that.setData({
          txt: counttxt + 'S',
          counttxt
        })
      } else {
        requestUtil.requestLoading(
          'setGraphicScore?graphicId=' +
            that.data.graphicId +
            '&login=' +
            that.data.userInfo.login,
          {},
          '',
          function(res) {
            that.setData({
              txt: '+' + res.addPoint
            })
            wx.showToast({
              title: '积分：+' + res.addPoint,
              icon: 'none',
              duration: 1500,
              mask: false
            })
            setTimeout(() => {
              that.setData({
                isRead: true
              })
            }, 1500)
          },
          function() {}
        )
        clearInterval(this.timmer)
      }
    }, 1000)
    setInterval(() => {
      that.setData({})
    }, 50)

WXSS:

.timmer {
  width: 100px;
  height: 100px;
  position: fixed;
  bottom: 30rpx;
  right: -90rpx;
  /* z-index: 1000; */
}
 
.timmerInner {
  position: absolute;
}

附上组件：
https://segmentfault.com/a/11...

视频演示：https://www.bilibili.com/vide...

求大神帮助！！！

回到顶部