很少奇怪呢,卡顿感不知道是怎么产生的
采用arc组件动态画圆时有卡顿感?这个是我的代码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) }) }, } }) 很是奇怪呢
2019-09-18