采用arc组件动态画圆时有卡顿感?
发布于 7 年前 作者 gqiao 2242 次浏览 来自 官方Issues

这个是我的代码circle.js

// 详情请看https://blog.csdn.net/Charles_Tian/article/details/80908442

Component({

 properties: {

   num: {

     type: Number,

     value: 0,

   },

   myValue: {

     type: String,

     value: ‘’,

   },

   all: {

     type: Number,

     value: 1,

   }

 },

 data: {

   timer: ‘’

 },

 ready(options) {

   // 页面初始化 options为页面跳转所带来的参数

   let that = this;

   // 以下两个是测试数据

   let totalItems = 100;

   let rightItems = 100;

   let showItems = (100 * that.properties.num / that.properties.all).toFixed(0);

   // let completePercent = parseInt((rightItems / totalItems) * 100);

   // that.getResultComment(completePercent);

   that.showScoreAnimation(rightItems, totalItems, showItems);

 },

 methods: {

   showScoreAnimation: function (rightItems, totalItems,number) {

     /*

     cxt_arc.arc(x, y, r, sAngle, eAngle, counterclockwise);

     x                     Number    圆的x坐标

     y                     Number    圆的y坐标

     r                     Number    圆的半径

     sAngle              Number    起始弧度,单位弧度(在3点钟方向)

     eAngle              Number    终止弧度

     counterclockwise      Boolean   可选。指定弧度的方向是逆时针还是顺时针。默认是false,即顺时针。

     */

     let that = this;

     let copyRightItems = 0;

     that.setData({

       timer: setInterval(function () {

         copyRightItems++;

         if (copyRightItems == number) {

           clearInterval(that.data.timer)

         } else {

           // 页面渲染完成

           // 这部分是灰色底层

           let cxt_arc = wx.createCanvasContext(‘canvasArc’, that);//创建并返回绘图上下文context对象。

           cxt_arc.setLineWidth(6);//绘线的宽度

           cxt_arc.setStrokeStyle(’#d2d2d2’);//绘线的颜色

           cxt_arc.setLineCap(‘round’);//线条端点样式

           cxt_arc.beginPath();//开始一个新的路径

           cxt_arc.arc(180, 120, 100, 0, 2 * Math.PI, false);//设置一个原点(53,53),半径为50的圆的路径到当前路径

           cxt_arc.stroke();//对当前路径进行描边

           //这部分是蓝色部分

           cxt_arc.setLineWidth(6);

           cxt_arc.setStrokeStyle(’#33b7c3’);

           cxt_arc.setLineCap(‘round’)

           cxt_arc.beginPath();//开始一个新的路径

           cxt_arc.arc(180, 120, 100, -Math.PI * 1 / 2, 2 * Math.PI * (copyRightItems / totalItems) - Math.PI * 1 / 2, false);

           cxt_arc.stroke();//对当前路径进行描边

           cxt_arc.draw();

         }

       }, 20)

     })

   },

 }

})

很是奇怪呢

3 回复

y v g tG

很少奇怪呢,卡顿感不知道是怎么产生的

奇怪了 setInterval 放到setData里边干什么?页面要用到timer这个属性?

回到顶部